CSP - 允许来自给定目录的我自己的脚本

Question

我已经阅读了几篇关于为网站实施 Content-Security-Policy 的文章，但我仍然无法弄清楚如何为我的网站正确地将它们组合在一起。很抱歉，如果有关于此的另一个线程，但到目前为止我还没有找到可以帮助我解决我的情况的线程。

我有普通的 HTML 文件，我使用自己的 JavaScript 根据用户的输入在 HTML canvas 上做一些渲染。

我在 "js" 目录中有 .js 文件。目前我运行我的网站在 sub-directory，所以我使用相对路径而不是绝对路径来包含它们：

<script type="text/javascript" src="js/wbsc-eval.js"></script>
<script type="text/javascript" src="js/wbsc-global.js"></script>
<script type="text/javascript" src="js/wbsc-input.js"></script>
<script type="text/javascript" src="js/wbsc-output.js"></script>

这是我的 CSP header:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; child-src 'none'; object-src 'none'; style-src 'self' https://stackpath.bootstrapcdn.com; script-src 'self';">

它允许我自己的 CSS + Bootstrap 一个，但是我的 JS 被阻止了：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

据我所读，我认为 script-src 'self' 应该允许来自同一站点的脚本，但显然不允许。

我还尝试设置一个明确的 URL，我的网站当前托管在该位置，但我认为这不是正确的方法，因为它应该是可移植的 + 它似乎不起作用无论如何。

有没有一些简单直接的方法可以做到这一点？允许一组明确的我自己的脚本并禁止其他一切？

添加 'unsafe-inline' 有效，但我听说这很像根本没有 CSP，而且我还遇到了一些我的脚本中仍然不允许执行的 JS 操作。我想我每次都可以计算我的 JS 的 SHA 哈希并将其传递给 HTML header。但是我在开发过程中不断地修改脚本，所以看起来不是很方便。最后 - 如果有一些简单的动态创建随机数的机制，我可能会考虑使用它。但就我的目的而言，我认为我不需要一些健壮的框架，我用一个 HTML + 几个 JS 文件就可以了...

Answer 1

错误消息说：

Refused to execute inline event handler

所以问题与您正在加载的 <script> 元素无关（至少没有直接关系）。

某处你有类似的东西：

<button onclick="call_a_function()">

这是一个内联事件处理程序。

替换为addEventListener

Answer 2

您的脚本工作正常问题是 script-src: 'self' 阻止内联脚本执行，即内联脚本 <script>alert(1)</script> 和内联事件处理程序 <img onerror="alert(1)" />。

您可以在支持的浏览器中使用 CSP 3 script-src-attr 指令，但使用 el.addEventListener 或 el.onevent 附加事件侦听器会更容易（也更好），正如 Quentin 在其他答案。如果你不能因为它是一些第三方代码，那么使用内联事件处理程序的一个设置属性可能使用 hash 比 nonce 更容易，如果你不介意在较新的版本上手动更新它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Security-Policy" content="script-src-attr 'unsafe-hashes' 'sha256-bhHHL3z2vDgxUt0W3dWQOrprscmda2Y5pLsLg4GF+pI='">
</head>
<body>
  <img src="" onerror="alert(1)" alt="">
  <img src="" onerror="alert(2)" alt="">
</body>
</html>

如果 unsafe-hashes 是 supported，此示例也适用于 script-src。

另请查看 Content Security Policy Cheat Sheet and this pretty nice slides 了解更多详情。

CSP - 允许来自给定目录的我自己的脚本

CSP - allowing my own scripts from given directory

html

javascript

security

http

content-security-policy