如何在Content-Security-Policy中阻止允许域名下的追踪脚本？

我来给你几个针对性的解决方案，都是适配静态网站且能和jQuery这类库兼容的：

1. 精细化配置Content-Security-Policy（CSP） #

你之前用default-src把权限开得太宽了，这才让第三方追踪脚本有机可乘。我们可以拆分CSP的各个指令，只给必要的资源授权，直接阻断追踪域名的请求：

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://code.jquery.com; # 替换成你实际用的jQuery源
  media-src 'self' https://streamable.com;
  img-src 'self' https://streamable.com data:;
  frame-src https://streamable.com;
  connect-src 'self';

关键说明： #

• connect-src 'self' 直接禁止了向外部域名发起的网络请求，quantserve和GA的追踪脚本需要发送数据到它们的服务器，这一步就能把这些请求拦下来。
• script-src 只允许自身域名、必要的内联脚本（如果用了jQuery的事件绑定之类的）和你实际使用的jQuery CDN，完全不给追踪脚本执行的权限。
• frame-src 和 media-src 专门给Streamable的视频嵌入和媒体资源开绿灯，其他资源类型都严格限制在自身域名内。

2. 给第三方iframe添加Sandbox属性 #

如果不想改服务器的CSP配置，也可以直接在嵌入Streamable的iframe上加上sandbox属性，限制iframe的权限：

<iframe src="https://streamable.com/你的视频ID" 
        sandbox="allow-same-origin allow-scripts allow-media"
        width="640" height="360" frameborder="0"></iframe>

关键说明： #

• sandbox 属性默认会禁用iframe里的所有脚本、跨域请求、弹窗等权限，我们只开启必要的：
  • allow-same-origin：让iframe能加载Streamable自身的资源（比如视频文件）
  • allow-scripts：如果Streamable的视频需要内部脚本控制播放（比如暂停/播放按钮），就加上这个
  • allow-media：允许iframe播放音频/视频
• 这样iframe里的追踪脚本既没法执行，也没法向外部发送数据，完美阻断追踪。

3. 客户端请求拦截（结合jQuery/原生JS） #

如果上面两种方案都没法满足你的需求，还可以在客户端直接拦截追踪请求，适合完全不想碰服务器配置的场景：

拦截jQuery AJAX请求 #

$(document).ajaxSend(function(event, jqxhr, settings) {
  // 定义要拦截的追踪域名
  const blockedDomains = ['quantserve.com', 'google-analytics.com'];
  const isBlocked = blockedDomains.some(domain => settings.url.includes(domain));
  if (isBlocked) {
    jqxhr.abort(); // 终止请求
    console.log(`已拦截追踪请求：${settings.url}`);
  }
});

拦截原生Fetch请求 #

const originalFetch = window.fetch;
window.fetch = function(resource, options) {
  const url = typeof resource === 'string' ? resource : resource.url;
  const blockedDomains = ['quantserve.com', 'google-analytics.com'];
  const isBlocked = blockedDomains.some(domain => url.includes(domain));
  if (isBlocked) {
    console.log(`已拦截追踪Fetch请求：${url}`);
    return Promise.reject(new Error('追踪请求已被拦截'));
  }
  return originalFetch(resource, options);
};

拦截动态插入的追踪脚本 #

有些追踪脚本是通过动态创建<script>标签加载的，我们可以监听DOM变化来拦截：

document.addEventListener('DOMNodeInserted', function(event) {
  if (event.target.tagName === 'SCRIPT') {
    const src = event.target.src;
    const blockedDomains = ['quantserve.com', 'google-analytics.com'];
    const isBlocked = blockedDomains.some(domain => src.includes(domain));
    if (isBlocked) {
      event.target.remove(); // 删除追踪脚本标签
      console.log(`已拦截追踪脚本：${src}`);
    }
  }
});

方案优先级建议 #

优先用CSP配置+iframe沙箱的组合，这是最安全、最标准的解决方案；客户端拦截作为补充，适合临时应急或者无法修改服务器配置的场景。

内容的提问来源于stack exchange，提问作者Саша Черных