Request blocked by browser in embedded app

New Member
5 0 0

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
Shopify Partner
871 76 188

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

0 Likes
New Member
5 0 0

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
Shopify Partner
871 76 188

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

0 Likes
New Member
5 0 0

So shopify does not allow iFrames within embedded apps?

0 Likes
Shopify Partner
871 76 188

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