防盗链解决办法

业务需求:使用富文本编辑器在复制其他网站文章时候,网络资源(图片等)加载失败,403。

解决问题:网络资源在添加防盗链时，会限制非白名单网站访问。

防盗链原理:防盗链功能基于HTTP协议支持的Referer机制，通过Referer跟踪来源，对来源进行识别和判断。

解决原理:在 html 添加 meta标签

快速的解决方法就是在html添加

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

业务要求：仅限在富文本预览页面添加meta标签不要影响其他页面。

方案:动态添加meta标签

useEffect(() => {
  //添加meta标签
  let meta_new = document.createElement("META");
  let name = document.createAttribute("name");
  let content = document.createAttribute("content");
  name.value = "referrer";
  content.value = "no-referrer";
  meta_new.setAttributeNode(name);
  meta_new.setAttributeNode(content);
  document.getElementsByTagName("head")[0].appendChild(meta_new);


  return () => {
    // 移除meta标签
    let metas = document.getElementsByTagName("meta");
    for (var i = 0; i < metas.length; i++) {
      if (
        metas[i].getAttributeNode("name") != null &&
        metas[i].getAttributeNode("name")?.value == "referrer" &&
        metas[i].getAttributeNode("content") != null &&
        metas[i].getAttributeNode("content")?.value == "no-referrer"
      ) {
        document.getElementsByTagName("head")[0]?.removeChild(metas[i]);
      }
    }
  };
}, []);

PDF无法预览

当然部分网络PDF文件也有有这样的问题。利用window.open来打开PDF发现添加了防盗链，无法打开，下面给大家介绍另种打开的方法:主要是添加参数noreferrer

window.open(url, "_blank", "noreferrer");

//防盗链 Referer 的限制 主要是添加参数noreferrer
export function crackOpen(url, newWindow) {
  //newWindow 是否打开新的窗口  `resizable打开新的浏览器窗口`
  if (typeof url != 'string') return
  window.open(url, "_blank", `noreferrer,${newWindow ? 'resizable' : ""}`);
}