豆米的博客

1、前言

老实说，之前我也不怎么关注自己的网站图片是否被人引用，直到发现了我的文章被人引用并且图片的来源都被篡改了：

这个时候我慌了，之前我设置的图片都是公开读的，顶多在图片链接上加个水印的样式，现在好了，图片不仅被盗，水印也被消失了。会不会有人来偷跑我的oss的流量呀？于是，我琢磨了许久阿里云的功能，终于找到了一些门路。

本篇文章只能增加盗用图片的成本，没法完完全全阻挡住图片被盗用的风险，尤其如果对方是技术人员。

该解决方案针对的是阿里云OSS，其他云厂商大差不差，思路都是差不多

2、方案对比

目前纵观阿里云提供的方案，可行的有两个：

方案	优点	缺点
使用OSS的原图保护	1. 简单方便，无须预先处理水印，可以实时添加水印 2. 保护原图，不带样式的链接请求一律无法访问	1. 只能使用OSS提供的简单的权限处理能力 2. 无法完全限流，即使加上防盗链的域名白名单，打开个空标签页，也能够下载
使用CDN	1. 有更加丰富的权限管控机制，可以利用规则条件进行差异化访问限制	1. CDN和OSS的原图保护无法一起使用，所以要想图片都进行打水印的话，只能使用OSS的触发器，上传完图片之后进行水印处理，生成新的图片放到另外一个目录下，这样就造成了存储的空间的浪费
	2. 整体流量费用更低	2. HTTPS的访问需要根据访问量进行计费，所以就会多存在额外的两个计费项：HTTPS访问次数与图片处理次数，因此在意存储容量以及流量的就不大适合
	3. 可以利用CDN的缓存机制，减少OSS的流量

我们现在的目标是这样：

只允许blog.5udou.cn和微信公众号两个网站直接访问我们的图片，禁止一切空的referer访问(除了obsidian和picGo这两个软件)
所有图片都默认打上水印，结合obsidian和picgo两个软件，实现无缝舒心写文章；

为了实现上述目标，很明显，CDN的方案更加贴近我们想要的。于是我们开搞。

3、开始实践

首先我们先处理OSS的配置。

3.1、OSS的配置

首先，先将OSS的权限设置为私有，不允许随意访问：

其次配置OSS的防盗链，只允许对应的域名访问：

接着配置原图保护以及触发器：

点击访问设置，弹出原图保护的设置：

这样就实现了第一步图片的保护措施。

我们设置一下触发器，保证每次传入新的图片的时候，会自动帮我们处理图片（压缩+打水印）

3.2、设置CDN

CDN的使用比较复杂，中间也踩了一些坑，这里将完整的步骤列举一下，也方便有需求的同学参考。

在CDN控制台中新增域名（基于自己买的域名来新增一个二级域名），其中源站信息增加自己的OSS链接：

配置域名的同时，阿里云会要求你到自己管理的域名下验证，需要增加两个映射，一个测试的，一个是CNAME的：

3.2.1、精细化配置CDN

上述配置没问题之后，我们可以看到CDN处于正常运行状态了：

然后我们进入该域名的管理界面，因为我们的场景是一个CDN域名解决所有私有OSS的访问，因此我们需要先配置条件源站：

3.2.1.1、配置规则引擎

规则引擎的作用，是对流量进行分桶，如果满足我们设定的规则，才会进入我们的设置，因此我们需要配置一定的规则，对流量进行分流，否则会出现找不到对应图片的问题：根据自己的条件，新建对应的配置（新建两条规则分别对应两个OSS）

3.2.1.2、配置条件源站

在域名管理的基础配置中，找到源站信息的配置，设定对应的源站：

3.2.1.3、配置指定源站回源HOST

因为我们默认的源站Host是hangzhou的bucket，因此需要配置一些额外的制定信息（老实说，这里的配置我也没搞太懂，最后问了阿里云的售后的），这个功能官网给的含义是这样的：

