在没有服务器端渲染（cookie）的情况下使用 CSP 随机数

Question

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

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

服务器：除了用 CSP header 发送 nonce 外，还将它作为 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);

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

Answer 1

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

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

因此脚本标签如下所示：

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

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

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

在没有服务器端渲染（cookie）的情况下使用 CSP 随机数

Use CSP nonce without server side rendering (cookie)

javascript

cookies

content-security-policy

nonce