>

在pc端任何地方都显示,是否在请求头部定义sb

- 编辑:澳门博发娱乐官网 -

在pc端任何地方都显示,是否在请求头部定义sb

参考资料

whatwg
MDN
使用Referer Meta标签控制referer

2 赞 2 收藏 评论

sbf282.com 1

最近自己写了一个网站玩,在引用别人网站的图片是遇到了一些小问题。

场景

最近公司项目需求中涉及到需要引用微信朋友圈中的图片资源,结果被腾讯的防盗链系统拦截,所有的图片都变成了令人尴尬的模样。今天咱们讨论的主题即看我如何习得化解之法

sbf282.com 2

防盗链效果图

Referrer Policy

引用策略就是从一个文档发出请求时,是否在请求头部定义 Referrer 的设置。

4.如果 referer-policy 的值为 always:不改变http header 中的 referer 的值,注意:这种情况下,如果当前页面使用了 https 协议,而要加载的资源使用的是 http 协议,加载资源的请求头中也会携带 referer。

主流浏览器图片反防盗链方法总结

2018/04/24 · HTML5 · 防盗链

原文出处: Myths   

图片预下载

这个是最直观的解决方式了,正在使用别人的图,先把图片下载下来,保存到自己的服务器上,然后就等于是用自己的了~ 如果自己没有服务器,可以去网上找找图床,应该也能解决问题。

防盗链

盗链是指未经资源代理站点许可而擅自引用其资源。防盗链就是这些资源代理站点,为了避免盗链行为而采取的一种很常见的屏蔽措施,我们这里主要讨论图片方面的防盗链及相关的解决方案

设置方法

  • 通过 http 响应头中的 Referrer-Policy 字段
  • 通过 meta 标签,name 为 referrer(本次使用)
  • 通过<a>、<area>、<img>、<iframe>、<link>元素的 referrerpolicy 属性。

参考: Web 页面 Meta 的 Referrer Policy

1.如果 referer-policy 的值为never:删除 http head 中的 referer;

问题

问题很简单,就是我希望在自己的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。我的目的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。

<img src="https://xxxx" alt="sbf282.com 3">

Tips

  • 细心的朋友会发现,html的meta设置属性为referrer,而http请求头里面却是referer,原因是早期http标准制订的那一波同仁,将referrer拼错为referer[手动尴尬],后续版本为了兼容以前版本,不得已一错再错
  • 盗链可耻,如果非商用项目可以尝试下本文提到的方案
  • 既然写到这里,帮朋友打个广告,广告见上图,需要者联系:HAIYU-JIANG,坐标杭州融创·河滨之城

referrer 的值

  1. 空字符串
  2. no-referrer
  3. no-referrer-when-downgrade
  4. same-origin
  5. origin
  6. strict-origin
  7. origin-when-cross-origin
  8. strict-origin-when-cross-origin
  9. unsafe-url
  • 默认值: 一般浏览器的默认值是 no-referrer-when-downgrade
  • no-referrer: 所有请求不发送 referrer
  • no-referrer-when-downgrade: 当请求安全级别下降时不发送 referrer。目前,只有一种情况会发生安全级别下降,即从 HTTPS 到 HTTP。HTTPS 到 HTTP 的资源引用和链接跳转都不会发送 referrer。
  • same-origin:对于同源的链接和引用,会发送referrer,其他的不会。
  • origin:会发送 referrer,但只会发送源信息。源信息包括访问协议和域名。
  • strict-origin:这个相当于 origin 和 no-referrer-when-downgrade 的 AND 合体。即在安全级别下降时不发送 referrer;安全级别未下降时发送源信息。注意:这个是新加的标准,有些浏览器可能还不支持。
  • origin-when-cross-origin:这个相当于 origin 和 same-origin 的 OR 合体。同源的链接和引用,会发送完全的 referrer 信息;但非同源链接和引用时,只发送源信息。
  • strict-origin-when-cross-origin:这个比较复杂,同源的链接和引用,会发送 referrer。安全级别下降时不发送 referrer。其它情况下发送源信息。注意:这个是新加的标准,有些浏览器可能还不支持。
  • unsafe-url:无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略。

首先,微信复制的图片,自己网站作为引用,在pc端任何地方都显示:"本图片来自微信公众号,未经许可,不能引用..."之类的字样在安卓ap端其实是可以正常显示的,在ios的app端显示为空白

后台预下载

预下载是最直观的一种方法,既然不能直接引用,那我就先后台下载下来,然后将图片链接到下载后的图片即可。这个方法还是比较稳妥的,图片下载下来就是自己的了,不会再受人限制。不过这总有种侵犯知识产权的感觉,而且每张图片都要后台先下载,逻辑处理起来还是有点麻烦的;而且对于那种纯静态页面,没有后台程序供我们发挥,这也就无法实现了。

