是否可以嵌套一个数据:URI在另一个数据中?

时间:2014-08-20 17:46:34

标签: html html5

如果我使用数据URI为HTML元素构建src属性,那么它内部是否还有另一个数据URI?

我知道你不能将数据uri用于iframe(我实际上是在尝试构建一个OSDX文档,并将其传递给带有base64编码图标的浏览器,但这是一个非常小众的用例,这更像是一个一般问题),但假设你可以,我的用例看起来像:

var iframe = document.createElement('iframe');
var icon = document.createElement('image');
var iSrc = 'data:image/png;base64,/*[REALLY LONG STRING]*/';
iframe.src='data:text/html,<html><body><image src="'+iSrc+'" /></body</html>
document.body.appendChild(iframe);

基本上我所追求的是数据uri中是否有任何内容会破坏父数据uri?

2 个答案:

答案 0 :(得分:6)

是的,你可以。我真的认为这是不可能的,就像我问过的每个人一样。

示例:
将以下内容粘贴到浏览器的URL栏中应该在html页面中呈现一个gmail徽标,上面写着hello world

data:text/html,<html><body><p>hello world</p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAz1BMVEX///+6xs7iTULj5+vW2tzk49TX3+Tq6tz09Orz9/jm7O6wu8aNm6WwMCjfRDnm5ube2Mmos7vt7++jrLP29/eyTk3d4+fj6+foWFLM1t2bNzeZpa2trKPv8/ajo6Xud2f0r6rv7uG3ubvd6eXIysq9s6jeopfSUknx8fHbXGKvTx7Hz9X09PTwhXHw9Pb++/fp7/Xu4d3SZlPSiXjuaFmMkZX39/vZy6/j8+v2+/v76uP7+/v0/Pewl4raMi/f5+7KTjitf4W2rI3/9vDzz8uC91bdAAAAAXRSTlMAQObYZgAAAmBJREFUeF6VldeunDAQQNeF3jvbe729p/f//6aMxzaBKHe5OZiVJY6OBvbBAyTvZaDJSy/xzpJ4pdJzz1tfOme5LD0vly45fETe4/1vUoK26bnPznUPzrPrmSJsgtrPpQnpPCmvp2/gukyE/HX6JtYor9/kpqUcY3ogvUxv5RhlSrbHenFzY/+0cxtYApZlGZod3W9JaqJspuSR1vTqw41U4UZb+S/zMAz35FbJt4QK6sUnW+naxWwoaJXBpBi37bxTjuchyl+0zLGs4npmVK1dHSLBiLhmlg+chLukFiLqV3dQ1i84p1SEv42CgLhYzmR5vqh1XIUXeypGoN+LAMoVz5yBk/EKZfsOQioOsnGFWXr/eXLCMs9EeehK2bab+NKCbQj2/mEymRSjpqzkR5CXOv4AWSqyM3BnRSDKw255CWtBW0BWcILyCmQsMywv5b/xS8WpzGJZzMywPFZjvANTYO10VoNfIxqOW2WlwhU/QnbSMDu1y0yWpSowdiqry6OArEW5ka1GNTaGsWqViwDL4z/lezClu4nBN+K/ypWSIywrNY4NxaqZWZSjThlEkQXLUna8lTZ+unWnDE6T1fbmtZlBxWxbFvHZ5NR8DUeUj5QejQ1mu24cv2C5aJW3R3qv1a4bX8TbIih+wAv6IPvDKCIrAusV8FEpyz5njFUV/ERdWFTBHVWwmGkyKKPcT2kyjvKFy1jPgnJ6IeTMg30vzCUZHBTc52mvzdKhz+GYcJIxTw8ukOKlVmd/SPk4kSdQ4nv8fJh7PriIw7Mn/yxPGW8dm06e269eOTwe/De/AW24fWb7B21TAAAAAElFTkSuQmCC" /></body></html>

或者是Pumbaa80的简短例子:

data:text/html,<script src="data:text/javascript,alert('hello world')"></script>

答案 1 :(得分:2)

MSDN explicitly supports this

  

数据URI可以嵌套。

An old blog entry更多地讨论了使用data:在CSS中嵌入图片的方法:

  

如果dataURI不能嵌套,则dataURI规范或其他任何提及都没有提及。所以这里是the testcase,其中dataURI'ed CSS嵌入了dataURI的图像。 IE8b1,Firefox3和Safari应用样式表并显示图像,Opera9.50(build 9613)应用样式表,但不显示嵌入图像!所以Opera9似乎不希望在已经嵌入的资源中嵌入任何内容! :d

     

但有趣的是,由于IE8b1支持表达式并且还支持嵌套数据URI,因此它具有与Firefox相同的潜在安全漏洞(如上一节所述)。请参阅the testcase - 嵌入式CSS具有以下代码:body { background: expression(a()); },它调用主页面的javascript中定义的函数a(),并且每次重新评估表达式时都会调用此函数。虽然IE8b1具有有限的表达式支持(将在单独的帖子中解释),但您不能使用任何代码作为表达式值,但您只能调用已定义的函数或使用直接字符串值。因此,为了利用这个功能,我们需要在页面上有一个现成的javascript函数,然后我们可以从样式表中嵌入的表达式中调用它。这显然不是很微不足道,但是如果你有一个网站允许人们指定他们自己的样式表并且你想要安全,你必须要么确保你没有可能导致任何潜在伤害的javascript功能或过滤人们样式表中的表达式。