防盗链referer详解和解决办法「建议收藏」

防盗链referer详解和解决办法「建议收藏」防盗链原理:http标准协议中有专门的字段记录referer1、他可以追溯到请求时从哪个网站链接过来的。2、来对于资源文件,可以跟踪到包含显示他的网页地址是什么。因此所有防盗链方法都是基于这个Referer字段1.事情经过在一开始,我打算将其他网站(如:爱奇艺,腾讯)的图片放在自己的网站(http://localhost…)上显示.<imgsrc=”http://pic6…

大家好,又见面了,我是你们的朋友全栈君。

防盗链原理:

http标准协议中有专门的字段记录referer
1、他可以追溯到请求时从哪个网站链接过来的。
   //小例子
     这个头信息指示所指向的 Web 页的 URL。例如,如果您在网页 1,点击一个链接到网页 2,
    当浏览器请求网页 2 时,网页 1 的 URL 就会包含在 Referer 头信息中。
2、来对于资源文件,可以跟踪到包含显示他的网页地址是什么。

因此很多防盗链方法都是基于这个Referer字段

//而User-Agent 是判断爬虫和浏览器的一个原因
'User-Agent': 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)',
 'Referer': 'http://****'

一、事情经过

在一开始,我打算将其他网站的图片放在自己的网站(http://localhost…)上显示.

<img src="http://pic6.iqiyipic.com/image/20200215/f6/f9/a_100280816_m_601_m2.jpg"/>

结果却是返回403 Forbidden (即:没有权限访问此站),无法在自己的网站上加载出图片.

然后我以为是链接失效了,然后我复制该链接到浏览器上直接访问,发现可以正常加载图片,
还有在本地(file://…)打开也能正常显示图片.
然后我就纳闷了,为什么同一个html文件(都是加载同一条链接).
我使用(http协议)打开,就返回403,我本地打开(file协议)就可以返回正常图片,
我想src链接是一样的,那肯定是两种请求方式(http和file)的不同让他们的服务器识别了,
针对不同的请求返回不同的结果(其实是通过Referer字段识别的)

二、寻找原因
然后为了查看两种请求方式的不同,我就自己写了一个node服务器(其实直接在浏览器上查看请求头的也是可以的,不过我是找到原因以后才知道的)

var express = require('express');  //引入express模块
var app = express();  //创建express的实例
app.get('/app', function(req, res){ 
   
	console.log(req.headers);   //打印请求头
    res.send('Hello,myServer'); //服务器响应请求
});
app.listen(3000,function(){ 
      //监听3000端口
    console.log("Server running at 3000 port");
});

写了一个客户端(html代码省略)

<script type="text/javascript">
 $(function () { 
     
			 $.ajax({ 
   
                url: "http://localhost:3000/app",   //请求业务数据
                type: "GET",
                success: function (result) { 
   
				  console.log(result+'3000');
                }
            });
			
        });
</script>

(在本地直接打开会显示跨域,不要紧,因为请求(这里指简单请求,简单请求和复杂请求的区别)
已经发出去了,不管有没有跨域浏览器都会发送请求,然后浏览器通过接受到返回结果发现请求头没有
‘Access-Control-Allow-Origin’ ‘*’ 才显示跨域的,也就是说数据发过来了,浏览器就是不给你显示)
本地打开(file:///)显示结果
在这里插入图片描述
而借助nginx打开的(http://)

        url: "http://localhost/app",   //将url请求路径修改
       #nginx.config配置转发路径(这样就不会显示跨域了,还能将结果返回浏览器)
       location /app {
            proxy_pass http://192.168.0.103:3000;  #转发地址
		}		

结果
在这里插入图片描述

从上面两幅图就可以看出,本地请求没有referer请求字段,而http请求却有
然后查阅得知:正是referer起到了防盗链的作用。防止其他网站加载他的的图片

三、解决方法

因为浏览器限制,不能手动添加和修改referer请求头
所以只利用nginx来转发请求,并重新设置referer字段

 location /* {
            proxy_set_header referer  '';  #设置为空,或者该请求路径允许的referer字段路径
            proxy_pass http://........;  #转发地址
		}	

四、新增方法
js使用iframe跳过防盗链

<script type="text/javascript"> 
function showImg( url ) { 
var frameid = 'frameimg' + Math.random(); 
//使用window(全局对象)来声明,全局对象的属性也是全局变量
window.imgWindow = '<img id="imgId" src=\''+url+'?'+Math.random()+'\' /><script>window.onload = function() { parent.document.getElementById(\''+frameid+'\').height = document.getElementById(\'imgId\').height+\'px\'; }<'+'/script>'; 
document.write('<iframe id="'+frameid+'" src="javascript:parent.imgWindow;" frameBorder="0" scrolling="no" width="100%"></iframe>'); 
} 
</script> 
//调用
<script type="text/javascript">showImg('图片地址');</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163487.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 安卓数据转移到iphone老是中断_安卓换iPhone数据怎么转移?这款神器一键搞定「建议收藏」

    安卓数据转移到iphone老是中断_安卓换iPhone数据怎么转移?这款神器一键搞定「建议收藏」每天12:18准时给大家惊喜!大家好!我是好奇仔,热衷于搜罗和分享各种好用、实用的软件神器和资源,有手机软件、办公软件、APP,还有网站资源……来自:PConline,作者:我爱我家换新手机了,内心当然是巨爽无比了!可是换机时有个步骤却让人觉得有点麻烦,那就是如何将旧手机的资料转移到新手机里去,安卓与iOS又如何互通呢?以前的操作得先将数据导出到电脑,然后可能还需要进行数据格式转换,接…

  • 3.3转1.8V(电平转换)_i2c电平转换芯片国产

    3.3转1.8V(电平转换)_i2c电平转换芯片国产利用TI电平钳制芯片SN74TVC16222A来做电平转换,优点在于速率可以做得快一些。

  • AvalonDock学习总结

    AvalonDock学习总结介绍:借助AvalonDock可以开发出类似于VS2010的软件界面,实现可停靠布局。使用时需要Nugit中下载Extended.wpf.toolkit插件.在Xaml中需要应用命名空间xmlns:avalon=”http://schemas.xceed.com/wpf/xaml/avalondock”AvalonDock库提供了一些基本的类。DockingManger:管理停靠类。DockingManger中只允许包含一个LayoutRoot类DockingM…

  • Intellij IDEA 安装lombok及使用详解

    Intellij IDEA 安装lombok及使用详解项目中经常使用bean,entity等类,绝大部分数据类类中都需要get、set、toString、equals和hashCode方法,虽然eclipse和idea开发环境下都有自动生成的快捷方式,但自动生成这些代码后,如果bean中的属性一旦有修改、删除或增加时,需要重新生成或删除get/set等方法,给代码维护增加负担。而使用了lombok则不一样,使用了lombok的注解(@Setter,@Getter,@ToString,@@RequiredArgsConstructor,@EqualsAndHas

  • latex大括号公式编辑「建议收藏」

    latex大括号公式编辑「建议收藏」公式最近,在使用latex编辑论文的过程中,遇到如下类似的公式:可以看到,这个公式下面使用的括号型公式。在latex中可使用如下的方式产生:\begin{equation}\label{eqn11}%%\label\begin{aligned}f_{k}^{-d,n}\left(x_{dn}=w\right)&=\frac{\int_{\phi_{k…

    2022年10月11日
  • DOM手术台

    DOM手术台

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号