It seem Shopify blocked worker on frontstore

Daniel_Truong
Shopify Partner
23 1 5

Hi. Recently i see an error in Chrome console, it seem Shopify blocked Service worker.

 

[Report Only] Refused to create a worker from '<URL>' because it violates the following Content Security Policy directive: "worker-src 'none'".

 

Screenshot: https://tppr.me/VD2lc 

 

 

Anyone facing this problem?

 
Shopify App & Theme Developer
Replies 9 (9)
timloges
New Member
2 0 0

Same problem here with our mapbox implementation.

Edgemesh
Tourist
9 0 3

This is a new (as of ~12/18/2020) notice. It looks like Service Workers are being looked at. Here you are seeing just a warning (note the Report only mode of the Content Security Policy). However if you have a Service Worker served via an App-Proxy (I don't think there is another way and the scope be correct) you might be getting a failed load due to Shopify stripping the Service Worker Allowed header from new App-Proxy apps (see here ). I'd suggest dropping Shopify support an email if that's the case.

EasyThemeEditor
Excursionist
19 1 3

Given that it's '[Report Only]', does it affect the actual worker from loading?

Want to edit your shop's website without writing a line of code? Try Easy Theme Editor.
Want to get Easy Theme Editor for free? Email us at code.monkeys.69@gmail.com with your shop link and we'll set you up!
timloges
New Member
2 0 0

It does block the worker.

And shopify confirmed the CSP Change via Email:

"In review of the request I did find out that as of 12/23/2020 there was a CSP change. We had to introduce limitations to the creation of service workers across the board, in an effort to improve the security of our platform and how it interfaces with integrations and apps."

 

tormod17
Tourist
4 0 1

I'm getting a similar problem - we are creating a service worker via an app proxy and am seeing 

[Report Only] Refused to create a worker from '##/##/sw.js' because it violates the following Content Security Policy directive: "worker-src 'none'".

What is the solution for this? - does it affect all Shopify themes because we do this for another client and am not seeing the error. 

I do see the same error now for the other client but my service worker is registered

Edgemesh
Tourist
9 0 3

The Content Security Policy (CSP) notice is reported only - so that's not the blocker.

Instead, I think you're seeing an issue with new Apps having the Service Worker header blocked (see: https://community.shopify.com/c/Shopify-APIs-SDKs/App-Proxy-removes-custom-headers/m-p/1000703

tormod17
Tourist
4 0 1

Thanks for response

Can someone from Shopify confirm that we can no longer pass through a custom header through a proxy and use service workers ? and from when this change was made?

I see the Report Only error for CSP but I get another error about mime type which I haven't seen before

`DOMException: Failed to register a ServiceWorker for scope ('https://mywebsite.co/apps/my-app/') with script ('https://mywebsite.co/apps/my-app/sw.js'): The script has an unsupported MIME type ('text/plain')`

I don't see where I have control over where I can change the mime type of the file i'm serving, so am assuming this is because its being handled incorrectly.

Shayne
Shopify Staff
Shopify Staff
208 9 47

Hi everyone, thanks for adding your voices to the thread. Service workers can still be used on Shopify stores, but you just need to register them on the app proxy sub-path rather than on the root directory, which doesn't require the header. Service workers on the root directory are no longer supported. Feel free to ask any questions about specific use-cases in the thread, or you can even PM me directly if you want. I'm happy to help in any way that I can.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

ThaoTruong
New Member
1 0 1

Hi @Shayne,

We have registered the service worker on the app proxy sub-path, but it seems to lose the end-user subscription. Can you propose some solution to retrieve this subscription?