Request blocked by browser in embedded app

[sonium]

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

[Gregarican]

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

[sonium]

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]

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

[sonium]

So shopify does not allow iFrames within embedded apps?

[Gregarican]

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