It seem Shopify blocked worker on frontstore

[Daniel_Truong]

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?

[timloges]

Same problem here with our mapbox implementation.

[Edgemesh]

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]

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

[timloges]

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]

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]

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]

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]

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]

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.

[ThaoTruong]

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?