内容安全策略“拒绝执行内联事件处理程序”错误

Question

我试图通过设置 Content-Security-Policy 标头来减轻 XSS 攻击，但 Chrome 不断抛出错误：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' 'nonce-Njg3MGUxNzkyMjViNDZkN2I3YTM3MDAzY2M0MjUxZGEzZmFhNDU0OGZjNDExMWU5OTVmMmMwMTg4OQ3ZmY.” 启用内联执行需要“unsafe-inline”关键字、散列（“sha256-...”）或随机数（“nonce-...”）。

我尝试设置 nonce，<script nonce="Njg3MGUxNzkyMjViNDZkN2I3YTM3MDAzY2M0MjUxZGEzZmFhNDU0OGZjNDExMWU5OTVmMmMwMTg4NTA3ZmY4OQ==" href="main.js"></script>但它不起作用。

这是我的Content-Security-Policy标题：

default-src 'none'; 
script-src 'self' 'nonce-NjJjN2E5YjA0ZDJhNDlhZjlhMDFmZjQzMjE4YzhmMTAzOWNjZjVjMGZjNDIxMWU5YWIyNGMwMTg4NTA3ZmY4OQ=='; 
connect-src 'self' https://vimeo.com; 
img-src 'self'; 
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
font-src 'self' https://fonts.gstatic.com; 
media-src 'self' http://player.vimeo.com; 
frame-src 'self' http://player.vimeo.com;

我不喜欢设置script-srcas unsafe-inline，因为它使 Content-Security-Policy 无效

Answer 1

这个错误也可能是由内联样式（html文件里面的样式<style> </style>）引起的。我遇到了这个问题，删除内联样式解决了问题。

Angular 用户可以通过将每个配置的“inlineCritical”设置为 false 来解决此问题（更多详细信息请参见 此处）。

例子：

"configurations": {
 "production": {
   "optimization": {
     "scripts": true,
     "styles": {
       "minify": true,
       "inlineCritical": false
     },
     "fonts": false
    }
  }
}

Answer 2

您的 CSP 正在阻止您的 HTML 代码中的内联事件处理程序，例如<button onclick="myFunction()">Click me</button>.

内联事件处理程序是不好的做法（主要是因为它们是内联的）。请参阅此答案以获取见解。

不过，Nonce似乎不适用于内联事件处理程序。所以最好的办法是用你的 JS 文件中编写的适当的事件处理程序替换这个事件处理程序。如果您不能这样做，请尝试将“不安全哈希”添加到您的script-src.

感谢拒绝'unsafe-inline'，这是我们经常看到的捷径，包括在生产中。