在SvelteKit 2.4.1中结合Firebase 10.7.2配置CSP遇报错求解

你使用SvelteKit 2.4.1和Firebase 10.7.2时遇到的CSP报错，核心问题在于内联脚本缺少合法执行许可，且你的CSP配置未正确适配SvelteKit的自动nonce机制。

报错拆解 #

报错信息明确指出：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://*.firebaseapp.com https://apis.google.com 'nonce-zaZNxL4zo3NvTpFUxjH34Q=='". Either the 'unsafe-inline' keyword, a hash ('sha256-cE+QbSGwnArC663xa8uRYUjID4yrwUm6Dd3uaAgly0s='), or a nonce ('nonce-...') is required to enable inline execution.

可以看到SvelteKit已经自动生成了一个nonce值，但你的CSP配置里没有将nonce占位符加入script-src指令，导致Firebase初始化时插入的内联脚本无法通过CSP校验。

你的配置问题 #

当csp.mode设为auto时，SvelteKit会自动生成并注入nonce，但你需要在script-src中明确声明'nonce-{nonce}'占位符，才能让CSP规则与自动生成的nonce关联。你的现有配置遗漏了这一关键项。

修复方案 #

修改CSP配置，在script-src数组中添加'nonce-{nonce}'占位符：

csp: {
    mode: 'auto',
    directives: {
      "base-uri": ["'self'"],
      "default-src": ["'self'"],
      "script-src": [
        "'self'",
        "https://*.firebaseapp.com",
        "https://apis.google.com",
        "'nonce-{nonce}'", // SvelteKit会自动替换为实际生成的nonce值
      ],
      "connect-src": ["'self'", "https://*.firebaseio.com", "wss://*.firebaseio.com"],
      "img-src": ["'self'", "data:"],
      "style-src": ["'self'", "'unsafe-inline'"],
      "frame-src": ["https://*.firebaseapp.com"],
    }
  }

额外说明 #

• 若修改后仍报错，可将报错中给出的哈希值'sha256-cE+QbSGwnArC663xa8uRYUjID4yrwUm6Dd3uaAgly0s='加入script-src作为兜底，但优先使用nonce更安全——哈希值仅对特定内联脚本有效，脚本内容变化后会失效。
• 保持mode: 'auto'不变，这是SvelteKit自动管理nonce的前提。

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