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

2019-11-26 16:08栏目:龙电竞官网
TAG:

后台预下载

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

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

成功引起注意

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

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

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

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

2018/04/24 · HTML5 · 防盗链

原文出处: Myths   

添加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标签,有的就不行。在实际使用的时候还要小心,这一点下文会有一个更具体的比较。

防盗链

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

问题

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

使用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,具体的了解一下。

场景

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

图片 1

防盗链效果图

解决方案

删除Header中的Referrer

保证最佳效果的最简单的写法就是在html文件的head中添加一个meta标签<meta name="referrer" content="never" />

为什么叫保证效果的最简单写法 ?下面看一些数据对比。

删除Header中的Referrer的方法也有多种:添加meta标签添加ReferrerPolicy属性

解决方案

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

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

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

然鹅。。。

图片 2

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

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

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

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

图片 3

referrer取值

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

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

效果图

图片 4

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

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:主流浏览器图片反防盗链方法总结