html图片指定refere,前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题...
问题
笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了。
具体问题,就是 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 资源,所以掘金社区不得不开启防盗链来减少损失和规避风险 juejin.im/post/684490…。
参考文章:
html图片指定refere,前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题...相关推荐
- 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题
问题 笔者网站的图片都是上传到第三方网站上的,比如 简书.掘金.七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了. 具体问题 ...
- https访问http加载不出图片_前端解决第三方图片防盗链的办法
作者:biaochenxuying 转发链接:https://github.com/biaochenxuying/blog/issues/31 问题 笔者网站的图片都是上传到第三方网站上的,比如 简书 ...
- js实现图片虚化_Web前端之高斯模糊图片记
题记 前端需求之高斯模糊图片 最近工作中有一个需求,客户提交图片,服务器根据图片生成内容,并将内容显示,要求高斯模糊处理用户的图片并作为作品展示的背景,类似于苹果设备上的高斯模糊背景.用户提交的图片分 ...
- 图片防外盗解决方法(微博访问图片资源403问题),图片打不开显示不全
经过查询分析与提交get请求的header referer信息有关 先说下解决方法: 在HTML源代码的head中添加一句<meta name="referrer" cont ...
- unity如何实现图片透视_如何用nginx实现防盗链?保护网站图片、视频。
什么是防盗链? 有时候,当我们在网站上浏览图片时会遇到图片打不开,并看到提示:"403权限禁止".这可能是正在浏览的这个网站用到的图片在盗用别的网站图片,而被盗用的网站采用了防盗链 ...
- Nginx设置Laravel项目中图片防盗链以及禁止地址栏直接访问图片
我的个人博客:逐步前行STEP 为了防止图片盗用,禁止外链以及禁止地址栏直接访问图片是必不可少的方案,当然这样的限制还比较基础,还是有别的途径可以盗图的,更多的限制之后会追加,现在先做好这两个基础防护 ...
- 解决新闻H5防盗链问题
jsp: img src //=======================jsp======防盗链处理开始================================//内容 var conte ...
- css实现图片虚化_前端纯css 图片的模糊处理
最近做的一个项目需要用到背景图的模糊处理,在网上查资料,发现用css的 filter 属性就可以解决,但是因为模糊度比较高,四周会有很长的模糊边,百度上也没找到解决的方法,,可喜的是最后我在分析一个d ...
- android去掉png图片灰色背景,JS解决PNG图片灰色背景问题
PNG图片用来制作漂亮的网页背景很实用,此方法也是比较简单的,会让网页增色不少.不过,万恶的IE似乎暗中做对,当你使用PNG图片的时候,IE会自动为PNG图片增加一个灰色背景,这真的好让人烦,那么有没 ...
- 【Typora 图片居中】彻底解决Typora图片无法居中的问题
▚ 01 问题描述
最新文章
- buildroot 简要记录
- 使用 Eclipse Memory Analyzer 进行堆转储文件分析
- 电脑屏幕出现彩色条纹_电脑屏幕出现条纹
- 有可能在onPause之前调用onSaveInstanceState
- sql server常用函数
- asp.net无法调试的解决方法(从安装配置步骤角度来看)
- 用c++做算法题的注意事项(一)
- 文字处理(WORD/WP)中,布局与绘制必然分开
- android 圆形相机预览拍照_Android Camera2 Api 实现预览和拍照
- PR自学之软件的安装
- 服务器系统怎么添加网络打印机,如何添加网络打印机
- python理财基金数据分析可视化系统
- 超快!三分钟学会用3DsMax制作波浪效果!大忙人的你也可以忙里偷闲学技术
- 使用路由器实现(非常)基本的家庭网络家庭安全
- 阅读类APP会员页竞品分析
- Git帝国之tag大臣
- 倭黑猩猩机器人_科学美国人60秒:倭黑猩猩妈妈监管儿子的私生活
- vue截取视频第一帧做封面图
- 图文并茂详细教程之---Pixhawk扩展思岚A1激光雷达实现360°避障
- Oracle 数据库的启停