javascript - 在 Chrome 中使用内容安全策略时触发要调用的函数

Question

我有兴趣使用 CSP ，但是如何触发函数被调用呢？

我有一个共享 .js 文件、一个长网页和一个短网页。 (实际上可以有任意数量的网页，但为了简洁起见，我将其保留在这里)每个页面都有自己的函数，在页面加载时调用。由于不允许内联脚本，JS 可以只监听“ready”事件，然后扫描一些 HTML 标记来知道应该使用哪个页面的功能。但是，等待“就绪”事件有一个限制，该限制适用于较长的页面

长网页的顶部是一个带有日历日期选择器的日期范围过滤器。

<input name="date"/>
<script src="shared.js"></script>
<script>handleCalendarPicker()</script>
.. lots of HTML to load
<script>coolStuff()</script>

这样，即使页面尚未加载完毕，日历选择器也几乎可以立即工作。

CSP 通常不允许内联脚本，但我仍然希望有一种方法可以在渲染某个元素时触发事件，甚至在触发 DOM 就绪事件之前。如何才能做到这一点。

我必须将计时器与 getElementById 一起使用吗？或者有没有办法在不允许通常被 CSP 阻止的任意 JS 的情况下触发事件？

Answer 1

有几种方法可以实现这一点。

我假设您允许 self 作为 script-src。

而不是拥有

<script>handleCalendarPicker()</script>

你可以使用 foo.js

handleCalendarPicker()

里面然后你引用

<script src="foo.js"></script>

另一种方法是使用“nonce”属性。示例改编自this article .

Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

然后您可以使用上述随机数标记允许的内联脚本 block :

<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
  handleCalendarPicker()
</script>

使用 CSPRNG 生成您的随机数，否则任何通过 XSS 注入(inject)脚本的攻击者都会简单地使用您的静态随机数。这可以在每个页面请求上完成，也可以在每个用户 session 上完成一次。

另一种方法是生成 handleCalendarPicker() 代码的 sha256 哈希值。然后只需将此哈希添加到 CSP:

Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

(请注意，上述哈希值并非来自您的代码。)