菜单

关于Data URI

2019年2月2日 - 金沙前端

☞ 安全阀门

Data URI 在 IE 下有诸多安然无恙限制,事实上,很多 xss 注入也足以将 data URI
的源头作为入口,使用 data URI 绕过浏览器的过滤。

JavaScript

// 绕过浏览器过滤
src=”data:text/html,<script>alert(“Xss”)</script><!–

1
2
// 绕过浏览器过滤
http://example.com/text.php?t="><script src="data:text/html,<script>alert("Xss")</script><!–

那里可以很大程度的疏散,很有趣,值得读者去商量。

其情商为 data,并告知客户端将那么些内容作为 image/gif
格式来分析,须要分析的始末使用的是 base64
编码。它一贯蕴涵了情节但并没有一个确定的资源地址。

Data URL 早在 1995
年就被提议,那些时候有诸七个版本的 Data URL Schema
定义陆续出现在 VRML 之中,随后赶忙,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在
HTML
语言之中。从 RFC 文档定稿的光阴来看(1998年),它是一个很受欢迎的申明。

☞ HTTPS 下的平安提醒

HTTPS 打开页面,当在 IE6、7 下行使 data URIs 时,会看到如下提醒:

澳门金沙app下载 1

MS 的分解是:

您正在查阅的网站是个平安网站。它应用了 SSL (保险套接字层)或
PCT(保密通信技术)那样的平安协议来确保您所收发新闻的安全性。
当站点使用安全磋商时,您提供的新闻例如姓名或信用卡号码等都因而加密,其余人不可以读取。不过,这一个网页同时含有未使用该安全磋商的序列

很醒目,IE 嗅到了”未使用安全协议的类型”。

浏览器在分析到一个 URI
的时候,会首先判断协议头,倘若是以 http(s) 初阶,它便会确立一个互连网链接下载资源,如果它发现协议头为 data:,便会将其看成一个
Data URI 资源开展解析。

澳门金沙app下载 2

而是从 chrome 的瀑布流,大家可以做这么的可疑:

图中各样 Data URI
都提倡了请求,但是意况都是 data(from cache),禁用缓存之后,如故那样。所以可以判明,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在该地,最终 Data URI
每个对应地方都会发起一遍呼吁,只是这么些请求还未建立链接,就被发现存在缓存的浏览器给拍死了。

☞ 扩充阅读

 

【新增】:

在线转换为Base64编码网站:

☞ 兼容性

由于出现时间较早,近年来主流的浏览器基本都辅助 data URI:

但是有的浏览器对 data URI 的利用存在限制:

Opera 下限制为 4100 个字符,方今曾经去掉了这么些范围 IE 8+ 下限制为 32,768
个字符(32kb),IE9 之后移除了这一个限制

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制

☞ 低版本IE的解决之道 – MHTML

MHTML 就是 MIME HTML,是 “Multipurpose Internet Mail Extensions
HyperText 马克up Language”
的简称,它就像是一个带着附件的邮件一般,如下所示:

/** FilePath: */ /*!@ignore
Content-Type: multipart/related; boundary=”_ANY_SEPARATOR”
–_ANY_SEPARATOR Content-Location:myidBackground
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
–_ANY_SEPARATOR– */ .myid { background-image:
url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==”);
*background-image:
url(mhtml:); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
 
–_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
–_ANY_SEPARATOR–
*/
 
.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground);
}

上面的一串注释就像一个附件,这些附件内容是一个称呼 myidBackground 的
base64 编码图片,在一个 class 叫做 myid 的 css
中用到了它。那里有几点要求注意:

这边存在一个坑:部分系统匹配格局下的 IE8 也认识 css 中的 hack
符号 *,可是不匡助 mhtml,所以地点的内容不会生效。处理方案估算就只有利用
IE 的尺度注释了。

澳门金沙app下载 3

☞ 格式

Data URI 的格式非凡简约,如下所示(青色部分是重点,其余可挑选的次第不可以更改):

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

过多时候大家应用 data URI
来显现一些较长的情节,如一串二进制数据编码、图片等,选拔 base64
编码可以让内容变得愈加简约。而对图纸来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积伸张大致为三分之一,所以拔取的时候须要权衡。

<img src=“;

☞ 格式

Data URI 的格式卓殊简短,如下所示:

澳门金沙赌城官网,// output: ä½ å¥½ -> 使用默许的编码浮现,故乱码 data:text/html,你好
// output: 你好 -> 使用 UTF-8 展示 data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 显示(浏览器默许编码 UTF-8,故乱码)
data:text/html;charset=gbk,你好 // output: 你好 -> UTF-8
编码,内容先采纳 base64 解码,然后展示data:text/html;charset=UTF-8;base64,5L2g5aW9

1
2
3
4
5
6
7
8
// output: ä½ å¥½ -> 使用默认的编码展示,故乱码
data:text/html,你好  
// output: 你好 -> 使用 UTF-8 展示
data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 展示(浏览器默认编码 UTF-8,故乱码)
data:text/html;charset=gbk,你好
// output: 你好 -> UTF-8 编码,内容先使用 base64 解码,然后展示
data:text/html;charset=UTF-8;base64,5L2g5aW9

重重时候我们采用 data URI
来显现一些较长的内容,如一串二进制数据编码、图片等,接纳 base64
编码可以让内容变得愈加简便易行。而对图片来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积增添大约为三分之一,所以选拔的时候须要权衡。

☞ 兼容性

出于出现时间较早,近期主流的浏览器基本都支持 data URI:

然而有些浏览器对 data URI 的利用存在限制:

☞ 低版本IE的解决之道 – MHTML

MHTML 就是 MIME HTML,是 “Multipurpose Internet Mail Extensions
HyperText 马克up Language”
的简称,它似乎一个带着附件的邮件一般,如下所示:

澳门金沙app下载 4😉

/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"

--_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--_ANY_SEPARATOR--
*/

.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground); 
}

澳门金沙app下载 5😉

上方的一串注释就像是一个附件,这个附件内容是一个名叫 myidBackground 的 base64 编码图片,在一个 class 叫做 myid 的 css 中用到了它。这里有几点需要注意:

那里存在一个坑:部分系统匹配格局下的 IE8 也认识 css 中的 hack 符号
*,可是不扶助 mhtml,所以地点的始末不会一蹴而就。处理方案估量就唯有应用
IE 的准绳注释了。

☞ 扩充阅读

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图