如何外部化SvelteKit默认内联脚本以解决CSP与第三方库冲突？

问题背景 #

使用静态适配器构建的SvelteKit项目，生成的index.html会包含一段内联启动脚本：

<script>
    {
        __sveltekit_yhu4zf = {
            base: new URL(".", location).pathname.slice(0, -1)
        };

        const element = document.currentScript.parentElement;

        const data = [null,null];

        Promise.all([
            import("./_app/immutable/entry/start.CRoheQks.js"),
            import("./_app/immutable/entry/app.0VxaVNPP.js")
        ]).then(([kit, app]) => {
            kit.start(app, element, {
                node_ids: [0, 3],
                data,
                form: null,
                error: null
            });
        });
    }
</script>

SvelteKit会自动为这段脚本生成SHA哈希并添加到CSP的script-src规则中。但第三方库Profitwell Retain要求script-src添加'unsafe-inline'，而根据CSP规则：若源列表中存在哈希或随机数，'unsafe-inline'会被忽略，这直接导致第三方库无法正常工作。目前官方暂未提供外部化这段内联脚本的选项，且未自定义script-src时，SvelteKit会自动生成相关规则。

可行解决办法 #

不需要完全移除CSP，以下是几种可行方案：

• 用nonce替代哈希：
  给内联脚本添加nonce属性，同时在CSP中指定该nonce值，这样'unsafe-inline'和nonce可以共存。静态部署场景下可以使用固定nonce（安全性略有降低，但远胜完全移除CSP）：
  1. 修改构建后的index.html，给内联脚本加上nonce="自定义固定值"
  2. 在CSP的script-src中设置'nonce-自定义固定值' 'unsafe-inline'，即可同时兼容SvelteKit的内联脚本和第三方库。
• 手动移除自动生成的SHA哈希：
  构建完成后，手动修改CSP头部（或meta标签中的CSP规则），删掉SvelteKit自动添加的SHA哈希条目，只保留'unsafe-inline'和其他必要的脚本源。缺点是每次构建后都要重复操作，适合小型项目临时用。
• 借助边缘函数自定义CSP：
  如果部署平台支持边缘函数（比如Cloudflare Workers、Netlify Functions），可以通过SvelteKit的handle钩子动态修改CSP，移除自动添加的SHA哈希：

  export async function handle({ event, resolve }) {
    const response = await resolve(event);
    const csp = response.headers.get('Content-Security-Policy');
    if (csp) {
      // 清除所有SHA256哈希条目
      const updatedCsp = csp.replace(/'sha256-[a-zA-Z0-9+/]+' /g, '');
      response.headers.set('Content-Security-Policy', updatedCsp);
    }
    return response;
  }
  

  这样既能保留'unsafe-inline'，又能兼容SvelteKit的内联脚本。

关于第三方库要求'unsafe-inline'的疑问 #

• 技术原因：
  多数第三方库要求'unsafe-inline'，是因为它们的代码依赖内联执行逻辑——比如动态生成脚本内容、使用内联事件处理函数，或者需要直接注入内联JSON数据；还有些库没适配现代CSP规则，依然沿用传统的内联加载方式。
• 原则上能否避免：
  完全可以。合规的第三方库应该支持用nonce或哈希替代'unsafe-inline'——比如允许用户配置nonce参数，或者把内联脚本提取为外部文件，让用户预计算哈希添加到CSP中。你可以联系库方询问是否有CSP兼容的集成方案；如果暂时没有，只能用'unsafe-inline'，但可以通过严格限制script-src中的其他域名来降低安全风险。

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