尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 305
已运行时间: 1063
目录

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 305
已运行时间: 1063

前言:个人网站使用的语雀外链图片和百度统计两者之间的referrer不一致的解决方案

问题:防盗链图片不在所指定的白名单内,是不被允许访问的,比如语雀图片不能在自己网站上渲染使用,通过设置页面的referrer可以进行访问(Referer和Referrer Policy以及图片防盗链_前端码农小王的博客-CSDN博客_前端设置referer

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

设置上述referrer,那么对百度统计代码失效,因为百度统计需要携带请求网站的referr等信息才能进一步进行数据统计分析


解决思路:动态对网站的referrer进行更改,设置网站初始referrer为no-referrer,待网站所有外链图片加载完成,动态修改referrer为strict-origin-when-cross-origin,再进行百度统计逻辑代码的执行。核心代码如下:

// 防盗链图片共存

const getImgLoadEd = (callback) => {
let images = document.getElementById("lyrics").querySelectorAll("img");
const promises = Array.prototype.slice
.call(images)
.filter((img) => /^(https:\/\/cdn.xxx.com\/yuque)/.test(img.src))
.map((node) => {
return new Promise((resolve, reject) => {
// 加一重保障
node.setAttribute("referrerpolicy", "no-referrer");
let loadImg = new Image();
loadImg.src = node.src;
loadImg.onload = () => {
resolve(node);
};
});
});
Promise.all(promises)
.then((data) => {
if (callback) callback();
})
.catch((e) => {
console.log("所拉取的文章图床访问失败!");
});
};
const baidutongji = () => {
document
.querySelector('meta[name="referrer"]')
.setAttribute("content", "strict-origin-when-cross-origin");
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?bcxxxxxxxxxxxx1";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
};

评论区

Twikoo giscus