oss图片防盗实践
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%防盗,只是为了让自己的劳动成果不那么轻易被剽窃而已,如果博客的某些内容对你有启发,想要转载,大可直接留言,让我们一起捍卫前端社区的知识产权。
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 oss图片防盗实践 的内容有疑问,请在下面的评论系统中留言,谢谢。