如何基于域名白名单设置Cookie策略以拦截不受信任的第三方Cookie

完全可以实现，优先使用HTTP响应头配置，兼容性和可靠性远高于纯JS方案，两种方案可搭配使用覆盖所有场景。

方案1：Permissions-Policy响应头（首推） #

这是W3C标准的原生权限控制能力，直接在你自己站点的响应头中配置即可全局生效，所有第三方资源的Cookie设置行为都会被浏览器自动拦截，无需修改业务代码。
配置规则：

• 在你的站点所有HTML页面的响应头中添加如下字段，白名单按你的实际需求替换即可
  Permissions-Policy: cookie=("self" "https://trusted-cdn-1.com" "https://trusted-cdn-2.com")
• 参数说明：
  • "self"代表你自己的站点域名，默认允许设置Cookie
  • 后面的列表就是你信任的第三方域名，需要填写完整的源信息（包含协议、域名，非默认端口需要额外加端口），只有列表内的域名请求资源时可以设置Cookie
  • 未出现在列表内的所有第三方域名，不管是图片、脚本还是其他资源请求，响应中的Set-Cookie头都会被浏览器直接忽略
• 兼容性：Chrome 88+、Edge 88+、Firefox 115+、Safari 15.4+均支持，覆盖95%以上的全球用户

方案2：JS动态加载拦截（兼容旧浏览器补充方案） #

如果需要覆盖不支持Permissions-Policy的旧版本浏览器，可以通过JS动态加载图片的方式做前置拦截，不要直接在HTML中写死img标签的src属性。
核心逻辑：

• 提前维护一份信任域名白名单
• 所有图片通过JS动态创建加载，加载前校验图片域名是否在白名单内
• 非白名单域名的图片请求强制添加crossorigin="anonymous"属性，该属性会要求浏览器以匿名模式请求跨域资源，既不会发送当前站点的Cookie，也不会接收存储响应返回的Cookie
  示例代码：

// 自定义信任域名白名单
const TRUSTED_IMAGE_DOMAINS = ['imgur.com', 'your-trusted-host.com'];

function loadImage(imgUrl, parentNode) {
  const img = document.createElement('img');
  const urlInstance = new URL(imgUrl);
  // 统一移除前缀www.做匹配
  const pureDomain = urlInstance.hostname.replace(/^www\./, '');
  
  if (!TRUSTED_IMAGE_DOMAINS.includes(pureDomain)) {
    img.crossOrigin = 'anonymous';
  }
  img.src = imgUrl;
  parentNode.appendChild(img);
}

注意事项：

• 该方案仅对JS动态加载的图片生效，硬编码在HTML中的img标签不会触发拦截逻辑
• 部分未开启CORS配置的图片托管服务，添加crossorigin属性会导致图片加载失败，遇到这类站点时需要将其加入白名单
• 优先级低于Permissions-Policy，建议两种方案同时配置

其他注意点 #

• 不要尝试通过JS删除已设置的第三方Cookie，受同源策略限制，你没有权限操作其他域名下的Cookie，只能从请求阶段拦截
• 浏览器自带的第三方Cookie拦截策略不会和你的配置冲突，你的白名单配置优先级更高
• 如果你的站点使用了CDN或反向代理，需要确认代理层不会覆盖你设置的Permissions-Policy头

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