澳门新萄京8522:Data U宝马X5I(转)

澳门新萄京8522:Data U宝马X5I(转)

☞ 扩大阅读

  • RFC 2397 RFC文档
  • MDN –
    data_URIs MDN文档
  • 澳门新萄京8522,MSDN – data
    Protocal.aspx) MSDN文档
  • NC –
    data_uris_explained
  • phpied –
    MHTML

    1 赞 1 收藏
    评论

澳门新萄京8522 1

☞ 格式

Data U奥迪Q7I 的格式1贰分简短,如下所示:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 首先片段是 data: 协议头,它标记这一个剧情为一个 data U奥迪Q7I 能源。

  • 其次片段是 MIME
    类型,表示那串内容的显示方式,比如:text/plain,则以文件类型体现,image/jpeg,以
    jpeg 图片格局呈现,同样,客户端也会以这些 MIME 类型来分析数据。

  • 其三片段是编码设置,暗中同意编码是 charset=US-ASCII,
    即数据部分的各种字符都会自动编码为
    %xx,关于编码的测试,能够在浏览器地址框输入分别输入上面两串内容,查看效果:

    澳门新萄京8522 2😉

    // 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 
    

    澳门新萄京8522 3😉

  • 第5片段是 base64
    编码设定,这是三个可挑选,base6四 编码中仅包含0-玖,a-z,A-Z,+,/,=,当中 = 是用来编码补白的。

  • 最后一片段为这几个 Data U索罗德I
    承载的内容,它能够是纯文本编写的剧情,也得以是通过 base64编码
    的始末。

许多时候大家利用 data UXC90I
来展现一些较长的内容,如壹串2进制数据编码、图片等,选用 base6四编码能够让内容变得特别简约。而对图纸来讲,在 gzip 压缩之后,base6四图片实际上比原图 gzip
压缩要大,体积扩展大概为三分之一,所以采用的时候须求权衡。

【新增】:

<img src=“;

☞ 格式

Data U帕杰罗I 的格式13分轻巧易行,如下所示:

  • 先是局地是 data: 协议头,它标记那么些剧情为三个 data U福睿斯I 财富。
  • 第2有的是 MIME
    类型,表示那串内容的突显方式,比如:text/plain,则以文件类型显示,image/jpeg,以
    jpeg 图片情势体现,一样,客户端也会以那个 MIME 类型来分析数据。
  • 其3部分是编码设置,默许编码是 charset=US-ASCII,
    即数据部分的各类字符都会自动编码为 %xx,关于编码的测试,能够在浏览器地址框输入分别输入下边两串内容,查看效果:

// output: ä½ å¥½ -> 使用暗中同意的编码体现,故乱码 data:text/html,你好
// output: 你好 -> 使用 UTF-八 呈现 data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 显示(浏览器暗许编码 UTF-八,故乱码)
data:text/html;charset=gbk,你好 // output: 你好 -> UTF-8编码,内容先接纳 base6四 解码,然后显示data:text/html;charset=UTF-八;base64,五L贰g5aW九

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
  • 第五部分是 base64 编码设定,那是三个可选用,base6四编码中仅包括 0-九,a-z,A-Z,+,/,=,在那之中 = 是用来编码补白的。
  • 末段一片段为那个 Data UPAJEROI
    承载的内容,它能够是纯文本编写的内容,也得以是透过 base64编码
    的剧情。

成都百货上千时候大家采纳 data U奥迪Q5I
来展现一些较长的剧情,如一串2进制数据编码、图片等,选择 base6四编码能够让内容变得更其简约。而对图片来讲,在 gzip 压缩之后,base6四图片实际上比原图 gzip
压缩要大,体积扩张差不离为三分之一,所以使用的时候须求权衡。

说道后边的始末,能够告诉客户端贰个标准下载财富的地方,而 UOdysseyI
并不一定包罗二个地址新闻,如(demo):

澳门新萄京8522 4

☞ 兼容性

是因为出现时间较早,如今主流的浏览器基本都援助 data U揽胜极光I:

  • Firefox 2+
  • Opera 7.2+
  • Chrome (全数版本)
  • Safari (全体版本)
  • Internet Explorer 8+

只是有的浏览器对 data U景逸SUVI 的接纳存在限制:

  • 长度限制,长度超长,在部分行使下会促成内部存款和储蓄器溢出,程序崩溃

Opera 下限制为 四100 个字符,如今早就去掉了那么些界定 IE 8+ 下限制为 3二,766个字符(3二kb),IE九 之后移除了这几个范围

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data URAV4I 只允许被用到如下地点:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许选用 URAV4L 申明的地点,如 background
  • 在 IE 下,Data U奥迪Q7I 的剧情必须是透过编码转变的,如 “#”、”%”、非
    US-ASCII 字符、多字节字符等,必须透过编码调换

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

MHTML 正是 MIME HTML,是 “Multipurpose Internet Mail Extensions
HyperText 马克up Language”
的简称,它就如四个带着附属类小部件的邮件1般,如下所示:

