I've been working on implementing CSP headers for my website to ensure data is loaded from trusted sources.
However, I'm facing an issue where CSP is blocking my local JS files. Here's a snippet from my nuxt.config.js:
const self = 'localhost:*'
render: {
csp: {
reportOnly:false,
addMeta: true,
policies: {
'default-src': [self],
'script-src': [self, 'unsafe-inline','strict-dynamic'],
'style-src': [self,'unsafe-inline'],
'img-src':[self,'data:'],
'object-src':[self,'self']
}
}
},
The following files are being blocked:
http://localhost:3500/_nuxt/runtime.js
http://localhost:3500/_nuxt/layouts/default.js
http://localhost:3500/_nuxt/pages/index.js
http://localhost:3500/_nuxt/commons/app.js
http://localhost:3500/_nuxt/vendors/app.js
http://localhost:3500/_nuxt/app.js
The error message reads:
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'sha256-6SIdoCBgtiLdpIihMzGUvd5OCiaDdcIHhB8Tzkn9l8M='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
To delve deeper into this issue, I recommend checking the header request in the network tab for more insights. It's strange how sometimes it loads the same JS file and other times throws an error...