防盗链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)
blank

相关推荐

  • PHP数组详解

    作为一名C++程序员,在转做PHP开发的过程中,对PHP数组产生了一些混淆,与C++数组有相似的地方,也有一些不同,下面就全面地分析一下PHP的数组及其与C++中相应数据类型的区别和联系。数组的分类

    2021年12月27日
  • cocos2d基础篇笔记四

    cocos2d基础篇笔记四

  • 【5GC】5G网络切片与5G QoS的区别?[通俗易懂]

    【5GC】5G网络切片与5G QoS的区别?[通俗易懂]网络切片是一种5G支持的技术,允许跨移动网络域(接入网、传输网和核心网)创建一个端到端网络实例。理想情况下,每个切片都用特定的网络功能和特性来标识。向终端用户、企业和MVNOs提供专用的端到端网络实例的技术称为“切片”,其中一个网络可以有多个具有不同特征的切片,为不同的用例服务。该技术通过SDN/NFV编排框架实现,该框架为切片提供全生命周期管理,使动态切片(按需实例化和终止切片)具有全服务保证能力。关于SDN/NFV的介绍可以参考我的博客《【SDNvs.NFV】纠缠不清的SDN和NFV》和。。…

  • arping工具使用

    arping工具使用arping工具使用

  • Mac OS 的一点历史: Mac OS, Mac OSX 与Darwin

    作为收购 NeXT 公司的结果,苹果公司获得了 NeXTSTEP 架构中的 Mach 和 Objective-C 等设计

    2021年12月26日
  • python读取excel单元格内容_python把获得的数据放在一个表格里

    python读取excel单元格内容_python把获得的数据放在一个表格里python读取Excel表格文件,例如获取这个文件的数据python读取Excel表格文件,需要如下步骤:1、安装Excel读取数据的库—–xlrd直接pipinstallxlrd安装xlrd库#引入Excel库的xlrdimportxlrd2、获取Excel文件的位置并且读取进来#导入需要读取Excel表格的路径data=xlrd.ope…

发表回复

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

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