Firebase项目Content-Security-Policy配置：内联脚本执行问题咨询

针对你的CSP配置中script-src 'self'限制内联脚本执行的问题，以下是无需使用'unsafe-inline'的两种安全解决方案：

方案1：使用内联脚本哈希值 #

适合内容固定的内联脚本：

• 提取index.html中内联脚本的纯代码内容（去掉<script>标签）
• 计算该内容的SHA-256（或SHA-384/SHA-512）哈希值并转成Base64格式，可通过命令行生成：

  echo -n "你的内联脚本内容" | openssl dgst -sha256 -binary | base64
  

• 将生成的哈希值添加到CSP的script-src指令中，格式为'sha256-生成的哈希字符串'
• 示例修改后的script-src：

  script-src 'self' 'sha256-abcdefghijklmnopqrstuvwxyz1234567890=';
  

注意：内联脚本内容一旦修改，必须重新计算哈希值并更新CSP配置，否则会触发CSP错误。

方案2：使用Nonce随机值 #

适合动态生成页面的场景（需配合Firebase Cloud Functions实现动态渲染）：

• 每次请求页面时生成一个唯一的随机nonce值（例如用Node.js生成：crypto.randomBytes(16).toString('base64')）
• 在index.html的内联脚本标签中添加nonce属性，值为生成的随机值：

  <script nonce="生成的nonce值">
    // 你的内联脚本代码
  </script>
  

• 在CSP的script-src指令中添加对应nonce值，格式为'nonce-生成的nonce值'
• 示例修改后的script-src：

  script-src 'self' 'nonce-abcdefghijklmnopqrstuvwxyz123456=';
  

注意：nonce必须是每次请求唯一的随机值，绝对不能硬编码固定值，否则会丧失安全防护作用。

修改后的完整CSP示例（以哈希方案为例） #

default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self' 'sha256-你的哈希值';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

内容的提问来源于stack exchange，提问作者slhn.dev