什么是盗链

资源不在自己服务器上, 而通过技术手段, 把资源放置到自己的网站中, 通过这种方法盗取他人的资源.

什么是Referer

Referer是 http请求 header的一部分, 当浏览器(或者模拟浏览器行为)向 web服务器发送请求的时候，头信息里有包含 Referer. 它表示当前接口的访问来源. Referer的正确英语拼法是 referrer. 由于早期 http规范的拼写错误, 为了保持向后兼容就将错就错了. 其它网络技术的规范企图修正此问题, 使用正确拼法, 所以目前拼法不统一.

为什么要设置防盗链

防爬虫(流量暴涨, 服务提供者却是受害者)
安全

如何设置防盗链

此处以基于 express的二次开发框架 nestjs起一个小demo

你完全可以用token验证等方法去实现更严格的防盗链

...(如何添加路由等等就不说了, 有兴趣直接去看看我的代码, 直接跳到验证器的路由代码去)

routers/doorChain/controller.ts

import express from 'express';
import { Get, Headers, Res, Controller } from '@nestjs/common';
import { DoorChainService } from './service';

@Controller('door-chain')
export class DoorChainController {
    constructor(private readonly doorChainService: DoorChainService) {}

    @Get()
    root(@Headers('referer') referer: string, @Res() res: express.Response) {
        return this.doorChainService.root(referer, res);
    }
}

routers/doorChain/service.ts

import * as url from 'url';
import * as path from 'path';
import express from 'express';
import { Injectable } from '@nestjs/common';
import logger from 'utils/logger';

@Injectable()
export class DoorChainService {
    root(referer: string, res: express.Response) {
        let imageName = 'break.png';
        if (!referer) {
            imageName = 'yellow.png';
        } else {
            try {
                const refererParsed = url.parse(referer);
                if (refererParsed.host === 'localhost:8080') {
                    imageName = 'yellow.png';
                }
            } catch (err) {}
        }
        const imagePath = path.resolve(__dirname, `./../../assets/${imageName}`);
        res.sendFile(imagePath, null, err => {
            if (err) {
                logger.error(err);
                res.status(404).end();
            } else {
                logger.info(`Sent: ${imagePath}`);
            }
        });
    }
}

主要的逻辑代码就那么几行!

验证的基本思路:

当referer为空时, 返回正确的图
当referer不为空, 且host命中我的目标网站时, 返回正确的图
当referer不为空, 但host未能命中我的目标网站时, 返回错误的图

启动服务, 访问http://localhost:3333/door-chain, 返回正确的图!!!

如何去掉访问限制

这次我们仅讨论怎么在网页端去掉访问的限制, 另外还有七牛镜像储存, 或者把实现方案交由服务端处理等等都是可以的, 而且原理都是一样, 这里不一一赘述.

以下简述去掉header中的Referrer的两种方法:

添加name为referrer, content为never(whatwg标准, 兼容性相对较好)或no-referrer(MDN标准)的meta标签

策略名称	属性值(MDN标准)	属性值(whatwg标准)
No Referrer	no-referrer	never
No Referrer When Downgrade	no-referrer-when-downgrade	default
Origin Only	origin	-
Origin When Cross-origin	origin-when-crossorigin	-
Unsafe URL	unsafe-url	always

无论选择哪一个值, 都有一个缺点, 就是默认情况下全部资源(包括接口)都被处理了

对标签添加ReferrerPolicy属性

更精确的指定了某一个资源的referrer策略

相对以上的值列表, ReferrerPolicy在此基础上扩展了三个可供选择的值:
- same-origin 对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。
- strict-origin 在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。
- strict-origin-when-cross-origin 对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)。

如果在纯粹开发的角度上, 这个方式是接近完美的, 因为没有污染到其他任何东西. 再来看看浏览器兼容性方面:

常规值的问题也不大.

新扩展的三个值的兼容性图

有点不容乐观啊!

关于扩展img标签属性

在tsx中img标签默认是不支持referrerPolicy的, 实现方案可以参考ts-react-webpack, 查看我是如何扩展的, 欢迎来踩!!!

当然了, 虽然常用的会是类似上述的方案, 总的来说, 这里只是防盗链知识体系中的凤毛麟角, 仍有待探索.

此外还有referrer-killer等等的项目可以参阅

以Referer方案写一个图片防盗链服务并实现网页端"破解"