前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

xuxueli 发布于2019-08-23 18:01 / 2078人阅读

摘要：具体问题，就是中通过标签引入一个第三方的图片地址，报。解决方案如原网址显示此图片来自微信公众平台，未经允许不得应用方法在标签里加这样存在第三方网站上的图片，在你的网站上就可以访问了。

问题

笔者网站的图片都是上传到第三方网站上的，比如简书、掘金、七牛云上的，但是最近简书和掘金都开启了 防盗链，防止其他网站访问他们网站上的图片了，导致笔者的网站存在他们网站上的图片全挂了。

具体问题，就是 html 中通过 img 标签引入一个第三方的图片地址，报 403 。但是这个图片地址直接复制出来在地址栏打开，却是看得到的。

原因

官方输出图片的时候，判断了来源 Referer ，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么 Referer 就是：你的网站地址；

如果我们的网站地址不在官方的白名单内，所以就看不到图片了。

我们做这个跳板的关键：不发送 Referer，也就是没有来源。那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。

解决方案

如原网址：

http://mmbiz.qpic.cn/mmbiz/DU...

显示此图片来自微信公众平台，未经允许不得应用

方法：在标签里加 meta

这样存在第三方网站上的图片，在你的网站上就可以访问了。

referrer

在某些情况下，出于一些原因，网站想要控制页面发送给 server 的 referrer 信息的情况下，可以使用这一 referer metadata 参数。

参数

referer 的 metedata 属性可设置 content 属性值为以下集合：

never

always

origin

结果

如果 referer-policy 的值为 never：删除 http head 中的 referer；

如果 referer-policy 的值为 default：如果当前页面使用的是 https 协议，而正要加载资源使用的是普通的 http 协议，则将 http header 中额 referer 置为空；

如果 referer-policy 的值 origin：只发送 origin 部分；

如果 referer-policy 的值为 always：不改变 http header 中的 referer 的值；

举例

如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：

如果页面中包含了如下 meta 标签，则从当前页面中发起的 http 请求将只携带 origin 部分：

最后

博客首更地址：https://github.com/biaochenxuying/blog

往期精文

尤雨溪 6 月 4 日的 Vue 技术分享

[今天尤雨溪公布Vue 3.0重大变化！前端框架将何去何从？[附完整PPT]](https://mp.weixin.qq.com/s/fL...

十分钟弄懂：数据结构与算法之美 - 时间和空间复杂度

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

Vue + TypeScript + Element 项目实战及踩坑记

vue-cli3.x 新特性及踩坑记

那些必会用到的 ES6 精粹

参考文章：

微信图片防盗链解决办法

Meta referrer标签的简要介绍

欢迎关注以下公众号 全栈修炼，学到不一样的武功秘籍！

关注公众号并回复福利可领取免费学习资料，福利详情请猛戳：免费资源获取--Python、Java、Linux、Go、node、vue、react、javaScript

服务器托管云服务器 html图片兼容问题防盗链图片破解防盗链图片图片文件防盗链

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104538.html

php伪造Referer请求反盗链资源

摘要：反盗链分类我们了解了盗链对源站的危害后，自然要通过一些手段来阻止这种行为维护自己的利益。参考文章百科盗链防盗链伪造防盗链有些产品为了防止自己的产品被盗链访问，会采用反盗链措施，如封闭型生态的音乐网站和视频网站，他们已经为了版权付费，自然不希望你免费使用他们的资源。但因为很多人专门研究盗链，因此我们也需要了解下盗链、反盗链和逃避反盗链的原理。盗链引用百度百科对盗链的定义：盗链是指...

chenatu 2019-07-01 11:14 评论0 收藏0
php伪造Referer请求反盗链资源

摘要：反盗链分类我们了解了盗链对源站的危害后，自然要通过一些手段来阻止这种行为维护自己的利益。参考文章百科盗链防盗链伪造防盗链有些产品为了防止自己的产品被盗链访问，会采用反盗链措施，如封闭型生态的音乐网站和视频网站，他们已经为了版权付费，自然不希望你免费使用他们的资源。但因为很多人专门研究盗链，因此我们也需要了解下盗链、反盗链和逃避反盗链的原理。盗链引用百度百科对盗链的定义：盗链是指...

Drinkey 2019-07-25 14:38 评论0 收藏0
解决图片防盗链的问题

摘要：在页面中添加标签在中表示请求地址来源，一般网站后台在设置图片防盗链时就是通过判断请求头中的来判断该条请求是否是本网站域名发起的请求，如果不是的话就拦截请求我们上述的设置含义代表在发送请求的时候删除掉请求头中的信息，如果网站没有设置应对空也做在页面中添加meta标签 referer在http中表示请求地址来源，一般网站后台在设置图片防盗链时就是通过判断http请求头中的referer...

Blackjun 2019-08-02 14:17 评论0 收藏0
PHP面试之二：高并发与大数据

摘要：三态分别是就绪运行阻塞进程的五态模型在三态的基础上发展而来新建态运行态终止态就绪态等待态线程称之为轻量级的进程，程序执行流的最小单元。一个进程下有多个线程来完成不同的工作称之为多线程。 web资源防盗链盗链是什么？为什么要防？在自己页面上显示一些不是自己服务器的资源（图片、音频、视频、css、js等）由于别人盗链你的资源会加重你的服务器负担，所以我们需要防止可能会影响统计防盗链...

Ashin 2019-07-01 12:23 评论0 收藏0
以Referer方案写一个图片防盗链服务并实现网页端"破解"

摘要：在同等安全级别的情况下，发送文件的源作为引用地址，但是在降级的情况下不会发送。什么是盗链资源不在自己服务器上, 而通过技术手段, 把资源放置到自己的网站中, 通过这种方法盗取他人的资源. 什么是Referer Referer是http请求header的一部分, 当浏览器(或者模拟浏览器行为)向web服务器发送请求的时候，头信息里有包含 Referer. 它表示当前接口的访问来源...

sPeng 2019-08-26 12:10 评论0 收藏0