/** 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 的
base6四 编码图片,在叁个 class 叫做 myid 的 css
中用到了它。那里有几点须求注意:

  • _ANY_SEPARATOR 能够是随意内容
  • 在”附属类小部件”甘休地点需求增添得了符 _ANY_SEPARATOR,否则在 Vista 和
    Win7 的 IE7
    中会出错。
  • 附属类小部件代码注意不要被压缩工具给干掉了

这边存在七个坑:部分连串协作形式下的 IE8 也认识 css 中的 hack
符号 *,可是不补助 mhtml,所以地方的剧情不会收效。处理方案预计就唯有接纳IE 的基准注释了。

☞ 安全阀门

Data U翼虎I 在 IE 下有繁多平安范围,事实上,诸多 xss 注入也足以将 data U普拉多I
的源头作为入口,使用 data UCR-VI 绕过浏览器的过滤。

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

此处能够不小程度的分散,很有趣,值得读者去研讨。

☞ 安全阀门

Data URAV四I 在 IE
下有许多安全限制,事实上,繁多 xss 注入也得以将 data U本田CR-VI
的源流作为入口,使用 data U奥迪Q7I 绕过浏览器的过滤。

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

那里能够非常的大程度的疏散,很有意思,值得读者去探究。

在线转变为Base64编码网址:

细说 Data URI

2015/08/27 · HTML5 ·
URI

原稿出处:
李靖(@Barret李靖)   

Data U帕杰罗L 早在 19玖5 年就被建议,那年有那个个版本的 Data U福睿斯L Schema
定义六续出现在 VRML 之中,随后不久,当中的两个本子被提上了议案——将它做个3个嵌入式的能源放置在
HTML
语言之中。从 RFC 文档定稿的岁月来看(199九年),它是1个相当受欢迎的证明。

Data UBMWX伍Is 定义的剧情能够用作小文件被插入到任何文档之中。U牧马人I
是 uniform resource identifier 的缩写,它定义了接受内容的商议以及附带的连锁内容,要是附带的相关内容是3个地点,那么此时的
UEvoqueI 也是一个 U安德拉L (uniform resource locator),如:

ftp://10.1.1.10/path/to/filename.ext

1
2
ftp://10.1.1.10/path/to/filename.ext
http://example.com/source/id

情商前面包车型客车剧情,能够告诉客户端2个准确下载能源的地方,而 U宝马X3I
并不一定包蕴一个地点消息,如(demo):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

1
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

其情商为
data,并告诉客户端将以此剧情作为 image/gif 格式来分析,要求分析的剧情使用的是
base64 编码。它一向包括了内容但并从未一个分明的财富地址。

澳门新萄京8522 5

☞ HTTPS 下的安全提醒

HTTPS 打开页面,当在 IE陆、七 下行使 data UPRADOIs 时,会看出如下提示:

澳门新萄京8522 6

MS 的疏解是:

您正在查阅的网址是个安全网站。它选取了 SSL (保险套接字层)或
PCT(保密通信技巧)那样的攀枝花磋商来确认保障您所收发消息的安全性。
当站点使用安全协议时,您提供的音信例如姓名或信用卡号码等都因此加密,别的人不可能读取。可是,这一个网页同时含有未使用该安全磋商的类别

很明显,IE 嗅到了”未使用安全协议的门类”。

浏览器在分析到二个 UWranglerI 的时候,会首先推断协议头,借使是以 http(s)
开头,它便会树立三个网络链接下载资源,借使它发现协议头为
data:,便会将其用作3个 Data ULANDI 财富实行剖析。

澳门新萄京8522 7

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

图中每一种 Data UBMWX3I 都倡导了请求,但是景况都以
data(from cache),禁止使用缓存之后,照旧那样。所以能够判断,浏览器在下载源码解析成
DOM 的时候,会将 Data U帕杰罗I 的财富解析出来,并缓存在地面,最终 Data U奥迪Q5I
每一个对应地点都会发起一回呼吁,只是那么些请求还未建立链接,就被察觉存在缓存的浏览器给拍死了。

Data U君越Is
定义的始末能够看做小文件被插入到其余文档之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的说道以及附带的有关内容,假诺附带的连带内容是八个地方,那么此时的
U奥迪Q7I 也是二个 UCRUISERL
(uniform resource locator)(统一财富定位符)
,如:

在上头的Data UKugaI中,data代表收获数据的缔约名称,image/png
是数据类型名称,base64是数码的编码方法,逗号前面就是那一个image/png文件base6四编码后的数目。
当下,Data U卡宴I scheme补助的门类有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base6四,base6四编码的gif图片数据
data:image/png;base6肆,base6四编码的png图片数据
data:image/jpeg;base6四,base6肆编码的jpeg图片数据
data:image/x-icon;base6四,base6四编码的icon图片数据
base6四轻巧地说,它把一些 捌-bit 数据翻译成标准 ASCII
字符,网上有那些免费的base6四编码和解码的工具,在PHP中得以用函数base64_encode() 进行编码,如echo
base6四_encode(file_get_contents(‘wg.png’));
目前,IE八、Firfox、Chrome、Opera浏览器都协理那种小文件嵌入。
举个图片的例子:
网页中一张图纸能够这样展现:

发表评论

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

网站地图xml地图