Request blocked by browser in embedded app

Retired Boards Appdev Tools
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 devtools
Blocked request as seen in chrome devtools2036×954 89 KB

2

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

3

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.

4

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

5

So shopify does not allow iFrames within embedded apps?

6

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/topic/761938

If any Shopify staffers can also chime in about this…