前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >国产github崩了?是防盗链啦~

国产github崩了?是防盗链啦~

作者头像
用户9899350
发布2022-07-29 20:40:45
6130
发布2022-07-29 20:40:45
举报
文章被收录于专栏:前端私教年年

今天一早打开微信,就看到国产github——gitee崩了。

Issue列表里面全是反馈图片显示异常,仔细一看,原来是图床的防盗链。

场景复现

之前没用过gitee,火速去建了一个账号试验一下。

我在我的gitee中上传一张图片,在gitee本站里面显示是正常的。

右键复制这张图片的地址,放到一个第三方的在线编辑器中,发现图片变成gitee的logo了

什么是防盗链

防盗链不是一根链条,正确的停顿应该是防·盗链——防止其他网站盗用我的链接。

我把图片上传到gitee的服务器,得到了图片的链接,然后拿着这个链接在第三方编辑器中使用,这就是在“盗用”——因为这张图片占用了gitee的服务器资源,却为第三方编辑器工作,gitee得不到好处,还得多花钱。

如何实现防盗链

要实现防盗链,就需要知道图片的请求是从哪里发出的。可以实现这一功能的有请求头中的originrefererorigin只有在XHR请求中才会带上,所以图片资源只能借助referer。其实gitee也确实是这么做的。

通过判断请求的referer,如果请求来源不是本站就返回302,重定向到gitee的logo上,最后在第三方网站引用存在gitee的资源就全变成它的logo了。

可以在开发者工具中看到第三方网站请求gitee图片的流程:

  1. 首先请求正常的图片,但是没有返回200,而是302重定向,其中响应头中的location就是要重定向去向的地址;
  2. 接着浏览器会自动请求这个location,并用这个返回结果代替第一次请求的返回内容;

最后,我们的图片在第三方网站就变成gitee的logo了。

如何破解防盗链

想让gitee不知道我在盗用,就不能让他发现请求的来源是第三方,只要把referer藏起来就好,可以在终端尝试这段代码:

代码语言:javascript
复制
curl 'https://images.gitee.com/uploads/images/2022/0326/155444_dc9923a4_10659337.jpeg' \
 -o noReferer.jpg 

这段👆代码的意思是请求这张jpg图片资源,把返回结果以noReferer.jpg这个名称保存在当前目录下,并且没有带上referer,测试结果是图片正常保存下来了。

就像加上了gitee本站的referer一样可以正常请求👇:

代码语言:javascript
复制
curl 'https://images.gitee.com/uploads/images/2022/0326/155444_dc9923a4_10659337.jpeg' \
 -H 'referer: https://gitee.com' \
 -o fromGitee.jpg

而在第三方网站请求的效果就像这段👇代码

代码语言:javascript
复制
curl 'https://images.gitee.com/uploads/images/2022/0326/155444_dc9923a4_10659337.jpeg' \
  -H 'referer: https://editor.mdnice.com/' \
  -o otherReferer.png

带上了第三方网站的标识https://editor.mdnice.com最终无法正常下载。

gitee做的不够完善吗

测试完上面的三段代码,不知道你会不会疑惑,gitee为什么不把“请求来源不能是第三方网站”的策略改成“请求来源必须是本站点”呢?换句话说,控制referer不能为空,只要是空就重定向。

因为在浏览器的地址栏中直接输入这个图片的url,然后回车,发起的请求是没有referer字段的,在这种场景下如果还是返回gitee的logo,就显得不太合理了。

图片的url:https://images.gitee.com/uploads/images/2022/0326/155444_dc9923a4_10659337.jpeg

图片看不到了,现在怎么办

如果你的个人搭建的博客里面用了很多存在gitee的图片,你可以在html的head部分加上这样一行

代码语言:javascript
复制
<meta name="referrer" content="no-referrer" />

或者

代码语言:javascript
复制
<img referrer="no-referrer|origin|unsafe-url" src="{item.src}"/>

来阻止请求因带上站点来源而被重定向成gitee的logo。

如果你是博客的访问者,可以借助一个chrome小插件ModHeader,把referer给“擦掉”

这样第三方站点就可以正常访问啦~

结语

上面提到的解决方式只是开个玩笑,临时恢复使用可以。但还是要慢慢把图片迁移到自己的服务器才最可靠。

如果觉得这篇文章对你有帮助,给我点个赞呗~这对我很重要

点个在看更好!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-03-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端私教年年 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 场景复现
  • 什么是防盗链
  • 如何实现防盗链
  • 如何破解防盗链
    • gitee做的不够完善吗
    • 图片看不到了,现在怎么办
    • 结语
    相关产品与服务
    云开发 CLI 工具
    云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档