如何解决图片防盗链问题

需求

如何解决图片防盗链问题。具体例子，比如我们想引用其他网站的一个图片，但是在我们的网上上就没办法显示，这个是为什么呢？就是因为这个图片有防盗链功能，禁止了其他外部来源的引用，非常的头疼，我们必须一个一个的保存到本地，然后引用。非常的麻烦，如何解决呢？

什么是图片防盗链

图片防盗链，也被称为热链保护，是一种网络安全技术。它主要用于防止网络资源（如图片、视频等）被未经授权的第三方网站引用。其工作原理主要是通过检查HTTP请求头中的Referer字段。当用户通过浏览器访问一个网页时，如果这个网页中的图片或其他资源链接到另一个网站，浏览器会发送一个HTTP请求到那个网站获取图片或资源。在这个HTTP请求的头部信息中，会包含一个Referer字段，这个字段的值通常是请求发起的网页的URL。因此，图片服务器可以通过检查Referer字段来判断请求是否来自被授权的网站。如果Referer字段的值不在被授权的列表中，那么图片服务器可以拒绝提供图片，这样就能防止图片被未经授权的网站引用。但请注意，虽然防盗链技术可以有效地保护网络资源，但是它不是绝对安全的，因为HTTP请求头部中的Referer字段可以被修改。此外，使用防盗链技术可能会对正常用户的体验产生影响。

解决办法

防盗链的根本原因是请求的地址上有一个Referer参数，对方会根据这个参数来判断你的请求来源，然后把你禁用掉，其实上我们不携带者参数就好了，但是这个参数默认是携带的。

在网站上引用设置了防盗链的图片，如果你不想让浏览器传递Referer参数，有几种方法可以尝试：

使用meta标签：在你的HTML文件的标签内加入这样一行代码，这将影响到整个页面的所有请求：

这个标签会告诉浏览器不要发送Referer头部。

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

使用rel属性：在你的标签中加入rel=”noreferrer”属性，这样只影响该图片的请求：

注意：这个属性有可能不生效

<img src="image_url" rel="noreferrer">

请注意，这些方法可能并不总是有效，因为防盗链的实现方式各不相同，有些图片的链接可能会检测到你在尝试绕过防盗链设置而拒绝提供服务。

测试

就拿这个图片来说。 https://w1.hoopchina.com.cn/images/pc/old/favicon.ico

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="https://w1.hoopchina.com.cn/images/pc/old/favicon.ico" alt="">
</body>
</html>

默认是不出来的。加上 meta 之后就出来了

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

总结

其实上解决图片防盗链这个问题，我个人觉得没有一个比较好的解决办法，如果采用了第一种的方法，那么就意味着所有的网站都取消掉了Referer参数，这个是我们不愿意看到的。如果采用了第二个方法的话，一个是需要每个都加这个参数麻烦，二是有可能别人的防盗规则并不是你不携带就OK的，有可能是你需要携带对方网站的Referer参数，所以说，方案并不是很完美。

如果你有好的方案，也可以评论区说一下。