澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

聊一聊防盗链,主流浏览器图片反防盗链方法总

问题

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

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

防盗链

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

第三方代理

第三方代理其实算是后台与下载的升级版,其实就是将下载图片的这个过程交给第三方的网站。一个非常好用的代理是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" />

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

使用iframe

这个图片就是使用了防盗链的http://www.xudongprc.com/uploads/allimg/190911/0313301Y8-0.png

  1. 建一个空的iframe
  2. iframe设置src,内容就是图片或一段html
var body = document.querySelector;var iframe = document.createElement;var html = '<img src="http://www.xudongprc.com/uploads/allimg/190911/0313301Y8-0.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

防盗链效果图

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

2018/04/24 · HTML5 · 防盗链

原文出处: Myths   

删除Header中的Referrer

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

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

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

分析

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

图片 2

防盗链请求头

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

图片 3

新开窗口请求

这样对比看的话就很清楚了,两者不同之处再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来进行判断校验,这样就可以知道请求方是否在盗链

不过如此,哈哈哈...

图片 4

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

图片 5

参考资料

whatwg
MDN
使用Referer Meta标签控制referer

2 赞 2 收藏 评论

图片 6

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

Tips

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

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:聊一聊防盗链,主流浏览器图片反防盗链方法总