9159金沙游艺场

图片 5
让浏览器不再显示 https 页面中的 http 请求警报
图片 1
Java中数组的初始化

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

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

2018/04/24 · HTML5 ·
防盗链

原文出处: Myths   

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

场景

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

图片 1

防盗链效果图

前言

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

<img src="https://xxxx" alt="图片 2">

防盗链

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

问题

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

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

成功引起注意

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

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

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

解决方案

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

分析

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

图片 3

防盗链请求头

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

图片 4

新开窗口请求

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

不过如此,哈哈哈…

图片 5

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

图片 6

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图