事情起因

前段时间,因为淘宝图片防盗链的原因,我在网页头部加上这个meta标签。

1
<meta name="referrer" content="no-referrer">

后来发现百度统计异常了。

2021-9-9-2021-09-09-18-30-17

反图片防盗链和使用百度统计,这两个需求是冲突的。正常情况下,删除no-referrer的标签即可解决。但是如何在保留标签的情况下,同时可以使用百度统计呢?

解决方案1(不推荐)

有一种不太完美的做法,原理就是延迟修改meta标签的值。百度统计加载时值为always,加载完后用户需要展示淘宝图片时,再设置回never

先给index.html设置一个默认的meta。

2021-9-9-2021-09-11-00-10-48

然后修改项目的路由配置,通过vue-router的导航守卫,在Vue中动态设置meta标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 获取页面 meta 信息
let allMeta = document.querySelectorAll('meta');
let referrerIndex = null;
allMeta.forEach((item, index) => {
if (item.name == 'referrer') {
referrerIndex = index;
}
});

// 路由钩子
router.beforeEach((to, from, next) => {
// 先改成默认允许
allMeta[referrerIndex].content = 'always';
if (referrerIndex) {
// 延迟修改成拒绝
setTimeout(() => {
allMeta[referrerIndex].content = 'never';
}, 1000);
}
next();
})

不完美的地方在于它统计数据可能会不准确,例如用户停留时长,跳出率等。

2021-9-9-2021-09-11-10-15-16

解决方案2

直接把把统计代码放到 no-referrer 标签前面。

2021-9-9-2021-09-11-09-31-14

百度统计管理后台,显示代码安装正确。

2021-9-9-2021-09-11-10-43-49