使用没有服务器端渲染 (cookie) 的 CSP 随机数答案

【问题标题】：Use CSP nonce without server side rendering (cookie)使用没有服务器端渲染 (cookie) 的 CSP 随机数
【发布时间】：2020-01-02 01:03:58
【问题描述】：

在构建具有分离的前端和后端（无服务器端呈现）的 Web 应用程序时I still want to make use of CSP nonce。通常 CSP 头和 html 应该包含相同的 nonce，这对 SSR 没有问题，但似乎没有 SSR 是不可能的。

现在我想到了一种不使用 SSR 来利用 nonce 的不同方法：

服务器：除了发送带有 CSP 标头的随机数之外，还将它作为 cookie 发送（仍然为每个请求更改！）This also seems to be a common approach for CSRF
UI：而不是直接在 html 中包含需要随机数的 <script>，而是从我自己的脚本中动态加载它：

const script = document.createElement('script')
script.setAttribute('src', 'https://example.com')
script.setAttribute('data-csp-nonce', getCspNonceFromCookie())
document.head.appendChild(script);

这是解决此问题的有效方法吗？是否存在安全问题？

【问题讨论】：

标签： javascript cookies content-security-policy nonce

【解决方案1】：

您的解决方案有效。我的一个项目以类似的方式进行。但是你应该设置一个nonce 属性而不是data-csp-nonce。

script.setAttribute('nonce', 'THE-GENERATED-NONCE')

所以脚本标签看起来像：

<script nonce="jETnT70lr0T3Hw4b5WeCjuJ421a3kcBl">
    // ...
</script>

仅当服务器发送的标头已包含拒绝外部脚本的content-security-policy 时，这才是安全的。例如：

content-security-policy: default-src 'self'; script-src 'self' 'nonce-jETnT70lr0T3Hw4b5WeCjuJ421a3kcBl'; img-src 'self' data:; object-src 'none'

【讨论】：

不是生成nonce“服务器端渲染”吗？您正在在每次加载时发送不同的随机生成的随机数，对吧？
没错。对于每个请求，都应该生成一个新的 nonce。
我很惊讶它的工作原理。我不认为你可以在渲染后发送 CSP 随机数
它存储在 cookie 中（或作为元标记）。因此，您自己的脚本可以从那里获取 nonce 并注入 nonced <script nonce="..."> 标签。
我的问题是：攻击者是否可以像你一样使用同一个 cookie 来注入他自己的脚本？