指定源站回源HOST功能可以给多个不同的源站配置各自独立的回源HOST，也可以将所有源站的回源HOST设置为相同值或者跟随源站地址。默认回源HOST配置、指定源站回源HOST配置作用于同一个源站的时候，最终生效的是指定源站回源HOST配置。

我给的配置是这样的：

如果不配置，那么我访问beijing的bucket的会提示：

一看提示，就知道回源到错误的bucket了。

3.2.1.4、配置HTTPS

以前直接访问OSS的话，默认aliyun.com就是HTTPS的，现在换成自己的域名了，就需要给这个新域名加上https，索性社区有对应的一站式配置解决方案，这里我使用了：letsencrypt-aliyun-cdn的docker，只需要部署到我的ECS服务器即可，还能够自动帮我续SSL证书的有效期，简直不能再完美了~

只是里面有两个需要搞清楚，第一个：新建一个RAM用户，专门来处理https的证书和DNS更新的问题，第二个：上述开源包给的例子是dnspod，而我们这里使用的alidns，所以起docker的命令不一样。

给你申请的用户授权如下权限：

起docker的命令改成如下：

1docker run -e ACCESS_KEY_ID='自己的Key' \
2  -e ACCESS_SECRET='自己的Secret' \
3  -e DOMAINS='blogimage.5udou.cn' \
4  -e EMAIL='linguang661990@126.com' \
5  -e DNS_TYPE='alidns' \
6  -e ALICLOUD_ACCESS_KEY='自己的Key' \
7  -e ALICLOUD_SECRET_KEY='自己的Secret' \
8  daxingplay/letsencrypt-aliyun-cdn

涉及到Ubuntu下安装Docker的命令可以参考这篇文章：https://docker_practice.gitee.io/install/ubuntu.html；

3.2.1.5、CDN访问私有Bucket

配置私有Bucket的回源权限，CDN才可以访问有权限访问我们私有的Bucket：

至此，CDN的基础配置完成。接下去就是配置该CDN域名的访问权限了。

上述的配置可能需要你时不时去阿里云的RAM以及IMM配置一些权限以及授权，照着阿里云的提示做即可。

3.2.2、配置CDN的访问控制

前面说了，该CDN不让随意访问，因此我们需要对齐进行限制，限制的条件就是这么几个：

不允许空的referer访问该CDN，这个可能会影响一些爬虫；
只允许一些白名单的referer访问
允许我自己定义的一些请求头访问，为了让obsidian或者picgo可以看到图片

因此我结合规则引擎，进行了访问控制的配置，为了保密，里面的一些规则就不透出了，里面还考虑到微信公众号平台对于图片的使用：

上述的配置意义是只有满足对应的规则引擎的条件之下，才会进入Referer防盗链的判断，因此上述的配置能够满足我们刚才的目标。

至此CDN的配置结束。

3.3、配合Obsidian和PicGO打造舒适的写作环境

因为我用obsidian来做自己的笔记系统，使用苹果iCloud作为数据同步，之前图片都是存储在本地的，然后文章发表的时候，还得上传到OSS，非常麻烦。因此看到社区有对应的一些解决方案，于是就实践了一把：

下载PicGO：https://github.com/Molunerfinn/PicGo/releases

下载image-auto-upload-plugin：obsidian-image-auto-upload-plugin

之后写文章的时候，贴个截图就会自动帮我上传到OSS上，甚是方便~

3.4、对博客的页面访问做限制

下面的操作只是为了对图片的获取增加成本，没有100%拦截。

首先禁止打开右键，因为右键打开意味着可以毫不费劲的获取到图片资源：

1document.oncontextmenu = () => false;

其实禁止打开控制台（只禁用F12，其实还是有别的快捷键进入的）

1document.onkeydown = (event) => {
2  if (event.key === "F12") {
3	event.preventDefault();
4  }
5};

4、最后

最后说一句，图片的防盗不是目的，而且本身这些措施也并不能100%防盗，只是为了让自己的劳动成果不那么轻易被剽窃而已，如果博客的某些内容对你有启发，想要转载，大可直接留言，让我们一起捍卫前端社区的知识产权。

oss图片防盗实践