https访问http加载不出图片_前端解决第三方图片防盗链的办法
作者:biaochenxuying
转发链接:https://github.com/biaochenxuying/blog/issues/31
问题
笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了。
具体问题,就是 html 中通过 img 标签引入一个第三方的图片地址,报 403 。但是这个图片地址直接复制出来在地址栏打开,却是看得到的。
原因
官方输出图片的时候,判断了来源 Referer ,就是从哪个网站访问这个图片,如果是你的网站去加载这个图片,那么 Referer 就是:你的网站地址;
如果我们的网站地址不在官方的白名单内,所以就看不到图片了。
我们做这个跳板的关键:不发送 Referer,也就是没有来源。那么官方那边,就认为是从浏览器直接访问的,所以就能加载正常的图片了。
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 部分:
解决方案
初步方案
- 在 标签里加 meta,referrer 的 content 设置为 nerver
这样存在第三方网站上的图片,在你的网站上就可以访问了。
但是还有一个问题,就是如果你的网站需要发送你的网站地址的,那上面的的设置就不行了,比如:用到了百度统计。
那上面的设置会导致百度统计的代码加载不了,因为它需要发送你的网站地址给百度统计。
既要不发送 你的网站地址,又要发送你的网站地址,那么怎么办呢 ?
最终的解决方案
- 先在 html 上设置 referrer 为 always
这样之后,首屏加载的时候,加载了百度统计的代码了,能正常统计访客数据了。
- 不需要网站地址的时候,再把 referrer 设置为 nerver
加个延时 setTimeout 再把 referrer 的 content 值设置为 nerver 。或者 在有图片的地方再把 referrer 的 content 值设置为 nerver 。
const referrer = document.getElementById("referrer");referrer.setAttribute("content", "never")
这样就能解决第三方图片防盗链,又能用到百度统计了。
最后
希望:大家不要恶意盗用、滥用第三方的 CDN 资源行为。
比如:掘金 CDN 本是一件公益性质的社区服务,为便大家在自己的技术博客中使用掘金 CDN 的图片,并没有开启防盗链。
但是就是因为某些人恶意盗用、滥用第三方的 CDN 资源,所以掘金社区不得不开启防盗链来减少损失和规避风险 https://juejin.im/post/5cefb6a3f265da1b95703b9d
作者:biaochenxuying
转发链接:https://github.com/biaochenxuying/blog/issues/31
https访问http加载不出图片_前端解决第三方图片防盗链的办法相关推荐
- 解决问题https访问http加载不出图片资源的顺便在给逻辑做个马杀鸡
- 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题
问题 笔者网站的图片都是上传到第三方网站上的,比如 简书.掘金.七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了. 具体问题 ...
- Glide加载不出图片
Glide加载不出图片 使用Glide之后加载不出图片,需要在你的AndroidManifest.xml中添加网络权限 添加完图片如果还是显示不出来还需要在 AndroidManifest.xml里面 ...
- 解决GitHub加载不出图片问题
解决GitHub加载不出图片问题 参考文章: (1)解决GitHub加载不出图片问题 (2)https://www.cnblogs.com/jooy/p/12090882.html 备忘一下.
- Node 本地网站服务器网页加载不出图片的解决方法
文章目录 前言 遇到的问题 源代码 前言 最近在自学 Node.js 准备入门前端 在用 Node 配置本地网站服务器的时候连上了自己期末的前端综合实验设计的作业 遇到了一些问题来记录一下. 遇到的问 ...
- 小程序预览加载不出图片
小程序预览加载不出图片 比如在开发者工具做了一个swiper轮播图 <view> <swiper indicator-dots="true" indicator- ...
- pyecharts加载不出html图片,已解决
Pyecharts加载html文件慢 一.问题描述 二.问题解决 step1: 找提速链接 step2:替换 一.问题描述 最近在学pyecharts,以下是我搬来的一个小例子: from pyech ...
- zeplin加载 不出图片_为什么Zeplin不能解决您的所有问题
zeplin加载 不出图片 Design handover involves communicating the visual styles and behaviours of your design ...
- Mac系统解决Github图片加载不出问题
文章目录 1. 问题出现原因 2. 如何解决 第一步 第二步 第三步 3.总结 1. 问题出现原因 主要是因为DNS系统解析不了此连接对应ip的域名了 2. 如何解决 第一步 在加载不出的图片右键,点 ...
最新文章
- 关于bind1st和bind2nd
- Java8 Lambda 表达式
- 通过Dapr实现一个简单的基于.net的微服务电商系统
- java日志系统_Java日志系统
- java代码ftp重命名未生效_java实现FTP远程文件移动(重命名、复制、拷贝) | 学步园...
- (46)Xilinx ILA IP核配置(七)(第10天)
- HTTP 如何传输大文件
- Error:To install them, you can run: npm install --save vue-style-loader css-loader……
- Illustrator矢量图形软件2022Mac版
- double im2double mat2gray之一二说
- java 中使用_java中运算符的使用方法
- CentOS7.0系统安全加固实施方案
- python battleship_Python 入门教程 12 ---- Battleship!-阿里云开发者社区
- Android教父高焕堂谈Android“开源”与“兼容”
- 4g网络设置dns地址_上网速度慢,修改一下win10系统的DNS设置,网速飙升
- 爬虫练习:爬取网易云音乐热歌榜全部歌曲的热门评论
- STM32高级开发(15)-使用eclipse开发STM32
- centos7常用命令与环境安装
- c++中sprintf和sprintf_s的区别
- 2023年法定节假日配置Mysql
热门文章
- collections求和方法_java集合求和最大值最小值示例分享
- python异常数据处理_Python爬虫提高之异常处理
- 全球仅3000人通过的TensorFlow开发人员认证到底有多香!
- 史上最大多模态图文数据集发布!
- 阿里P8架构师谈:MySQL数据库的索引原理、与慢SQL优化的5大原则
- 论文浅尝 | 一种基于递归超图的知识图谱问答方法
- 论文浅尝 | 混合注意力原型网络的含噪音少样本的关系分类
- 论文浅尝 | 远程监督关系抽取的生成式对抗训练
- 华为算法工程师-2020届实习招聘题
- 【TensorFlow】优化方法optimizer总结(SGD,Adagrad,Adadelta,Adam,Adamax,Nadam)解析(十三)