Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

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

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

hutch
Visitor
2 0 0

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: 

Screen Shot 2020-06-02 at 5.43.54 PM.png

 

Consequently, when the embedded apps <iframe> attempts to load it fails with the following error seen in the Safari console:
Screen Shot 2020-06-02 at 5.46.20 PM.png

 

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


Replies 6 (6)

hutch
Visitor
2 0 0

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".redirects.png

 

I'm not seeing this behavior on Chrome or Firefox

SBD_
Shopify Staff
1831 273 423

Thanks @hutch 

 

Similar threads here and here.

 

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

Scott | Developer Advocate @ Shopify 

BStubbs
Shopify Partner
137 16 63

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

 

 

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
jam_chan
Shopify Partner
938 24 193

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

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
mikeastral
Tourist
5 0 4

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_
Shopify Staff
1831 273 423

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

Scott | Developer Advocate @ Shopify