Nuxt网站添加addMeta:true后触发CSP脚本加载拒绝错误求助

错误根源 #

1. 脚本哈希未被允许：被拦截的脚本对应的哈希值sha256-pbUsaX0N1YAAThWC12JxlsJzrk+Kb8u0nzG7RegV+Tw=不在你当前script-src的允许列表里。加上开启addMeta:true后，Nuxt生成的meta标签CSP可能没正确包含script-src-elem指令，浏览器只能回退使用script-src的规则，直接拦截了未授权的脚本。
2. Meta标签CSP的局限性：
   • 如果你同时通过HTTP头和meta标签设置CSP，浏览器会自动取更严格的规则执行；
   • Meta标签本身不支持部分CSP指令（比如你配置里的frame-ancestors 'none'），且Nuxt在生成meta标签时可能无法完整同步所有自定义指令，导致script-src-elem这类拆分指令失效。

是否保留Meta标签？ #

不建议保留meta标签形式的CSP配置：

• Meta标签不支持frame-ancestors、report-uri等关键指令，与你当前的配置需求冲突；
• 相比HTTP头配置，meta标签的CSP兼容性更差，且容易和HTTP头规则产生冲突，增加调试难度；
• Nuxt官方更推荐通过服务器配置（如Nginx、Apache）或Nuxt的serverMiddleware来设置HTTP头形式的CSP，能确保所有指令正常生效。

如果非要用meta标签，需做两处调整：

• 在script-src中添加错误提示里的哈希值：'sha256-pbUsaX0N1YAAThWC12JxlsJzrk+Kb8u0nzG7RegV+Tw='；
• 确认Nuxt生成的meta标签完整包含script-src-elem指令，避免浏览器回退到严格的script-src兜底规则。

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