I’m trying to create a CSP that will work with Shopify, the reason is due to Lighthouse saying the severity of not having one is “high”. I personally don’t think it’s “high” due to the fact literally every Shopify store seems to have the same warning in lighthouse, and apps themselves usually set their own CSPs so that nobody can hack your store via a third-party app. However to keep lighthouse happy and get 100 Best Practice I’m trying to set this up.
I want to ensure that “self” is in place, and then exceptions for Shopify sources is allowed. I’ve only found partial solutions so far.
I tried this, that allows all “self” served sources and all https sources only, which partially works, however clearly some sources aren’t HTTPS. There may be a good reason for that but I’m not sure:
I then tried to include the Shopify CDN and Cloudflare CDN and all Shopify domains, as I thought maybe that’s the issue:
It also has the same result as prior. If I modified it to all all https and http it kind of defeats the purpose of having a CSP, and I’m not sure if that would be seen as even worse from Lighthouse that I’ve purposely allowed all sources, rather than just not setting up a CSP.
Does anyone know of the correct way to set this up that will work with all Shopify/Self sources and third party apps, as well as any services used by Shopify like cloudflare?
Any help would be great.
Here is what Chat GPT told me
Here are some common sources that you might need to allow in the Content-Security-Policy meta tag for an average Shopify store:
-
shopify.com: This domain is used by Shopify to host various resources and services, such as the Shopify CDN, APIs, and other tools.
-
myshopify.com: This domain is used by Shopify to host resources and services related to individual stores, such as the store’s admin interface, themes, and apps.
-
cloudflare.com: This domain is used by Cloudflare to provide content delivery, security, and performance services.
-
google.com: This domain is used by Google to host various resources and services, such as Google Analytics, Google Fonts, and Google Maps.
-
googletagmanager.com: This domain is used by Google to host the Google Tag Manager service.
-
google-analytics.com: This domain is used by Google to host the Google Analytics service.
To allow these sources in the Content-Security-Policy meta tag, you can add them to the appropriate directives, as shown in the following example:
This Content-Security-Policy allows resources to be loaded from self, https sources, and the specified trusted sources, and does not allow resources to be loaded from non-https sources or any other sources. It also does not allow the use of inline script or object elements or the evaluation of code from any other sources.
Note that this is just a starting point, and you might need to allow additional sources depending on the specific needs of your Shopify store.
If you need to allow the use of inline script or object elements or the evaluation of code, you can use the nonce-{random_string} or sha256-{hash_of_script} keywords in the script-src directive, as shown in the previous examples.
Replace {random_string} with a randomly generated string that you generate on the server when the page is served, and replace {hash_of_script} with the hash of the script that you want to allow to be executed. These approaches allow you to specify specific inline scripts or scripts that are allowed to be executed, while still providing some level of security.
The issue is this also doesn’t work.
1 Like