Search code examples
vue.jsnuxt.jscontent-security-policy

Refused to load the script CSP

I added CSP to my nuxt website. it worked until i added addMeta:true to the CSP object.

now I'm getting the error :

eRROR

text error :

Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'sha256-pbUsaX0N1YAAThWC12JxlsJzrk+Kb8u0nzG7RegV+Tw='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I have checked the CSP using : https://csp-evaluator.withgoogle.com/

it has no issue.

The output :

default-src 'self' *.tawk.to MYHOST;
img-src https: *.google-analytics.com *.w3.org MYHOST data:;
worker-src 'self' blob: MYHOST *.tawk.to;
style-src 'self' 'unsafe-inline' MYHOST *.google-analytics.com *.googletagmanager.com *.tawk.to *.jsdelivr.net;
script-src-elem 'self' 'unsafe-inline' MYHOST *.google-analytics.com *.tawk.to *.googletagmanager.com;
font-src 'self' MYHOST *.google-analytics.com *.googletagmanager.com *.tawk.to data:;
connect-src https: wss: MYHOST *.google-analytics.com *.googletagmanager.com *.tawk.to;
form-action 'self';
frame-ancestors 'none';
object-src 'none';
base-uri MYHOST;
script-src 'sha256-QmdMW6/6GRLx7y5TPpTuUM6roj/PoGrZMBytBPICuLo=' 'self'

any idea what causes this error? and do I need the meta tag or its not necessary?

Solution

  • It seems like you might have deployed multiple CSPs, one as a meta tag, possibly another as a response header. Adding another CSP can only make it stricter. You should check if there is a CSP in a response header and how it is configured.

    If you proceed with your policy in meta, you should expand the error message to see the URLs in question. Some are likely the same domain, for which you should add 'self' to script-src.

    Based on the current information, there is not much more advice that can be given.