Intenté configurar el encabezado CSP para que mi sitio cargue datos de recursos confiables
CSP bloquea mis archivos JS locales. aquí está mi 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'] } } },Archivos bloqueados:
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.jsEl 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.Su solicitud de encabezado se muestra en la pestaña de red para obtener más detalles. Es extraño, pero una vez obtiene el mismo archivo js y una vez da el error ...
Ejemplos a continuación de mdn docs. Supongo que tu problema puede ser resuelto por uno de ellos. Consulte más ejemplos aquí
Ejemplo 1
El administrador de un sitio web quiere que todo el contenido provenga del propio origen del sitio (esto excluye los subdominios).
Content-Security-Policy: default-src 'self'Ejemplo 2
El administrador de un sitio web desea permitir el contenido de un dominio de confianza y todos sus subdominios (no tiene que ser el mismo dominio en el que está configurado el CSP).
Content-Security-Policy: default-src 'self' trusted.com *.trusted.comEjemplo 3
El administrador de un sitio web desea permitir que los usuarios de una aplicación web incluyan imágenes de cualquier origen en su propio contenido, pero restringir los medios de audio o video a proveedores confiables y todos los scripts solo a un servidor específico que aloja código confiable.
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.comAquí, por defecto, solo se permite el contenido desde el origen del documento, con las siguientes excepciones:
Las imágenes pueden cargarse desde cualquier lugar (tenga en cuenta el comodín "*"). Los medios solo se permiten desde media1.com y media2.com (y no desde los subdominios de esos sitios). El script ejecutable solo está permitido desde userscripts.example.com.
Cambié addMeta a falso y ¡problema resuelto! luego explico el motivo
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'] } } },