javascript - the - htaccess content security policy

Modernizr causa errores de violación de la política de seguridad de contenido(CSP)

Question

Estoy intentando usar los nuevos encabezados HTTP de la Política de seguridad de contenido (CSP) en un sitio de prueba. Cuando uso CSP junto con Modernizr, obtengo errores de violación de CSP. Esta es la política de CSP que estoy usando:

Política de seguridad de contenido: default-src ''self''; script-src ''self'' ajax.googleapis.com ajax.aspnetcdn.com; estilo-src ''yo''; img-src ''self''; fuente-src ''self''; report-uri /WebResource.axd?cspReport=true

Estos son los errores de la consola del navegador Chrome:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src ''self''".
Either the ''unsafe-inline'' keyword, a hash (''sha256-...''), or a nonce (''nonce-...'') is required to enable inline execution.
window.Modernizr.injectElementWithStyles - modernizr-2.7.2.js:134
window.Modernizr.tests.touch - modernizr-2.7.2.js:457(anonymous function)
modernizr-2.7.2.js:949(anonymous function) - modernizr-2.7.2.js:1406

Descubrí la siguiente solución en el sitio de Github Modernizr. Sin embargo, la solución se propuso por primera vez en marzo y haciendo un poco de Google-Fu no puedo encontrar soluciones o soluciones a este problema.

Sé que puedo incluir la directiva unsafe-inline que puede solucionar este error, pero esto también permite que se ejecute un código inseguro y, en primer lugar, niega el uso de CSP. ¿Alguien tiene alguna solución?

Actualización - Qué es CSP

CSP es un encabezado HTTP compatible con todos los navegadores principales ( incluido Edge ). Esencialmente es una lista blanca de contenido que el navegador puede usar para renderizar la página. Obtenga más información here o lea la documentación de Mozilla para CSP here y here .

Actualización - Ayuda a resaltar CSP

CSP ahora está disponible en todos los navegadores (Edge agregó soporte, ¡yay!) Y es un salto gigantesco en seguridad web. Para aquellos interesados ​​en obtener más soporte de terceros para CSP, vea estos:

1. Soporte de modernización para CSP
2. Soporte de Visual Studio para CSP . Tenga en cuenta que el enlace del navegador no funciona si tiene CSP habilitado, ya que utiliza JavaScript en línea.
3. Soporte de Visual Studio Web Essentials Extension para CSP . Web Essentials es un complemento de Visual Studio, cuyas características a menudo terminan en la próxima versión de Visual Studio.

Answer 1

Encontré una solución sin tener que usar unsafe-inline.

Puede modificar el Modernizr sin minimizar en una línea:

fakeBody = body || document.createElement(''body'');

convertir a

fakeBody = document.createElement(''body'');

Funciona en IE9, Firefox y Chrome.

Answer 2

Sospecho que no hay otra solución que volver a escribir las partes de Modernizr que usan código en línea o código evaluado dinámicamente (que se aplica tanto a JS como a CSS). Las experiencias de AngularJS ngCsp podrían ser útiles aquí.