前端图片＜img＞、链接＜a＞等去除referer标记，绕过防盗链-前端开发-阁主学习小站

摘要：

工作太忙，近一年没更新文章了，今天水一篇笔记。长话短说看正文！

## 引入
  在页面调用图片等其它资源时，或者发生页面跳转时，都会向服务端发生一个带Referrer的HTTP请求，这也是一些网站做防盗链的抓手，在Referrer Policy策略发面前，浏览器可以按自己的默认规则来决定是否加上Referrer。所以解决原理就是img、a这类标签有自带的参数可以解决请求资源地址的时候不带referer请求头。
![默认是带着我们的referer.png](https://www.mainblog.cn/zb_users/upload/2024/07/202407170950513881857.png "默认是带着我们的referer.png")
## 方法一
第一种方法比较适合img标签少的情况，只需要在我们的img标签里添加下图的参数即可：referrerpolicy="no-referrer"
![添加参数](https://www.mainblog.cn/zb_users/upload/2024/07/202407170959307645919.png "添加参数")
## 方法二
第二种方法适合页面非常多第三方资源的情况，通常直接添加meta标签达到相同效果，这个标签设置后是可以一劳永逸的。
```html
<meta name="referrer" content="no-referrer" />
```
![](https://www.mainblog.cn/zb_users/upload/2024/07/202407171011001444265.png)
## 参考文章
前人栽树，后人乘凉，列出本文学习参考的第三方文章！
- [Referrer Policy](https://blog.csdn.net/qq_43072399/article/details/135820693 "Referrer Policy")
- [http请求中的Referrer-Policy策略详解、Nfs动态添加扩展服务器以及共享目录的操作及nfs平滑重启](https://blog.csdn.net/weixin_47792780/article/details/137176140 "http请求中的Referrer-Policy策略详解、Nfs动态添加扩展服务器以及共享目录的操作及nfs平滑重启")
- [图片＜img＞、链接＜a＞等去除referer标记](https://blog.csdn.net/lovewebeye/article/details/115616841 "图片＜img＞、链接＜a＞等去除referer标记")

本文地址：https://www.mainblog.cn/341.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。