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



我已经阅读了几篇关于为网站实施内容安全策略的文章,但我仍然无法弄清楚如何为我的网站正确组合它们。抱歉,如果还有其他关于此的线程,但到目前为止,我还没有找到可以帮助我解决我的情况的线程。

我有纯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>

这是我的云解决方案提供商标头:

<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 + 引导程序,但我的 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 文件上做得很好......

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

您可以在支持的浏览器中使用 CSP 3 script-src-attr 指令,但正如 Quentin 在另一个答案中所说,使用el.addEventListenerel.onevent附加事件侦听器会更容易(更好(。如果您不能,因为它是一些第三方代码,使用内联事件处理程序设置属性,那么如果您不介意在较新版本上手动更新它,那么使用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,此示例也适用于script-src

另请查看内容安全策略备忘单和这张漂亮的幻灯片以获取更多详细信息。

错误消息说:

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

因此,该问题与您正在加载的<script>元素无关(至少没有直接关系(。

在某处,您有类似的东西:

<button onclick="call_a_function()">

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

将其替换为addEventListener

最新更新