Referer原理与图片防盗链实现方法详解

Referer原理

HTTP定义了一个header字段叫做Referer（简写为Referrer），用于指示请求的来源页面，即访问当前页面的前一个页面（所谓的HTTP Referer指的就是这个header字段的值）。常见的应用场景有：统计网站访问来源；防盗链。

在HTTP请求头中，可以使用如下格式传递Referer信息：

Referer: http://example.com/path/to/page.html

当浏览器向服务器发送请求时，会在请求头中加入Referer信息。服务器可以通过解析这条请求头，来确定请求的来源。

图片防盗链实现方法

防盗链指的是在不允许非授权访问的情况下，防止网站被其他网站盗用。图片防盗链的实现方法是基于Referer原理的。具体方法如下：

方法一：通过服务器筛选Referer

服务器配置可以通过判断Referer是否符合某种特定的条件，来决定是否允许访问。常见的条件包括：只允许来自白名单内的网站访问、只允许来自自己网站的请求访问等。具体实现方式可以是在服务器上使用htaccess文件，或者通过代码实现。以下是.htaccess文件配置白名单的示例：

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www.)?example.com [NC]
RewriteRule .*\.(jpg|jpeg|png|bmp|gif)$ - [F]

上述代码表示，如果Referer为空或者Referer不是来自example.com，则返回403 Forbidden状态码，即拒绝访问。

方法二：使用前端JavaScript防盗链

在HTML文件中，使用JavaScript来判断当前页面的Referer，如果不符合条件，则不加载该图片。在HTML中添加以下代码：

<img src="example.jpg" alt="example" id="img">
<script>
    if (document.referrer !== "http://example.com/path/to/page.html") {
        document.getElementById("img").style.display = "none";
    }
</script>

上述代码表示，如果Referer不是来自http://example.com/path/to/page.html，则不显示图片。

示例说明

示例一：防盗链白名单

网站A有一张独家图片，需要在官网上显示，但不希望这张图片被其他网站盗用。因此，网站A在服务器上配置了一个白名单，只允许来自自己官网的请求可以访问这张图片。

示例二：使用JavaScript防盗链

网站B的首页需要显示一张背景图片，但该图片只希望在来自搜索引擎的访问请求中显示，而不希望被其他网站盗用。网站B在HTML文件中添加了JavaScript验证，只有当Referer来自搜索引起发起的请求，才会显示该背景图片。