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

【问题标题】：CSP - allowing my own scripts from given directoryCSP - 允许来自给定目录的我自己的脚本
【发布时间】：2020-06-14 14:19:43
【问题描述】：

我已经阅读了几篇关于为网站实施 Content-Security-Policy 的文章，但我仍然不知道如何为我的网站正确地组合在一起。抱歉，如果还有其他关于此的帖子，但到目前为止我还没有找到可以帮助我解决问题的帖子。

我有纯 HTML 文件，我使用自己的 JavaScript 根据用户的输入在 HTML 画布上进行一些渲染。

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

<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 标头：

<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 标头。但是我在开发过程中不断地更改脚本，所以看起来不是很方便。最后 - 如果有一些简单的机制可以动态创建随机数，我可能会考虑使用它。但就我的目的而言，我认为我不需要一些强大的框架，我对一个 HTML + 几个 JS 文件做得很好......

【问题讨论】：

标签： javascript html http security content-security-policy

【解决方案1】：

您的脚本运行良好，问题是 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 和pretty nice slides 了解更多详情。

【讨论】：

【解决方案2】：

错误信息说：

拒绝执行内联事件处理程序

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

某处你有类似的东西：

<button onclick="call_a_function()">

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

将其替换为addEventListener

【讨论】：

非常感谢您的简单解释。我赞成 Isidoro 的答案，因为它对可能的未来读者来说更复杂，但你也明白了。