CSP nonce 实现是什么样的？答案

【问题标题】：What does the CSP nonce implementation look like?CSP nonce 实现是什么样的？
【发布时间】：2021-12-24 15:07:24
【问题描述】：

我最近一直在阅读 CSP 的资料，但我没有找到关于 nonce 将如何工作的清晰解释或可靠示例。出于安全考虑，我尽量避免使用unsafe-inline。

到目前为止，我的理解是这样的：

服务器会在每次连接时生成一个新的随机数客户端通过某种方式获取这个随机数并将这个字符串插入到每个脚本标签中

但是，我不知道客户端如何获得这个在每个连接中动态且唯一的值。 某种方式是什么样的？我应该实现一个额外的 API 来获取这个值吗？

我使用了 React.js，我的 HTML 头中有一个 Google Tag Manager snippet，如果有人能提供与这些相关的示例就完美了。

【问题讨论】：

标签： reactjs http-headers google-tag-manager content-security-policy nonce

【解决方案1】：

React 应用程序是一个 SPA（单页应用程序），因此使用 XMLHttpRequest() 加载内容并在不重新加载页面的情况下插入。因此，不使用'nonce-value'，因为您无法在每次页面刷新时生成一个新的“nonce”。

'nonce' 可以在 SSR（服务器端渲染）时使用，在这种情况下服务器可以生成新的'nonce' 值并将其插入到发送的 HTML 代码中（插入到<script nonce='value'>、<script src ='some_url' nonce='value'>、<style nonce='value'>和<link href='some_url' nonce='value' rel='stylesheet'>)。

因此，React 应用程序使用 'hash-value' 来允许内联脚本和样式。
例如react-static-plugin-csp-meta-tags 包将 CSP 元标记添加到您的 html 文件并为所有内联脚本和样式标记添加哈希。

【讨论】：

非常感谢。一个很好的答案，它真正回答了我对如何将动态值插入 React 构建的困惑。我的项目没有做SSR，所以我会用hash方式。
@grantly，我突然发现这篇文章，它说 CSP 只有在 React 中的 HTML 元标记才可行。不知道为什么从服务器端发送标头是不可能的？你对此有什么想法吗？ csplite.com/csp200
当然，您可以在发送初始 React 应用程序时发送任何 HTTP 标头，包括 CSP。