Unsupported Content-Security-Policy directive breaks embedded apps on Safari.

[hutch]

When loading an a Shopify admin embedded app the initial page load carries this response header:

Content-Security-Policy: block-all-mixed-content; upgrade-insecure-requests; default-src 'self' data: blob: https://* shopify-pos://*; connect-src 'self' blob: wss://* https://* https://bugsnag-mtl.shopifycloud.com:4900/js; style-src 'self' 'unsafe-inline' data: blob: https://*; media-src 'self' data: blob: https://videos.shopifycdn.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' cdn.shopify.com cdn.shopify.cn checkout.shopifycs.com d2c7xlmseob604.cloudfront.net www.google-analytics.com stats.g.doubleclick.net app.myshopify.io app.myshopify.com c.paypal.com www.paypal.com appcenter.intuit.com mpsnare.iesnare.com api.stripe.com maps.googleapis.com js.braintreegateway.com www.youtube.com s.ytimg.com custom-fields.shopifycloud.com; child-src 'self' https://* shopify-pos://*; frame-src app.myshopify.io *.shopifyapps.com *.myshopify.io *.myshopify.com https://* shopify-pos://*; worker-src 'self' blob:

Because "worker-src" is not a supported directive for Safari (see documentation) it triggers the following error as seen in the Safari console: 

Consequently, when the embedded apps <iframe> attempts to load it fails with the following error seen in the Safari console:

I tested a few other apps and witnessed similar behavior. 

Safari version:

Version 13.1.1 (15609.2.9.1.2)

OS:
macOS Catalina v10.15.5

[hutch]

Also it appears that traffic is not being directed to the correct redirect uri. You can see in the image below that the redirect URI I have set is "https://shoppefeed.web.app/shopify/redirect" however it looks like traffic is being pushed to "https://shoppefeed.myshopify.com/admin/auth/login".

I'm not seeing this behavior on Chrome or Firefox

[SBD_]

Thanks @hutch 

Similar threads here and here.

Have you made any progress? Which library are you using?

[BStubbs]

If anyone finds a similar issue like this again, you can use postMessage to achieve the redirect.

https://github.com/Shopify/shopify_app/wiki/Using-postMessage-during-embedded-app-authenticate

https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage

[jam_chan]

Any update in 2021? If I am redirecting to the correct URI, where is the suitable place to handle this redirect?

[mikeastral]

We are also having the same issue.

At the moment of writing this post  "worker-src" is still not supported for Safari (just as mentioned in this link). 

Also,  I confirm that (as mentioned in a previous post) the redirect is not being pointed correctly, for example, if we set a redirect URI as "https://somepage/redirect" it looks like traffic is being pushed to "https://somepage/redirect/admin/auth/login" .  The solutions proposed by @SBD_ are not helping in fixing this issue; furthermore our APP is using session tokens, we are not working with cookies.

@SBD_  Is there any official update regarding this issue? Thanks

[SBD_]

@mikeastral can you confirm the token is passed along in your redirect?

If so, and the issue persists, please DM me app details + replication steps.