如何为@google/model-viewer配置CSP头，避免使用'unsafe-inline'？

可行方案 #

1. 使用Nonce（推荐） #

• 生成一个请求唯一的随机nonce值，格式为nonce-随机字符串
• 在CSP的style-src规则中添加该nonce：

  style_src 'self' 'nonce-你的随机字符串'
  

• 同时给引入model-viewer的script标签添加对应nonce属性：

  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js" nonce="你的随机字符串"></script>
  

  注意：nonce值必须在CSP头和script标签中完全一致，且每次请求都要重新生成，避免重复使用带来安全风险。

2. 使用哈希替代 #

• 从浏览器控制台的CSP报错信息中，提取model-viewer生成的内联样式内容，计算其SHA-256/SHA-384/SHA-512哈希值
• 在CSP的style-src中添加该哈希：

  style_src 'self' 'sha256-计算得到的哈希值'
  

  缺点：如果model-viewer版本更新导致内联样式变化，哈希值会失效，需要重新计算并更新CSP配置。

3. 提取内联样式到外部文件（进阶） #

• 下载model-viewer源码，从中提取所有生成内联样式的内容
• 将这些样式保存为独立的CSS文件，托管在自己的域名下
• 在页面中引入该外部CSS文件，此时CSP的style-src只需保留'self'：

  <link rel="stylesheet" href="/path/to/model-viewer-custom-styles.css">
  

  缺点：需要手动维护自定义样式文件，model-viewer更新时需同步更新样式内容。

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