ROYWANG
Back

解决 Umami 统计脚本被拦截广告插件拦截

By ROYWANG • 四月 25, 2022 • NOTE

使用外挂 JS 的方式来统计数据，虽然可以统计真实的访客记录，但是会被 uBlock 此类的广告拦截插件给直接拦截掉，以至于无法准确的获取访客数据。

简单了解了下此类插件的拦截策略，是通过检测脚本文件名进行的。可以通过修改 JS 文件名来进行防止统计信息脚本被拦截。

方法一（推荐）

官方在 1.26.0 版本上增加了 TRACKER_SCRIPT_NAME 这个环境变量来提供修改统计脚本的操作，这也是本站现在使用的方法。

但是此环境变量中的值，有些情况会失效，更换即可，原因未知。

打开目录中的 .env 文件，添加以下文本：

1
TRACKER_SCRIPT_NAME=自定义名称

img

输入完成后保存即可。

重启服务，修改网站链接中的脚本地址

img重启UMAMI服务

img访问网址，修改已生效

使用 CloudFlare Workers修改名称

这个方法是以为大佬在项目讨论区分享的，也试了以下，效果一致。

新建CloudFlare Workers

左侧选择 Workers，然后创建服务

img

选择启动器，然后创建服务

服务名称自定义，启动器选择 HTTP 处理程序。

img

然后点击快速编辑，并将以下信息 修改输入 并 保存。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const ScriptName = '/umami.js';     //自定义脚本名称
const Endpoint = '/foo/bar';
const UmamiUrl = 'https://bcon.roywang.cn';  //UMAMI服务域名地址。
const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
    'Access-Control-Max-Age': '86400',
};
const ScriptWithoutExtension = ScriptName.replace('.js', '')
addEventListener('fetch', event => {
    event.passThroughOnException();
    event.respondWith(handleRequest(event));
})
async function handleRequest(event) {
    const pathname = new URL(event.request.url).pathname
    const [baseUri, ...extensions] = pathname.split('.')
    const clientIP = event.request.headers.get("CF-Connecting-IP")
    if (baseUri.endsWith(ScriptWithoutExtension)) {
        return getScript(event, extensions)
    } else if (pathname.endsWith(Endpoint)) {
        return postData(event)
    }
    return new Response(null, {status: 404})
}
async function getScript(event, extensions) {
    let response = await caches.default.match(event.request);
    if (!response) {
        response = await fetch(UmamiUrl +"/umami.js");
        var js = await response.text();
        js = js.replace("/api/collect", Endpoint);
        response = new Response(js, {
            headers: {
                ...response.headers,
                ...corsHeaders,
                'Access-Control-Allow-Headers': response.headers.get('Access-Control-Request-Headers'),
            },
        })
        event.waitUntil(caches.default.put(event.request, response.clone()));
    }
    return response;
}
async function postData(event) {
    const request = new Request(event.request);
    request.headers.delete('cookie');
    response = await fetch(UmamiUrl +"/api/collect", request);
    var js = await response.text();
    response = new Response(js, {
        headers: {
            ...response.headers,
            ...corsHeaders,
            'Access-Control-Allow-Headers': request.headers.get('Access-Control-Request-Headers'),
        },
    });
    return response;
}

img

文件名称修改成功。

CloudFlare Workers 绑定自定义域名

域名需要 NS 接入CloudFlare，增加解析 至 8.8.8.8，并且打开 CloudFlare 代理

img

在左侧选择 Workers，并选择添加路由。

img输入路由，以及选择服务、环境。

此处有个误区，路由在域名后面需要添加 /* 很多用户在使用时都会犯这个错误。

img

修改网站中的脚本地址。

img

第一种方法最简单，也最推荐，当然如果服务的线路非常差，比CloudFlare 还差的话，推荐使用第二种方法。

如后续还被屏蔽，只需重新修改脚本名称即可。

许可协议

本文由 ROYWANG 原创，采用 CC BY-NC-SA 4.0 协议。转载请注明出处。

PERMALINK

https://roy.wang/umami-js-name/

Previous Post UptimeKuma - 自建网站状态监控服务 Next Post NSFW API - 开源的图片鉴黄API

Comments

目录

  1. 方法一（推荐）
    1. 打开目录中的 .env 文件，添加以下文本：
    2. 重启服务，修改网站链接中的脚本地址
  2. 使用 CloudFlare Workers修改名称
    1. 新建CloudFlare Workers
    2. 选择启动器，然后创建服务
    3. 然后点击快速编辑，并将以下信息 修改输入 并 保存。
    4. CloudFlare Workers 绑定自定义域名

搜索