微信论坛

 找回密码
 立即注册
查看: 17628|回复: 0

图片来源加了防盗链导致网站复制来的内容里不显示图片

[复制链接]

主题

帖子

0

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
0
发表于 2020-12-19 11:39:17 | 显示全部楼层 |阅读模式
图片来源加了防盗链导致网站复制来的内容里不显示图片


如题:图片来源加了防盗链导致网站复制来的内容里不显示图片
如果对方只是加了这么一个防盗链,就可以用下面的方法处理。但是如果还加了不允许本地空referrer访问,那就不行了。

删除 Header 中的 Referrer
<meta name="referrer" content="never">
content 有四个值可以选择 never,always,origin,default 这是来自于 whatwg 标准,浏览器对他的支持还是很好的。
MDN 标准,还多了一个 no-referrer
  1. <meta name="referrer" content="no-referrer" />
  2. <meta name="referrer" content="never"/>
  3. <meta name="referrer" content="same-origin"/>
复制代码


添加 ReferrerPolicy 属性
添加 meta 标签相当于对文档中的所有链接都取消了 referrer,
而R eferrerPolicy 则更精确的指定了某一个资源的referrer策略。
关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:
  1. <img src="xxxx.jpg" referrerPolicy="no-referrer" />
复制代码



图片来源加了防盗链导致网站复制来的内容里不显示图片-1.jpg
浏览器支持对比
上面我们讲了两种取消referrer头信息的方法,但其实这却对应了五种写法,我们来看下面的对比表:
图片来源加了防盗链导致网站复制来的内容里不显示图片-2.jpeg
可以看出Chrome浏览器对各种写法都支持的最好,棒棒哒;Firefox支持所有标准的写法,但是不支持没有写在head标签中的meta标签;Edge/IE则不支持MDN里定义的”no-referrer”配置项,果然是个古董。。。
总的来说,保证最佳效果的最简单的写法就是添加一个meta标签
  1. <meta name="referrer" content="never">
复制代码


这样就不用考虑浏览器的差别了,虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董,放弃了理论上更为正确的标准)


==========================================

问题

笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了。

具体问题,就是 html 中通过 img 标签引入一个第三方的图片地址,报 403 。

但是这个图片地址直接复制出来在地址栏打开,却是看得到的。

原因

官方输出图片的时候,判断了来源 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:

    1. <meta name="referrer" content="never">
    复制代码

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

    1. <meta name="referrer" content="origin">
    复制代码



解决方案

初步方案

  • 在 标签里加 meta,referrer 的 content 设置为 nerver
    1. <meta name="referrer" content="never">
    复制代码




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

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

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

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



最终的解决方案

  • 先在 html 上设置 referrer 为 always
    1. <meta id="referrer" name="referrer" content="always" />
    复制代码





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

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

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


  1. const referrer  = document.getElementById("referrer");
  2. referrer.setAttribute("content", "never")
复制代码



这样就能解决第三方图片防盗链,又能用到百度统计了。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|微信人家论坛 ( 沪ICP备14052918号-4 )微信第三方平台沪公网安备 31011402006408号  

GMT+8, 2024-10-10 06:11 , Processed in 0.265625 second(s), 34 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表