Content Security Policy blocks my locale NUXT JavaScript files-CodePudding

I've tried to set CSP header for my site to load data from trusted resources

CSP blocks my local JS files. here is 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']
        }
    }
},

Blocked files:

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:

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.

It's header request shown in network tab for more details, It's strange but one time it gets same js file and one time it gives the error...

CodePudding user response：

Examples below from mdn docs. Guess you problem can be solved by one of them. Please refer for more examples here

Example 1

A web site administrator wants all content to come from the site's own origin (this excludes subdomains.)

Content-Security-Policy: default-src 'self'

Example 2

A web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the CSP is set on.)

Content-Security-Policy: default-src 'self' trusted.com *.trusted.com

Example 3

A web site administrator wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code.

Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com

Here, by default, content is only permitted from the document's origin, with the following exceptions:

Images may load from anywhere (note the "*" wildcard). Media is only allowed from media1.com and media2.com (and not from subdomains of those sites). Executable script is only allowed from userscripts.example.com.

CodePudding user response：

I changed addMeta to false and problem solved!

const self = 'localhost:*'
render: {
    csp: {
        reportOnly:false,
        addMeta: false,
        policies: {
            'default-src': [self],
            'script-src': [self, 'unsafe-inline','strict-dynamic'],
            'style-src': [self,"'unsafe-inline'"],
            'img-src':[self,'data:'],
            'object-src':[self,'self']
        }
    }
},