图片防盗链问题

一个空杯

已于 2022-04-25 16:14:25 修改

阅读量1.3k

点赞数

于 2022-04-25 16:12:58 首次发布

本文链接：https://blog.csdn.net/weixin_48290187/article/details/124400855

版权

前端

HTTP Referer字段提供了用户访问来源信息，但在隐私和安全方面引发关注。本文介绍了如何通过ReferrerPolicy控制这一行为，如设置no-referrer、origin等策略，以及在HTML标签中应用，确保既能引用图片又保护用户隐私。同时，讨论了ReferrerPolicy的使用方法，包括HTTP头信息、标签设置和元素属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景：日常工作中引用一些网站的图片，但是由于这些网站的图片采用防盗链规则，直接引用图片不会展示。
原因：服务器会先判断请求头中的信息，如果请求头中有Referer信息，然后根据自己的规则来判断Referer头信息是否符合要求，Referer 信息是请求该图片的来源地址。不符合要求时，图片无法展示。
因此，若不发送Referer，也就是没有来源。那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。
解决方式：
在header标签添加：

 <meta name="referrer" content="no-referrer" />

加一行这个在html中，请求头不发送referrer，但是如果使用了百度统计，百度统计就会失效。
解决办法是，单独给img或者a标签加 referrerPolicy=“no-referrer”

 <img  referrerPolicy="no-referrer"  />

补充
Referrer介绍
HTTP Referer是header的一部分，提供访问来源的信息。当浏览器向web服务器发出请求的时候，一般会带上Referer,告诉服务器用户从哪个页面连接过来的，服务器借此可以获得一些信息用语处理。
注意： Referer 的正确英语拼法是referrer 。由于早期HTTP规范的拼写错误，为了保持向后兼容就将错就错了。其它网络技术的规范企图修正此问题，使用正确拼法，所以目前拼法不统一。还有它第一个字母是大写。
在这里插入图片描述
Referer 的发生场景
浏览器向服务器请求资源的时候，Referer字段的逻辑是这样的，用户在地址栏输入网址，或者选中浏览器书签，就不发送Referer字段。
主要是以下三种场景，会发送Referer字段。

用户点击网页上的链接。
用户发送表单。
网页加载静态资源，比如加载图片、脚本、样式。

<!-- 加载图片 -->
<img src="foo.jpg">
<!-- 加载脚本 -->
<script src="foo.js"></script>
<!-- 加载样式 -->
<link href="foo.css" rel="stylesheet">

上面这些场景，浏览器都会将当前网址作为Referer字段，放在 HTTP 请求的头信息发送。
浏览器的 JavaScript 引擎提供document.referrer属性，可以查看当前页面的引荐来源。注意，这里采用的是正确拼写。
扩展
Referrer Policy 的值
rel属性只能定制单个元素的Referer行为，而且选择比较少，只能发送或不发送。W3C 为此制定了更强大的 Referrer Policy。

Referrer Policy 可以设定8个值。
（1）no-referrer
不发送Referer字段。
（2）no-referrer-when-downgrade
如果从 HTTPS 网址链接到 HTTP 网址，不发送Referer字段，其他情况发送（包括 HTTP 网址链接到 HTTP 网址）。这是浏览器的默认行为。
（3）same-origin
链接到同源网址（协议+域名+端口都相同）时发送，否则不发送。注意，https://foo.com链接到http://foo.com也属于跨域。
（4）origin
Referer字段一律只发送源信息（协议+域名+端口），不管是否跨域。
（5）strict-origin
如果从 HTTPS 网址链接到 HTTP 网址，不发送Referer字段，其他情况只发送源信息。
（6）origin-when-cross-origin
同源时，发送完整的Referer字段，跨域时发送源信息。
（7）strict-origin-when-cross-origin
同源时，发送完整的Referer字段；跨域时，如果 HTTPS 网址链接到 HTTP 网址，不发送Referer字段，否则发送源信息。
（8）unsafe-url
Referer字段包含源信息、路径和查询字符串，不包含锚点、用户名和密码。
在这里插入图片描述
Referrer Policy 的用法
Referrer Policy 有多种使用方法。
（1）HTTP 头信息
服务器发送网页的时候，通过 HTTP 头信息的Referrer-Policy告诉浏览器。

Referrer-Policy: origin

（2）标签
也可以使用标签，在网页头部设置。

<meta name="referrer" content="origin">

（3）referrerpolicy属性
a、area、img、iframe和link标签，可以设置referrerpolicy 属性。

<a href="..." referrerpolicy="origin" target="_blank">xxx</a>

——————————
相关文章
https://blog.csdn.net/java_zhangshuai/article/details/81627365
http://www.ruanyifeng.com/blog/2019/06/http-referer.html