dwt's life - 统计
https://dwt.life/tag/%E7%BB%9F%E8%AE%A1/
-
解决UMAMI统计脚本被广告拦截插件屏蔽的问题
https://dwt.life/archives/241/
2022-04-27T12:58:00+08:00
上一篇文章讲到了如何在本机环境和docker中去安装umami，这一篇讲一下如何防止umami脚本被屏蔽。默认的代码如下：<script async defer data-website-id="6b43b895-17fb-42d5-aacc-ef0841ca34c5" src="http://ip:3000/umami.js"></script>有两种方法，但是都需要修改umami的脚本名。第一种是通过反代、worker、修改配置实现，第二种是重新混淆js实现，殊途同归。通过umami配置文件修改脚本名该方法需要重启umami来使其生效在上一篇中创建的.env文件中增加一行TRACKER_SCRIPT_NAME=新脚本名称如果是docker的话，需要通过docker ps定位到容器，然后执行docker attach 容器ID进入并找到.env文件进行修改（实际可能并不能进入到终端），或者是创建的时候使用-v参数将volume映射一份到本地目录。修改完成后重启：pm2 restart umami重启后效果如下：但是dashboard中代码仍然显示的umami.js，我们换成自己定义的名称.js即可。原因在其umami/pages/_middleware.js代码中通过process.env.TRACKER_SCRIPT_NAME获取变量从而决定track脚本的名称：function customScriptName(req) {
const scriptName = process.env.TRACKER_SCRIPT_NAME;
if (scriptName) {
const url = req.nextUrl.clone();
const { pathname } = url;
const names = scriptName.split(',').map(name => (name + '.js').trim());
if (names.find(name => pathname.endsWith(name))) {
url.pathname = '/umami.js';
return NextResponse.rewrite(url);
}
}
}通过反向代理重命名脚本名称我们可以直接添加以下内容到伪静态location /myjs {
proxy_pass http://127.0.0.1:3000/umami.js;
}然后访问/myjs即可，同理上步。通过cloudflare worker进行http代理此处就不以cloudflare为例了，我们使用百度云加速：worker代码：const ScriptName = '/umami.js'; //自定义脚本名称
const Endpoint = '/foo/bar';
const UmamiUrl = 'https://uaxk.com'; //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;
}由于百度云加速的限制，暂时无法验证是否可以使用，但是可以参考另外一篇博文，里面做了cloudflare的worker演示。混淆js实现隐私防护屏蔽umami等统计对于国内的一些隐私防护插件可以根据umami等统计脚本的代码特征进行识别从而屏蔽。我们可以修改umami脚本后进行混淆，达到不被拦截的效果，当然，前提也是不要用很明显的二级、一级域名告诉别人这是统计用的。原来的统计代码：!function(){"use strict";var t=function(t,e,n){var a=t;return function(){for(var e=[],i=arguments.length;i--;)e[i]=arguments[i];return n.apply(null,e),a.apply(t,e)}},e=function(){var t=window.doNotTrack,e=window.navigator,n=window.external,a="msTrackingProtectionEnabled",i=t||e.doNotTrack||e.msDoNotTrack||n&&a in n&&n[a]();return"1"==i||"yes"===i};!function(n){var a=n.screen,i=a.width,r=a.height,o=n.navigator.language,c=n.location,s=c.hostname,u=c.pathname,l=c.search,d=n.localStorage,f=n.document,v=n.history,p=f.querySelector("script[data-website-id]");if(p){var m,g,h=p.getAttribute.bind(p),y=h("data-website-id"),w=h("data-host-url"),b="false"!==h("data-auto-track"),S=h("data-do-not-track"),k="false"!==h("data-css-events"),E=h("data-domains")||"",N=E.split(",").map((function(t){return t.trim()})),T=/^umami--([a-z]+)--([\w]+[\w-]*)$/,q="[class*='umami--']",A=function(){return d&&d.getItem("umami.disabled")||S&&e()||E&&!N.includes(s)},O=w?(m=w)&&m.length>1&&m.endsWith("/")?m.slice(0,-1):m:p.src.split("/").slice(0,-1).join("/"),j=i+"x"+r,L={},_=""+u+l,x=f.referrer,H=function(){return{website:y,hostname:s,screen:j,language:o,url:_}},R=function(t,e){return Object.keys(e).forEach((function(n){t[n]=e[n]})),t},J=function(t,e){A()||function(t,e,n){var a=new XMLHttpRequest;a.open("POST",t,!0),a.setRequestHeader("Content-Type","application/json"),g&&a.setRequestHeader("x-umami-cache",g),a.onreadystatechange=function(){4===a.readyState&&n(a.response)},a.send(JSON.stringify(e))}(O+"/api/collect",{type:t,payload:e},(function(t){return g=t}))},M=function(t,e,n){void 0===t&&(t=_),void 0===e&&(e=x),void 0===n&&(n=y),J("pageview",R(H(),{website:n,url:t,referrer:e}))},P=function(t,e,n,a){void 0===e&&(e="custom"),void 0===n&&(n=_),void 0===a&&(a=y),J("event",R(H(),{website:a,url:n,event_type:e,event_value:t}))},z=function(t){var e=t.querySelectorAll(q);Array.prototype.forEach.call(e,B)},B=function(t){(t.getAttribute("class")||"").split(" ").forEach((function(e){if(T.test(e)){var n=e.split("--"),a=n[1],i=n[2],r=L?L:L=function(){"A"===t.tagName?function(t,e){var n=H();n.event_type=e,n.event_value=t;var a=JSON.stringify({type:"event",payload:n});navigator.sendBeacon(O+"/api/collect",a)}(i,a):P(i,a)};t.addEventListener(a,r,!0)}}))},C=function(t,e,n){if(n){x=_;var a=n.toString();(_="http"===a.substring(0,4)?"/"+a.split("/").splice(3).join("/"):a)!==x&&M()}};if(!n.umami){var D=function(t){return P(t)};D.trackView=M,D.trackEvent=P,n.umami=D}if(b&&!A()){v.pushState=t(v,"pushState",C),v.replaceState=t(v,"replaceState",C);var I=function(){"complete"===f.readyState&&(M(),k&&(z(f),new MutationObserver((function(t){t.forEach((function(t){var e=t.target;B(e),z(e)}))})).observe(f,{childList:!0,subtree:!0})))};f.addEventListener("readystatechange",I,!0),I()}}}(window)}();整理一下：!(function () {
"use strict";
var t = function (t, e, n) {
var a = t;
return function () {
for (var e = [], i = arguments.length; i--; ) e[i] = arguments[i];
return n.apply(null, e), a.apply(t, e);
};
},
e = function () {
var t = window.doNotTrack,
e = window.navigator,
n = window.external,
a = "msTrackingProtectionEnabled",
i = t || e.doNotTrack || e.msDoNotTrack || (n && a in n && n[a]());
return "1" == i || "yes" === i;
};
!(function (n) {
var a = n.screen,
i = a.width,
r = a.height,
o = n.navigator.language,
c = n.location,
s = c.hostname,
u = c.pathname,
l = c.search,
d = n.localStorage,
f = n.document,
v = n.history,
p = f.querySelector("script[data-website-id]");
if (p) {
var m,
g,
h = p.getAttribute.bind(p),
y = h("data-website-id"),
w = h("data-host-url"),
b = "false" !== h("data-auto-track"),
S = h("data-do-not-track"),
k = "false" !== h("data-css-events"),
E = h("data-domains") || "",
N = E.split(",").map(function (t) {
return t.trim();
}),
T = /^umami--([a-z]+)--([\w]+[\w-]*)$/,
q = "[class*='umami--']",
A = function () {
return (
(d && d.getItem("umami.disabled")) ||
(S && e()) ||
(E && !N.includes(s))
);
},
O = w
? (m = w) && m.length > 1 && m.endsWith("/")
? m.slice(0, -1)
: m
: p.src.split("/").slice(0, -1).join("/"),
j = i + "x" + r,
L = {},
_ = "" + u + l,
x = f.referrer,
H = function () {
return { website: y, hostname: s, screen: j, language: o, url: _ };
},
R = function (t, e) {
return (
Object.keys(e).forEach(function (n) {
t[n] = e[n];
}),
t
);
},
J = function (t, e) {
A() ||
(function (t, e, n) {
var a = new XMLHttpRequest();
a.open("POST", t, !0),
a.setRequestHeader("Content-Type", "application/json"),
g && a.setRequestHeader("x-umami-cache", g),
(a.onreadystatechange = function () {
4 === a.readyState && n(a.response);
}),
a.send(JSON.stringify(e));
})(O + "/api/collect", { type: t, payload: e }, function (t) {
return (g = t);
});
},
M = function (t, e, n) {
void 0 === t && (t = _),
void 0 === e && (e = x),
void 0 === n && (n = y),
J("pageview", R(H(), { website: n, url: t, referrer: e }));
},
P = function (t, e, n, a) {
void 0 === e && (e = "custom"),
void 0 === n && (n = _),
void 0 === a && (a = y),
J(
"event",
R(H(), { website: a, url: n, event_type: e, event_value: t })
);
},
z = function (t) {
var e = t.querySelectorAll(q);
Array.prototype.forEach.call(e, B);
},
B = function (t) {
(t.getAttribute("class") || "").split(" ").forEach(function (e) {
if (T.test(e)) {
var n = e.split("--"),
a = n[1],
i = n[2],
r = L
? L
: (L = function () {
"A" === t.tagName
? (function (t, e) {
var n = H();
(n.event_type = e), (n.event_value = t);
var a = JSON.stringify({
type: "event",
payload: n
});
navigator.sendBeacon(O + "/api/collect", a);
})(i, a)
: P(i, a);
});
t.addEventListener(a, r, !0);
}
});
},
C = function (t, e, n) {
if (n) {
x = _;
var a = n.toString();
(_ =
"http" === a.substring(0, 4)
? "/" + a.split("/").splice(3).join("/")
: a) !== x && M();
}
};
if (!n.umami) {
var D = function (t) {
return P(t);
};
(D.trackView = M), (D.trackEvent = P), (n.umami = D);
}
if (b && !A()) {
(v.pushState = t(v, "pushState", C)),
(v.replaceState = t(v, "replaceState", C));
var I = function () {
"complete" === f.readyState &&
(M(),
k &&
(z(f),
new MutationObserver(function (t) {
t.forEach(function (t) {
var e = t.target;
B(e), z(e);
});
}).observe(f, { childList: !0, subtree: !0 })));
};
f.addEventListener("readystatechange", I, !0), I();
}
}
})(window);
})();我们可以看到，每次请求前都是O + '/api'进行的URL拼接，所以我们找到变量O的位置进行修改即可。O = w
? (m = w) && m.length > 1 && m.endsWith("/")
? m.slice(0, -1)
: m
: p.src.split("/").slice(0, -1).join("/"),我们将这里的O改成我们自己的umami域名，成了这样：!(function () {
"use strict";
var t = function (t, e, n) {
var a = t;
return function () {
for (var e = [], i = arguments.length; i--; ) e[i] = arguments[i];
return n.apply(null, e), a.apply(t, e);
};
},
e = function () {
var t = window.doNotTrack,
e = window.navigator,
n = window.external,
a = "msTrackingProtectionEnabled",
i = t || e.doNotTrack || e.msDoNotTrack || (n && a in n && n[a]());
return "1" == i || "yes" === i;
};
!(function (n) {
var a = n.screen,
i = a.width,
r = a.height,
o = n.navigator.language,
c = n.location,
s = c.hostname,
u = c.pathname,
l = c.search,
d = n.localStorage,
f = n.document,
v = n.history,
p = f.querySelector("script[data-website-id]");
if (p) {
var m,
g,
h = p.getAttribute.bind(p),
y = h("data-website-id"),
w = h("data-host-url"),
b = "false" !== h("data-auto-track"),
S = h("data-do-not-track"),
k = "false" !== h("data-css-events"),
E = h("data-domains") || "",
N = E.split(",").map(function (t) {
return t.trim();
}),
T = /^umami--([a-z]+)--([\w]+[\w-]*)$/,
q = "[class*='umami--']",
A = function () {
return (
(d && d.getItem("umami.disabled")) ||
(S && e()) ||
(E && !N.includes(s))
);
},
O = 'https://www.dwt.life',
j = i + "x" + r,
L = {},
_ = "" + u + l,
x = f.referrer,
H = function () {
return { website: y, hostname: s, screen: j, language: o, url: _ };
},
R = function (t, e) {
return (
Object.keys(e).forEach(function (n) {
t[n] = e[n];
}),
t
);
},
J = function (t, e) {
A() ||
(function (t, e, n) {
var a = new XMLHttpRequest();
a.open("POST", t, !0),
a.setRequestHeader("Content-Type", "application/json"),
g && a.setRequestHeader("x-umami-cache", g),
(a.onreadystatechange = function () {
4 === a.readyState && n(a.response);
}),
a.send(JSON.stringify(e));
})(O + "/api/collect", { type: t, payload: e }, function (t) {
return (g = t);
});
},
M = function (t, e, n) {
void 0 === t && (t = _),
void 0 === e && (e = x),
void 0 === n && (n = y),
J("pageview", R(H(), { website: n, url: t, referrer: e }));
},
P = function (t, e, n, a) {
void 0 === e && (e = "custom"),
void 0 === n && (n = _),
void 0 === a && (a = y),
J(
"event",
R(H(), { website: a, url: n, event_type: e, event_value: t })
);
},
z = function (t) {
var e = t.querySelectorAll(q);
Array.prototype.forEach.call(e, B);
},
B = function (t) {
(t.getAttribute("class") || "").split(" ").forEach(function (e) {
if (T.test(e)) {
var n = e.split("--"),
a = n[1],
i = n[2],
r = L
? L
: (L = function () {
"A" === t.tagName
? (function (t, e) {
var n = H();
(n.event_type = e), (n.event_value = t);
var a = JSON.stringify({
type: "event",
payload: n
});
navigator.sendBeacon(O + "/api/collect", a);
})(i, a)
: P(i, a);
});
t.addEventListener(a, r, !0);
}
});
},
C = function (t, e, n) {
if (n) {
x = _;
var a = n.toString();
(_ =
"http" === a.substring(0, 4)
? "/" + a.split("/").splice(3).join("/")
: a) !== x && M();
}
};
if (!n.umami) {
var D = function (t) {
return P(t);
};
(D.trackView = M), (D.trackEvent = P), (n.umami = D);
}
if (b && !A()) {
(v.pushState = t(v, "pushState", C)),
(v.replaceState = t(v, "replaceState", C));
var I = function () {
"complete" === f.readyState &&
(M(),
k &&
(z(f),
new MutationObserver(function (t) {
t.forEach(function (t) {
var e = t.target;
B(e), z(e);
});
}).observe(f, { childList: !0, subtree: !0 })));
};
f.addEventListener("readystatechange", I, !0), I();
}
}
})(window);
})();最后使用在线工具混淆一下：https://www.sojson.com/https://tool.lu/js我们需要调试，所以选择tool.lu，新建一个u.js，保存加密的js再创建一个页面引用js：最后效果：因为我用的博客域名，实际换成umami即可。
-
UMAMI隐私统计安装及配置
https://dwt.life/archives/228/
2022-04-27T12:20:00+08:00
UMAMI使用nodejs编写，是一个用于替代Google Analytics等第三方统计平台，更专注于用户隐私保护的自建统计项目。环境这里使用两种方法去安装umami，第一种是使用pm2或者supervisor直接运行在本机环境的，第二种是使用docker pull并build镜像。如果已经安装了宝塔，推荐直接运行在本机环境中。需要准备的有：MySQLnodejsnpmpm2（或者supervisor）Ubuntu系列安装Nodejs、npm：curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
apt-get install -y nodejs
apt-get install -y npmCentos系列可以直接使用yum：yum install node npm -yMySQL建议查看其他博客的安装及配置。如果您选择使用docker安装，那么仅需这样的一步：curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun也可以使用国内daocloud的脚本：curl -sSL https://get.daocloud.io/docker | sh安装及配置如果您需要使用docker进行安装，请直接转到docker方式章节。安装git clone https://github.com/mikecao/umami.git
cd umami
npm install导入数据库mysql -u username -p databasename < sql/schema.mysql.sql我这里就直接在PMA中执行了配置.envDATABASE_URL=mysql://username:mypassword@localhost:3306/databasenameHASH_SALT=随机生成optimize&build在umami目录下执行：npm run build即可生成编译后的工程文件启动程序按照官方readme说的直接npm start是可以的，默认会运行在3000，但是我们如果关闭了终端会话，也会停止运行，所以需要使用PM2或者supervisor进行后台保活运行，当然，也可以使用nohup。如果我们使用的是第一种本机环境运行，那么可以通过npm安装pm2：npm install pm2 -g在umami目录下执行：pm2 start npm --name umami -- start
pm2 startup
pm2 save由于服务器上已经有宝塔和pm2管理器了，所以我并不打算使用命令行添加。docker方式安装注意，如果您选择docker方式，那么您可以完成后直接跳过安装及配置这一章首先您需要docker环境，上述步骤已经提供了脚本。然后执行docker-compose up确保服务已经启动。我们这里使用MySQL作为数据库后端：docker pull ghcr.io/mikecao/umami:mysql-latest稍微等待数十分钟即可启动，默认占用端口3000。升级docker-compose pull
docker-compose up --force-recreate域名反代在nginx.conf中的http段下添加：server{
server_name 你的域名;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}或者宝塔，网站管理，反向代理即可。文件修改及更新假如你按照前面的pm2运行，那么按照如下步骤执行pm2 stop umami停止其运行。切换到你的umami目录pull一份最新的代码git pull重新安装node modules npm install重新编译npm run build重新启动PM2pm2 restart umami根据参考博文中提到的更新失败可以执行git reset --hard使用首次登录默认账号admin，密码umami添加统计网站获取统计代码查看统计由于我并没有打算立刻使用umami，使用官方的图做一个收尾吧：参考https://github.com/mikecao/umamihttps://www.himiku.com/archives/umami.html