必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

在上面的Data URI中,那个时候有很多个版本的 D

2019-09-15 03:09 来源:未知

☞ 安全阀门

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 URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在 HTML 语言之中。从 RFC 文档定稿的时间来看(1998年),它是一个很受欢迎的发明。

图片 1

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/> 

☞ 扩展阅读

  • RFC 2397 RFC文档
  • MDN – data_URIs MDN文档
  • MSDN – data Protocal.aspx) MSDN文档
  • NC – data_uris_explained
  • phpied – MHTML

    1 赞 1 收藏 评论

图片 2

☞ 安全阀门

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

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

这里可以很大程度的发散,很有意思,值得读者去深究。

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

也可以这样显示:

 

细说 Data URI

2015/08/27 · HTML5 · URI

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

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

Data URIs 定义的内容可以作为小文件被插入到其他文档之中。URI 是 uniform resource identifier 的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容是一个地址,那么此时的 URI 也是一个 URL (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

协议后面的内容,可以告诉客户端一个准确下载资源的地址,而 URI 并不一定包含一个地址信息,如(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 编码。它直接包含了内容但并没有一个确定的资源地址。

图片 3

☞ 格式

Data URI 的格式十分简单,如下所示:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 第一部分是 data: 协议头,它标识这个内容为一个 data URI 资源。

  • 第二部分是 MIME 类型,表示这串内容的展现方式,比如:text/plain,则以文本类型展示,image/jpeg,以 jpeg 图片形式展示,同样,客户端也会以这个 MIME 类型来解析数据。

  • 第三部分是编码设置,默认编码是 charset=US-ASCII, 即数据部分的每个字符都会自动编码为 %xx,关于编码的测试,可以在浏览器地址框输入分别输入下面两串内容,查看效果:

    图片 4;)

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

    图片 5;)

  • 第四部分是 base64 编码设定,这是一个可选项,base64 编码中仅包含 0-9,a-z,A-Z,+,/,=,其中 = 是用来编码补白的。

  • 最后一部分为这个 Data URI 承载的内容,它可以是纯文本编写的内容,也可以是经过 base64编码 的内容。

很多时候我们使用 data URI 来呈现一些较长的内容,如一串二进制数据编码、图片等,采用 base64 编码可以让内容变得更加简短。而对图片来说,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积增加大约为三分之一,所以使用的时候需要权衡。

☞ 格式

Data URI 的格式十分简单,如下所示(红色部分是主体,另外可选项的顺序不能改变):

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 第一部分是 data: 协议头,它标识这个内容为一个 data URI 资源。

  • 第二部分是 MIME 类型,表示这串内容的展现方式,比如:text/plain,则以文本类型展示,image/jpeg,以 jpeg 图片形式展示,同样,客户端也会以这个 MIME 类型来解析数据。

  • 第三部分是编码设置,默认编码是 charset=US-ASCII, 即数据部分的每个字符都会自动编码为 %xx,关于编码的测试,可以在浏览器地址框输入分别输入下面两串内容,查看效果:

    // 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 编码设定,这是一个可选项,base64 编码中仅包含 0-9,a-z,A-Z,+,/,=,其中 = 是用来编码补白的。

  • 最后一部分为这个 Data URI 承载的内容,它可以是纯文本编写的内容,也可以是经过 base64编码 的内容。

很多时候我们使用 data URI 来呈现一些较长的内容,如一串二进制数据编码、图片等,采用 base64 编码可以让内容变得更加简短。而对图片来说,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积增加大约为三分之一,所以使用的时候需要权衡。

<imgsrc=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

 

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:在上面的Data URI中,那个时候有很多个版本的 D