像这个样子,src后面跟的是别的网站的图片的url。

解决方案

目前常用方法无外乎两种,第一种是通过第三方跳板服务:
这些服务一般多是通过后端代理的方式暴露出跳板api,使用方在调用时通过传参的方式将要请求的url传到代理服务器,代理服务器作为中间方再去请求腾讯资源代理服务器的图片资源,拿到资源后返还给调用方,之前有一些稳定的跳板服务,比如QQ浏览器(一家人应该不会有问题)提供的

http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=

在上述链接后面给出原始图片的url,然后就可以坐等QQ跳板服务为我们取回想要的图片

然鹅。。。

sbf282.com 4

QQ浏览器也加了防盗链校验

果然是一家人。。。
只能尝试第二种方式了

第二种方案就是让浏览器发图片请求时,请求头不带上Referer头信息。像这种控制代理动作,一般通过meta标签来进行设置,最终在meta找到了想要的

referrer controlling the content of the HTTP Referer HTTP header attached to any request sent from this document:

sbf282.com 5

referrer取值

参考上面的取值含义,我们只需要在所需页面的<head>中加上:

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

效果图

sbf282.com 6

Referer没了,图片也正常显示了[手动滑稽笑脸]

背景:

最近在做一个 vue 项目,项目中的一些图片来自外网,动态的赋值给src属性,结果加载不出来,如果拿上地址直接给src属性,可以加载出来, 查看控制台的network,错误信息为 403(forbidden)

解决方案:

index.htmlhead标签内加上一个meta标签

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

 

第三方代理

第三方代理其实算是后台与下载的升级版,其实就是将下载图片的这个过程交给第三方的网站。一个非常好用的代理是images.weserv.nl,我们可以直接将自己需要“盗链”的图片写在请求中即可。我们甚至可以指定一些简单的图片处理参数,让代理帮我们处理。
比如我想盗链https://foo.com/foo.jpg,并且将图片宽度设置成100,我们就可以直接这样引用:

<img src="" />

1
<img src="https://images.weserv.nl/?url=foo.com/foo.jpg&w=100" />

这还是很方便的,不过美中不足的是这个国外的网站在国内的访问速度似乎有点慢,有时候甚至还会被墙,这就有点尴尬了。

经过了解,发现这是一个叫做防盗链的东西,网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden。我们要做的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。我从网上搜到了几个解决方法。

分析

反手就是一个F12,首先是有防盗链现象的图片的请求信息

sbf282.com 7

防盗链请求头

再反手又是一个new tab,键入图片url,F12

sbf282.com 8

新开窗口请求

这样对比看的话就很清楚了,两者不同之处再Request Headers里面的Referer请求头,关于Referer,引用MDN的解释:

The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example.

大概意思就是说Referer包含请求发起者的URL,这样腾讯方就可以拿到请求源相关信息,然后根据请求源URL来进行判断校验,这样就可以知道请求方是否在盗链

不过如此,哈哈哈...

sbf282.com 9

但是,怎么破?绝望。。。

sbf282.com 10

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

浏览器支持对比

上面我们讲了两种取消referrer头信息的方法,但其实这却对应了五种写法,我们来看下面的对比表:

NOTHING META IN HEAD REFERRER=NEVER META IN HEAD REFERRER=NO-REFERRER META REFERRER=NEVER META REFERRER=NO-REFERRER IMG REFERRERPOLICY=NO-REFERRER
Chrome N Y Y Y Y Y
Firefox N Y Y N N Y
Edge/IE N Y N Y N N

可以看出Chrome浏览器对各种写法都支持的最好,棒棒哒;Firefox支持所有标准的写法,但是不支持没有写在head标签中的meta标签;Edge/IE则不支持MDN里定义的”no-referrer”配置项,果然是个古董。。。

总的来说,保证最佳效果的最简单的写法就是添加一个meta标签``,这样就不用考虑浏览器的差别了,虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董,放弃了理论上更为正确的标准)。

使用iframe

这个图片就是使用了防盗链的http://json.image.alimmdn.com/vsou.png

  1. 建一个空的iframe
  2. iframe设置src,内容就是图片或一段html
var body = document.querySelector;var iframe = document.createElement;var html = '<img src="http://json.image.alimmdn.com/vsou.png"/>';iframe.src = 'javascript:void(function(){document.open();document.write('' + html + '');document.close';body.appendChild;

略微设置一下样式

iframe.style.position="fixed";iframe.style.width="100%";iframe.style.height="100%";iframe.style.border=0;iframe.style.zIndex=10;iframe.style.top=0;iframe.style.left=0;

上面一段代码有一个关键因素,就是在iframe之外,不能有任何其他图片该域名下的图片,否则功亏一篑

