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

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

问题


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


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


原因


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


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


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


解决方案


如原网址:

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


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


方法:在 <head> 标签里加 meta


<meta name="referrer" content="never">


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


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 name="referrer" content="never">


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


<meta name="referrer" content="origin">
相关文章
|
1月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
141 68
|
18天前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
33 1
利用html2canvas插件自定义生成名片信息并保存图片
|
13天前
HTML 统一资源定位器(Uniform Resource Locators)3
URL字符编码是指将URL中非ASCII字符转换为有效的ASCII格式的过程。URL只能使用ASCII字符集,因此需要对超出该集合的字符进行编码。URL编码使用“%”加上两位十六进制数来表示非ASCII字符,空格通常被编码为“+”。例如,€编码为%80,£编码为%A3。更多信息可参见URL编码参考手册。
|
13天前
|
安全 数据安全/隐私保护
HTML 统一资源定位器(Uniform Resource Locators)2
常见的URL Scheme包括:http(超文本传输协议,用于普通网页,不加密)、https(安全超文本传输协议,用于安全网页,加密信息交换)、ftp(文件传输协议,用于文件的上传和下载)、file(用于访问本地计算机上的文件)。
|
13天前
HTML 统一资源定位器(Uniform Resource Locators)1
统一资源定位器(URL)是用于标识互联网上资源位置的标准格式。URL通常由方案、主机、域名、端口、路径和文件名组成,如 `http://www.runoob.com/html/html-tutorial.html`。大多数用户通过域名访问网站,因为域名比IP地址更容易记忆。URL在Web浏览器中用于请求页面,通过 `&lt;a&gt;` 标签实现链接跳转。
|
26天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
1月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
43 4
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
20 1
|
1月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
46 3
|
1月前
HTML图片
【10月更文挑战第4天】HTML图片。
27 2
下一篇
无影云桌面