同站点防盗链图片和百度统计Referer不一致的解决方案

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

问题描述：防盗链图片不在所指定的白名单内，是不被允许访问的，比如语雀图片不能在非自己网站上渲染使用。

常规解决思路：通过设置页面meta标签的referrer属性值为no-referrer可以进行访问（Referer和Referrer Policy以及图片防盗链）

<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);
};