Vue SSR中为内嵌打包脚本添加Nonce（启用严格CSP）

核心问题梳理 #

你的现有CSP配置存在3个关键问题：

• https:// 与 'strict-dynamic' 冲突，严格CSP模式下指定主机白名单会直接失效strict-dynamic的信任链机制
• 固定nonce值完全丧失了nonce的安全属性，必须每次请求生成唯一随机值
• 无法直接编辑HTML脚本标签的情况下，需依赖SSR框架自动完成nonce的注入与关联

具体修复步骤 #

1. 调整CSP配置 #

移除冗余规则，改用动态生成的nonce，标准配置如下：

script-src 'nonce-${每次请求生成的随机值}' 'strict-dynamic';
object-src 'none';
base-uri 'none';

说明：'unsafe-inline' 在存在有效nonce或strict-dynamic时会被浏览器自动忽略，无需保留

2. 通过SSR框架自动注入Nonce #

因为无法直接编辑HTML脚本标签，需在服务端渲染逻辑中做以下处理：

• 每次请求生成唯一随机nonce：用加密模块生成至少16字节的随机字符串，转成base64格式
• 将生成的nonce写入CSP响应头
• 在服务端渲染HTML时，自动为所有核心脚本标签添加 nonce="${nonce}" 属性
  • 原生Vue SSR可在entry-server.js中通过context传递nonce，在根模板中全局引用
  • 若使用Nuxt等上层框架，可通过serverMiddleware或nuxt.config.js中的hooks实现nonce的生成与注入

3. 动态脚本信任机制 #

'strict-dynamic' 会自动信任由已授权脚本（带正确nonce的主脚本）加载的所有后续脚本，包括Vue的异步组件、第三方动态脚本等，无需额外配置

验证要点 #

• 查看浏览器控制台的CSP报错，定位被拦截的具体脚本
• 检查响应头中的CSP是否包含正确的随机nonce值
• 查看渲染后的HTML，确认主脚本标签带有与CSP匹配的nonce属性

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