oss图片防盗实践

发表于 2024-05-06
更新于 2024-05-23
分类于 技术专栏
阅读量 373
字数统计 5731

1、前言

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

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

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

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

2、方案对比

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

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

我们现在的目标是这样:

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

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

3、开始实践

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

3.1、OSS的配置

首先,先将OSS的权限设置为私有,不允许随意访问: image.png

其次配置OSS的防盗链,只允许对应的域名访问: image.png

接着配置原图保护以及触发器: image.png

点击访问设置,弹出原图保护的设置: image.png

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

我们设置一下触发器,保证每次传入新的图片的时候,会自动帮我们处理图片(压缩+打水印) image.png

3.2、设置CDN

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

CDN控制台中新增域名(基于自己买的域名来新增一个二级域名),其中源站信息增加自己的OSS链接: image.png

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

3.2.1、精细化配置CDN

上述配置没问题之后,我们可以看到CDN处于正常运行状态了: image.png

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

3.2.1.1、配置规则引擎

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

3.2.1.2、配置条件源站

在域名管理的基础配置中,找到源站信息的配置,设定对应的源站: image.png

3.2.1.3、配置指定源站回源HOST

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

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

我给的配置是这样的: image.png

如果不配置,那么我访问beijing的bucket的会提示: image.png

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

3.2.1.4、配置HTTPS

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

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

给你申请的用户授权如下权限: image.png

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

image.png

3.2.1.5、CDN访问私有Bucket

配置私有Bucket的回源权限,CDN才可以访问有权限访问我们私有的Bucket: image.png

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

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

3.2.2、配置CDN的访问控制

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

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

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

image.png

上述的配置意义是只有满足对应的规则引擎的条件之下,才会进入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图片防盗实践 的内容有疑问,请在下面的评论系统中留言,谢谢。

网站源码:linxiaowu66 · 豆米的博客

Follow:linxiaowu66 · Github