Modernizr导致内容安全策略（CSP）违规错误 [英] Modernizr Causes Content Security Policy (CSP) Violation Errors

问题描述

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

I am attempting to use the new Content Security Policy (CSP) HTTP headers on a test site. When I use CSP in conjunction with Modernizr I get CSP violation errors. This is the CSP policy I am using:

Content-Security-Policy： default-src'self' ; script-src'self'
ajax.googleapis.com ajax.aspnetcdn.com; style-src'self'; img-src
'self'; font-src'self'; report-uri /WebResource.axd?cspReport=true

Content-Security-Policy: default-src 'self'; script-src 'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src 'self'; img-src 'self'; font-src 'self'; report-uri /WebResource.axd?cspReport=true

这些是来自Chrome浏览器控制台的错误：

These are the errors from the Chrome browser console:

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网站上发现了以下解决方法。但是，解决方法是在3月份首次提出并做了一点Google-Fu，我找不到解决此问题的方法或解决方法。

I discovered the following workaround on the Github Modernizr site. However, the workaround was first put forward in March and doing a little Google-Fu I can find no fixes or workarounds to this issue.

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

I know that I can include the unsafe-inline directive which can get around this error but this also enables unsafe code to run and negates the use of CSP in the first place. Does anyone have any solutions?

更新 - 什么是CSP

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

CSP is a HTTP header supported by all major browsers (Including Edge). Essentially its a white list of content the browser is allowed to use to render the page. Find out more here or read Mozilla's documentation for CSP here and here.

更新 - 帮助突出显示CSP

CSP现已在所有浏览器（Edge增加了支持，耶！）以及它在网络安全方面的巨大飞跃。对于那些有兴趣获得更多第三方支持CSP的人，请看：

CSP is now available on all browsers (Edge added support, yay!) and its a gigantic leap forward in web security. For those interested in getting more third party support for CSP, see these:

1. Modernizr对CSP的支持


2. Visual Studio对CSP的支持。请注意，如果您启用了CSP，则浏览器链接不起作用，因为它使用内联JavaScript。


3. Visual Studio Web Essentials Extension对CSP的支持。 Web Essentials是一个Visual Studio插件，其功能通常最终出现在Visual Studio的下一个版本中。

1. Modernizr support for CSP
2. Visual Studio support for CSP. Note that browser link does not work if you have CSP enabled as it uses inline JavaScript.
3. Visual Studio Web Essentials Extension support for CSP. Web Essentials is a Visual Studio addin, whose features often end up in the next version of Visual Studio.

推荐答案

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

I suspect there's no other solution than to rewrite the parts of Modernizr that use inline code or dynamically evaluated code (which applies to both JS and CSS). The experiences of AngularJS ngCsp might be useful here.

这篇关于Modernizr导致内容安全策略（CSP）违规错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！