Request blocked by browser in embedded app

I'm trying to use Facebook Customer chat in an embedded app in order to provide support.

FBCC however does not load inside an embedded app, since the request is being blocked, as seen here. It does however work in a standalone app. Is there any workaround?

Blocked request as seen in chrome devtoolsBlocked request as seen in chrome devtools

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 237

Did you whitelist your embedded app's domain in the Facebook messenger settings? Also, did you check for any potential CORS issues?

0 Likes

Yes, whitelisted both, the embedded page url and the shopify url.

Safari gives a hint:

Refused to load https://www.facebook.com/v2.11/plugins/customerchat.php?.... because it does not appear in the frame-ancestors directive of the Content Security Policy.

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 237

Yes, this needs to be defined. As described here --> https://content-security-policy.com/frame-ancestors/

0 Likes

So shopify does not allow iFrames within embedded apps?

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 237

It appears as if this implementation path does run into issues based on previous posts.

https://community.shopify.com/c/Shopify-Apps/Blocked-by-Content-Security-Policy-FireFox/td-p/691031

https://community.shopify.com/c/Shopify-APIs-SDKs/Unsupported-Content-Security-Policy-directive-brea...

If any Shopify staffers can also chime in about this...

0 Likes