如何为React Compiler注入的脚本添加nonce？

问题背景 #

使用React Compiler时，它会自动注入如下内联脚本：

<script>
  $RC("B:1", "S:1")
</script>

当前配置的Content-Security-Policy启用了script-src 'strict-dynamic' 'nonce-${nonce}'，导致这些注入的脚本被浏览器拦截。使用unsafe-inline可以绕过拦截，但会破坏CSP的安全防护能力。

可行解决方案 #

1. 为React Compiler注入的脚本配置Nonce #

React Compiler支持通过配置传递nonce，让它生成的脚本标签自动带上nonce属性，匹配你的CSP规则。

• 如果是使用Next.js框架，在next.config.js中添加配置：

  module.exports = {
    reactCompiler: {
      nonce: process.env.NEXT_PUBLIC_CSP_NONCE,
    },
  };
  

• 如果是手动初始化React应用，在createRoot的选项中指定nonce：

  const root = createRoot(document.getElementById('root'), {
    nonce: 你的Nonce值,
  });
  root.render(<App />);
  

配置后，React Compiler注入的脚本会自动带上nonce属性，即可被CSP规则允许执行。

2. 使用CSP的unsafe-hashes替代unsafe-inline #

如果无法直接为React Compiler配置nonce，可以计算注入脚本的哈希值，将其加入CSP的script-src规则中：

1. 复制React Compiler注入的脚本完整内容（包括空格、引号等所有符号）。
2. 计算该内容的SHA-256哈希值（可通过命令行工具或在线哈希生成工具完成）。
3. 将哈希值添加到CSP配置：

   const createCspHeaderValue = (nonce: string) => {
     return [
       `default-src 'self'`,
       `script-src 'strict-dynamic' 'nonce-${nonce}' 'sha256-替换为你的脚本哈希值'`,
       `style-src 'self' 'unsafe-inline'`,
       `img-src 'self' data:`,
       `font-src 'self'`,
       `connect-src 'self'`,
       `frame-src 'self'`,
       `base-uri 'self'`,
       `object-src 'none'`,
       `frame-ancestors 'self'`,
       `media-src 'self'`,
     ].join('; ');
   };
   

注意：若React Compiler更新后修改了注入脚本的内容，需要重新计算并更新哈希值。

3. 验证strict-dynamic生效逻辑 #

strict-dynamic允许由可信脚本（即携带合法nonce的脚本）加载的后续脚本执行。如果React Compiler的脚本是由你的主应用脚本（已配置nonce）加载的，理论上无需额外配置；但如果是直接注入的内联脚本，仍需使用上述两种方法之一解决。

内容的提问来源于stack exchange，提问作者Lilou Artz