Request blocked by browser in embedded app

sonium
Shopify Partner
14 0 1

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

Replies 5 (5)

Gregarican
Shopify Partner
1033 86 285

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

sonium
Shopify Partner
14 0 1

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.

Gregarican
Shopify Partner
1033 86 285

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

sonium
Shopify Partner
14 0 1

So shopify does not allow iFrames within embedded apps?

Gregarican
Shopify Partner
1033 86 285

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...