如何用Cloudflare Workers绕过广告拦截获取FingerprintJS visitorId

uBlock Origin内置的拦截规则默认屏蔽fpcdn.io域名的所有请求，你代码里动态导入FingerprintJS脚本的请求直接被插件拦截，才会抛出Failed to fetch dynamically imported module的错误。通过Cloudflare Worker做反向代理，把脚本拉取、指纹上报的请求全部转发到自有域名下，就能绕开基于域名的静态拦截规则。

1. 替换Worker代码 #

把你当前的Hello World示例代码全量替换为以下内容，代码会自动处理脚本代理、接口转发、跨域兼容：

const FP_SCRIPT_BASE = "https://fpcdn.io";
const FP_API_BASE = "https://api.fpjs.io";

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  let targetUrl;

  // 匹配/v3/开头路径为脚本拉取请求
  if (url.pathname.startsWith("/v3/")) {
    targetUrl = `${FP_SCRIPT_BASE}${url.pathname}${url.search}`;
  } 
  // 匹配根路径POST请求为指纹上报请求
  else if (url.pathname === "/" && request.method === "POST") {
    targetUrl = FP_API_BASE;
  } 
  // 非法路径直接返回404
  else {
    return new Response("Not Found", { status: 404 });
  }

  // 透传原请求的方法、请求头、请求体
  const proxyRequest = new Request(targetUrl, {
    method: request.method,
    headers: request.headers,
    body: !["GET", "HEAD"].includes(request.method) ? request.body : undefined,
    redirect: "follow"
  });

  // 给响应添加跨域头，允许前端跨域调用
  const upstreamResp = await fetch(proxyRequest);
  const respHeaders = new Headers(upstreamResp.headers);
  respHeaders.set("Access-Control-Allow-Origin", "*");
  respHeaders.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  respHeaders.set("Access-Control-Allow-Headers", "*");

  // 处理浏览器跨域预检请求
  if (request.method === "OPTIONS") {
    return new Response(null, {
      status: 204,
      headers: respHeaders
    });
  }

  return new Response(upstreamResp.body, {
    status: upstreamResp.status,
    statusText: upstreamResp.statusText,
    headers: respHeaders
  });
}

2. 部署并获取访问地址 #

• 替换完成后点击部署按钮，等待部署生效，平台会分配一个xxx.workers.dev格式的默认访问域名
• 建议绑定自己的自定义域名到Worker，避免后续workers.dev二级域名被拦截规则收录
• 绑定自定义域名时注意不要和现有业务的路由规则冲突

3. 修改前端初始化代码 #

把原来引用官方域名的部分全部替换为你的Worker地址，参考代码如下：

<script>
  // 替换为你自己的Worker访问地址，末尾不要带斜杠
  const PROXY_DOMAIN = "https://你的Worker访问域名";
  // 替换为你自己的FingerprintJS公钥
  const FP_PUBLIC_KEY = "your-public-api-key";

  // 从自有域名动态导入脚本
  const fpPromise = import(`${PROXY_DOMAIN}/v3/${FP_PUBLIC_KEY}`)
    .then(FingerprintJS => FingerprintJS.load({
      // 上报地址也指向自有Worker
      endpoint: PROXY_DOMAIN
    }));

  // 正常获取visitorId即可
  fpPromise
    .then(fp => fp.get())
    .then(result => console.log(result.visitorId));
</script>

• 保持uBlock Origin处于启用状态，清空缓存刷新页面
• 检查控制台，原有的模块拉取失败报错消失
• 网络面板中所有FingerprintJS相关请求的目标地址都是你的自有域名，无fpcdn.io的请求发出
• 控制台正常输出visitorId即为配置成功

• 该方案仅能绕过基于域名匹配的静态拦截，若后续拦截规则升级为脚本内容特征识别，需要额外做脚本内容混淆处理
• Cloudflare Worker免费额度可覆盖中小站点的访问量，流量规模较大时需按需升级套餐
• 使用指纹采集能力需符合所在地区的隐私合规要求，不得违规收集用户信息

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