Question

构建具有独立的前端和后端（无服务器端呈现）的I still want to make use of CSP nonce网络应用程序时。通常，CSP标头和html应包含相同的随机数，这对于SSR来说没有问题，但是如果没有SSR，似乎是不可能的。

现在，我想到了一种不用SSR即可使用随机数的不同方法：

服务器：除了发送带有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);

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

Answer 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'

使用不带服务器端呈现（Cookie）的CSP nonce

1 个答案: