前端解决第三方图片防盗链的办法 - html referrer 访问图片资源

前端解决第三方图片防盗链的办法 - html referrer 访问图片资源

问题

第三方网站上的图片开启了 防盗链,防止其他网站访问他们网站上的图片

原因

官方输出图片的时候,判断了来源 Referer ,就是从哪个网站访问这个图片,如果是你的网站去加载这个图片,那么 Referer 就是:你的网站地址;

如果我们的网站地址不在官方的白名单内,所以就看不到图片了。

我们做这个跳板的关键:不发送 Referer,也就是没有来源。那么官方那边,就认为是从浏览器直接访问的,所以就能加载正常的图片了。

referrer

在某些情况下,出于一些原因,网站想要控制页面发送给 server 的 referrer 信息的情况下,可以使用这一 referer metadata 参数。

参数

referer 的 metedata 属性可设置 content 属性值为以下集合:

  • never
  • always
  • origin

结果

  • 如果 referer-policy 的值为 never:删除 http head 中的 referer;
  • 如果 referer-policy 的值为 default:如果当前页面使用的是 https 协议,而正要加载资源使用的是普通的 http 协议,则将 http header 中额 referer 置为空;
  • 如果 referer-policy 的值 origin:只发送 origin 部分;
  • 如果 referer-policy 的值为 always:不改变 http header 中的 referer 的值;

举例

如果页面中包含了如下 meta 标签,所有从当前页面中发起的请求将不会携带 referer:

<meta name="referrer" content="never">

如果页面中包含了如下 meta 标签,则从当前页面中发起的 http 请求将只携带 origin 部分:

<meta name="referrer" content="origin">

解决方案

初步方案

  • 在 标签里加 meta,referrer 的 content 设置为 nerver
<meta name="referrer" content="never">

这样存在第三方网站上的图片,在你的网站上就可以访问了。

但是还有一个问题,就是如果你的网站需要发送你的网站地址的,那上面的的设置就不行了,比如:用到了百度统计。

那上面的设置会导致百度统计的代码加载不了,因为它需要发送你的网站地址给百度统计。

既要不发送 你的网站地址,又要发送你的网站地址,那么怎么办呢 ?

在这里插入图片描述

最终的解决方案

  • 先在 html 上设置 referrer 为 always
<meta id="referrer" name="referrer" content="always" />

这样之后,首屏加载的时候,加载了百度统计的代码了,能正常统计访客数据了。

  • 不需要网站地址的时候,再把 referrer 设置为 nerver

加个延时 setTimeout 再把 referrer 的 content 值设置为 nerver 。
或者 在有图片的地方再把 referrer 的 content 值设置为 nerver 。

//  在获取图片的时候设置为 never 
const referrer  = document.getElementById("referrer");
referrer.setAttribute("content", "never")

// 设置完之后在恢复 , 防止其他接口referrer报错
referrer.setAttribute("content", "always")


never")

// 设置完之后在恢复 , 防止其他接口referrer报错
referrer.setAttribute(“content”, “always”)


  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值