上面的解释是从网上搜到的,没有什么问题,总结起来方法就是我们创建一个iframe,然后把我们要显示的带有防盗链图片链接的html标签,以字符换的形式传给iframe的src属性就行了。

不过这个方法是有问题的,因为iframe设置width和height都无效,所以用在我的网站上样式是不合适的。具体为什么这样,大家可以查一下iframe,具体的了解一下。

成功引起注意

当时近距离遇到防盗链:这么神奇,这是怎么实现的?

随即chromeF12->开发者工具,取出显示成防盗链样式的图片URL,发现和源链接没有区别。新开一个tab,Ctrl+V->Enter,什么鬼?能正常显示啊!腾讯真nb?能知道我是直接浏览器打开而不是偷偷塞到img标签的src?

直觉告诉我,肯定两种方式发送的请求图片的Request Header有区别

 

添加meta标签

一种方法是给页面添加一个meta标签,在meta标签里指定referrer的值,比如`。网上可以查到各种奇奇怪怪的值,其实我总结了来源于两个地方。 一个是来自[whatwg](https://wiki.whatwg.org/wiki/Meta_referrer)的标准。他给meta标签的referrer属性定义了四个值:never,always,origin,default。如果需要关闭referrer,就将referrer的值设置成”never”。这个标准还是比较老的,而且在他的主页上也明确写了”This document is obsolete.”。不过据我调研,或许正是由于这个标准比较老,反而导致绝大多数浏览器对他的支持都很好,因祸得福蛤蛤。 另外一个是来自[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)的标准。他给meta标签的referrer属性定义了五个值,如果要关闭referrer,就将它的值设置成no-referrer`。
不过我们需要注意的是,meta标签添加的位置也很重要,有的浏览器能够识别非head标签中的meta标签,有的就不行。在实际使用的时候还要小心,这一点下文会有一个更具体的比较。

添加ReferrerPolicy属性

添加meta标签相当于对文档中的所有链接都取消了referrer,而ReferrerPolicy则更精确的指定了某一个资源的referrer策略。关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:

<img src="xxxx.jpg" referrerPolicy="no-referrer" />
nothing meta in head referrer=never meta in head referrer=no-referrer meta referrer=never meta referrer=no-referrer img referrerPolicy=no-referrer
Chrome N Y Y Y Y Y
Firefox N Y Y N N Y
Edge/IE N Y N Y N N

可以看出Chrome浏览器对各种写法都支持的最好。Firefox支持所有标准的写法,但是不支持没有写在head标签中的meta标签;Edge/IE则不支持MDN里定义的”no-referrer”配置项,果然是个古董。。。

总的来说,保证最佳效果的最简单的写法就是添加一个meta标签<meta name="referrer" content="never" />,这样就不用考虑浏览器的差别了,虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董,放弃了理论上更为正确的标准)。

 

前言

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想到这个小问题硬是让我改了五六遍才改好,可以说是非常的蠢了。总结一下自己犯傻的原因,还是由于自己懒得去深入研究,谷歌百度了问题就直接把方案拿来用了,浅尝辄止人云亦云,解决了表面的问题而没有深入的总结。当然,从另外一个方面讲,我也是初步领会到了前端程序员面对要兼容各种浏览器的需求时头有多大了。

添加meta标签

一种方法是给页面添加一个meta标签,在meta标签里指定referrer的值,比如<meta name="referrer" content="xxx" />。网上可以查到各种奇奇怪怪的值,其实我总结了来源于两个地方。一个是来自whatwg的标准。他给meta标签的referrer属性定义了四个值:never,always,origin,default。如果需要关闭referrer,就将referrer的值设置成”never”。这个标准还是比较老的,而且在他的主页上也明确写了”This document is obsolete.”。不过据我调研,或许正是由于这个标准比较老,反而导致绝大多数浏览器对他的支持都很好,因祸得福蛤蛤。另外一个是来自MDN的标准。他给meta标签的referrer属性定义了五个值,如果要关闭referrer,就将它的值设置成no-referrer

不过我们需要注意的是,meta标签添加的位置也很重要,有的浏览器能够识别非head标签中的meta标签,有的就不行。在实际使用的时候还要小心,这一点下文会有一个更具体的比较。

此段摘自:http://www.freebuf.com/news/57497.html

删除Header中的Referrer

相比上面两种折腾的方法,如果能直接修改Referrer,那不就省了很多事了么。但是事实上这里的配置还是有挺多坑的,方法也有很多种,一不小心就会跟我一样踩了一遍又一遍。

有的图片在我们发布的网站上能正常加载出来,有的一些就加载不出来,审查一下元素,会看到Failed to load resource: the server responded with a status of 403 ()的报错。

2.将 content 的值复制给 referrer-policy ,并转换为小写

本文由胜博发-前端发布,转载请注明来源:在pc端任何地方都显示,是否在请求头部定义sb