Estoy tratando de representar un gráfico en mi aplicación usando Pug como se ve a continuación:
block content h2 Question statistics .col-lg-12 script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js") .chart-container canvas#myChart2 script. var ctx = document.getElementById("myChart2").getContext('2d'); ctx.canvas.parentNode.style.width = '50%' var idata = [1] var ilabel = [2] var myChart = new Chart(ctx, { /* ... etc */Esto se cargó bien antes de una semana más o menos, pero hoy, cuando intenté acceder a esta función, el gráfico no se mostraba. El error en mi consola es este:
Se negó a cargar el script
'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'porque infringe la siguiente directiva de Política de seguridad de contenido:"script-src 'self'". Tenga en cuenta que 'script-src-elem' no se configuró explícitamente, por lo que 'script-src' se usa como alternativa.
y
Se negó a ejecutar el script en línea porque viola la siguiente directiva de Política de seguridad de contenido: "script-src 'self'". Se requiere la palabra clave 'unsafe-inline', un hash ('sha256-AklvVxShqs4WBi3vUz7qSiPkes2rSVGoNyoZXYVnSA8=') o un nonce ('nonce-...') para habilitar la ejecución en línea.
Es la primera vez que veo este error y no se como solucionarlo. ¿Algunas ideas?
Como resultó en los comentarios, aquí está la línea de código que lo rompió todo:
app.use(helmet());Helmet es un módulo realmente genial diseñado para permitirle proteger su servidor de los vectores de ataque más comunes sin preocuparse demasiado por los detalles. Por desgracia, como cualquier buena herramienta de seguridad, funciona en "modo paranoico" de forma predeterminada. Esto es lo que esta pequeña línea es realmente equivalente a:
app.use(helmet.contentSecurityPolicy()); app.use(helmet.dnsPrefetchControl()); app.use(helmet.expectCt()); app.use(helmet.frameguard()); app.use(helmet.hidePoweredBy()); app.use(helmet.hsts()); app.use(helmet.ieNoOpen()); app.use(helmet.noSniff()); app.use(helmet.permittedCrossDomainPolicies()); app.use(helmet.referrerPolicy()); app.use(helmet.xssFilter());Sí, un montón de cosas. El que arruinó su configuración es el primer elemento de esta lista. Estos son los valores predeterminados enviados como valores de encabezado de política de seguridad de contenido por esa línea:
default-src 'self'; base-uri 'self'; block-all-mixed-content; font-src 'self' https: data:; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src 'self'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; upgrade-insecure-requestsUna vez más, eso tiene sentido, ya que Helmet no sabe nada sobre las entidades externas que está utilizando, y su nivel de confianza en ellas. Eres tú quien es responsable de proporcionar estos datos, ya sea agregando información de hash o enumerando las fuentes confiables en la configuración. Por ejemplo:
helmet.contentSecurityPolicy({ useDefaults: false, directives: { defaultSrc: ["'self'"], scriptSrc: ["'self'", "example.com"], // scripts from example.com are now trusted objectSrc: ["'none'"], upgradeInsecureRequests: [], }, })Puede configurar cada módulo individualmente o agregar esta configuración en el casco directamente:
app.use( helmet({ contentSecurityPolicy: { useDefaults: false, directives: { ... } }, }) );