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

Question

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

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

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

<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>handleCalendarPicker()</script>

你可以 foo.js 和

handleCalendarPicker()

里面然后你引用

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

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

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

然后你可以用上面的随机数标记允许的内联脚本块：

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

使用 CSPRNG 生成您的随机数，否则任何通过 XSS 注入脚本的攻击者只会使用您的静态随机数。这可以在每个页面请求上完成，也可以在每个用户会话上完成。

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

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

（请注意，上面的哈希不是来自您的代码。）

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

Trigger functions to be called, while using Content Security Policy in Chrome

javascript

events

inline

content-security-policy