Question

我正在尝试在测试网站上使用新的内容安全策略（CSP） HTTP标头。当我将CSP与Modernizr结合使用时，我得到了CSP违规错误。这是我正在使用的CSP政策：

内容 - 安全 - 政策： default-src'self'; script-src'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src'self'; IMG-SRC '自'; font-src'self'; report-uri /WebResource.axd?cspReport=true

以下是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

我在Github Modernizr网站上发现了following workaround。但是，解决方法是在3月份首次提出并做了一点Google-Fu，我找不到解决此问题的方法或解决方法。

我知道我可以包含 unsafe-inline 指令，该指令可以解决此错误，但这也会使不安全的代码运行并首先取消CSP的使用。有没有人有任何解决方案？

更新 - 什么是CSP

CSP是所有主流浏览器（Including Edge）支持的HTTP标头。基本上它是允许浏览器用于呈现页面的白色内容列表。了解更多here或阅读有关CSP here和here的Mozilla文档。

更新 - 帮助突出显示CSP

现在可以在all browsers上获得CSP（Edge添加了支持，是的！）以及它在网络安全方面的巨大飞跃。对于那些有兴趣获得更多第三方支持CSP的人，请参阅：

Modernizr support for CSP
Visual Studio support for CSP。请注意，如果您启用了CSP，则浏览器链接不起作用，因为它使用内联JavaScript。
Visual Studio Web Essentials Extension support for CSP。 Web Essentials是一个Visual Studio插件，其功能通常最终出现在Visual Studio的下一个版本中。

Answer 1

我怀疑除了重写使用内联代码或动态评估代码（适用于JS和CSS）的Modernizr部分之外别无其他解决方案。 AngularJS ngCsp的经验可能在这里很有用。

Answer 2

我找到了一个修复，而不必使用unsafe-inline。

您可以在一行修改未经过最小化的Modernizr：

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

转换为

fakeBody = document.createElement('body');

适用于IE9，Firefox和Chrome。

Modernizr导致内容安全策略（CSP）违规错误

2 个答案: