浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!

2020-05-02 08:33:36易采站长站整理

data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。
换句话说,引入base64以后,就可以支持任意形式的数据格式。
可以在Html的Img对象中使用,例如
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF…" />
可以在Css的background-image属性中使用,例如


div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF…);
}

可以在Html的Css链接处使用,例如

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq…" />
可以在Html的Javascript链接处使用,例如

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv…"></script>完整的语法定义
在RFC中,完整的语法定义如下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D",不过我测试下来,至少在Firefox里面,不转义也是可以的。

parameter可以对mediatype进行属性的扩展,常见的是charset,用来定义编码格式,在多语言情况下需要用到。例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出"你好,中文!"。如果吧charset部分去掉,就会显示乱码,因为我用的是UTF-8编码。

Firefox有一个data类型Url的测试页面,列出了各种格式的data类型Url的测试Url,和测试结果说明。

base64编码和内容的隐秘
把二进制数据转换成为Base64不是什么难事,比如Total Commander就有这样的功能。还有一些在线资源,

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
有些在线转换把base64里面的“=”转换成为%3D,这个在Url中和“=”是一样的,不转换也没什么问题。

当然,这种Url还有一种隐秘的好处,就是将一些道貌岸然者不喜欢的东西,堂而皇之的放在页面上,例如下面
可以在Html的Css链接处使用,例如

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq…" />