SvelteKit：社交媒体小部件内联脚本无法通过CSP校验

核心思路 #

只在目标页面动态加载第三方脚本，同时调整CSP规则允许必要的源和内联内容，避免全局加载和直接使用'unsafe-inline'

步骤1：在目标页面组件中动态加载社交脚本 #

利用SvelteKit的onMount和浏览器环境判断，只有用户进入该页面时才加载对应脚本，以下是Facebook/Instagram/Pinterest的示例：

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  onMount(async () => {
    if (!browser) return;

    // 加载Facebook SDK
    const fbScript = document.createElement('script');
    fbScript.src = 'https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v18.0&appId=你的APPID';
    fbScript.async = true;
    fbScript.defer = true;
    document.body.appendChild(fbScript);
    fbScript.onload = () => window.FB?.XFBML?.parse();

    // 加载Instagram嵌入脚本
    const igScript = document.createElement('script');
    igScript.src = 'https://www.instagram.com/embed.js';
    igScript.async = true;
    igScript.defer = true;
    document.body.appendChild(igScript);

    // 加载Pinterest脚本
    const pinScript = document.createElement('script');
    pinScript.src = 'https://assets.pinterest.com/js/pinit.js';
    pinScript.async = true;
    pinScript.defer = true;
    document.body.appendChild(pinScript);
    pinScript.onload = () => window?.PinUtils?.build();
  });
</script>

<!-- 对应社交小部件的HTML容器 -->
<div class="fb-page" data-href="你的FB页面URL" data-tabs="timeline" data-adapt-container-width="true"></div>
<iframe src="你的Instagram嵌入URL" width="320" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="你的Pinterest看板URL"></a>

步骤2：调整SvelteKit的CSP配置 #

在svelte.config.js中更新CSP指令，允许社交平台的脚本源、框架源，以及必要的内联内容：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  kit: {
    csp: {
      mode: 'auto',
      directives: {
        'script-src': [
          "'self'",
          // 允许社交平台的脚本域名
          'https://connect.facebook.net',
          'https://www.instagram.com',
          'https://assets.pinterest.com',
          // 若有必填内联脚本，生成SHA-256哈希后添加（替代'unsafe-inline'）
          "'sha256-你的内联脚本哈希值'"
        ],
        'frame-src': [
          "'self'",
          'https://www.facebook.com',
          'https://www.instagram.com',
          'https://assets.pinterest.com'
        ],
        'img-src': [
          "'self'",
          'https://*.facebook.com',
          'https://*.instagram.com',
          'https://*.pinterest.com',
          'data:' // 部分小部件可能需要加载data协议图片
        ],
        'style-src': [
          "'self'",
          "'unsafe-inline'" // 部分社交小部件依赖内联样式，也可替换为对应哈希
        ]
      }
    }
  }
});

关键细节 #

1. 哈希计算：如果社交小部件有强制内联的初始化脚本，将脚本内容复制到哈希生成工具（自行搜索在线SHA-256计算器）生成哈希，加到script-src中替代'unsafe-inline'。
2. Nonce替代方案：不想用哈希的话，可在hooks.server.js中生成随机nonce，传给页面组件后给动态脚本添加nonce属性，同时在CSP的script-src里加入'nonce-你的nonce值'，灵活性更高。
3. 测试用报告模式：先将CSP的mode设为'report-only'，运行网站查看控制台的CSP报告，确认需要调整的规则，避免直接生效导致页面异常。
4. 平台特定要求：每个社交平台的嵌入规则略有差异，比如Facebook需要APPID，Instagram支持脚本/iframe两种嵌入方式，建议参考官方嵌入文档确认具体配置。

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