Shopify 主题里加 CSP 为什么总被应用脚本冲破

现象#

在 theme.liquid 加了 CSP meta 后，Console 连续报 Refused to load the script，评论、像素和支付按钮同时失效。

原因#

• 主题只能写 meta，无法设置响应头，frame-ancestors 与 report-uri 不生效
• 应用注入的是 inline script，没有 nonce，主题也无法为它生成 nonce
• 脚本域名会随应用增减而变化，静态白名单很快就会过时
• 结账页由 Shopify 控制，商家改不了它的 CSP，只能管前台主题

处理步骤#

1. 先在 Network 里按域名列出所有 script、connect 与 img 请求，区分 Shopify 与应用来源
2. 用宽松策略起步：script-src 'self' 'unsafe-inline' https:，确认功能正常
3. 逐项收紧到具体域名，保留 connect-src 给分析接口，避免像素静默失败
4. 把必须内联的脚本抽成外部文件，或用 hash 固定内容
5. 需要响应头级 CSP 时迁到 Hydrogen，在 entry.server.js 里设置 header

验收标准#

Console 无 CSP 拒绝记录，Security 面板能看到策略，评论与像素功能正常，结账页不受影响。