为什么Chrome会将数据网址视为交叉来源？

Question

我尝试使用父窗口中的javascript访问SVG的DOM（通过embed标记和数据网址嵌入）。但是Chrome会将data-url评为交叉来源。知道为什么以及如何防止这种情况？不幸的是，我无法控制服务器端设置任何跨源标志或类似标记。

谢谢，

安德烈亚斯

＆＃13;

＆＃13;

var c = document.getElementById("myembed");
c.onload = function() {
	var s = c.getSVGDocument();
	alert(s.tagName);
}

＆＃13;

<embed id="myembed" src="data:image/svg+xml;utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100px%22%20height%3D%22100px%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%22%20width%3D%22100%22%20style%3D%22stroke%3A%23ff0000%3B%20fill%3A%20%230000ff%22%2F%3E%3C%2Fsvg%3E" type="image/svg+xml"></embed>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这种情况下，Chrome只符合the following requirement in the HTML spec：

  

如果Document是从data:网址生成的   在创建Document时分配了唯一的不透明原点。

这是因为embed元素在DOM中创建了一个SVG文档：

如果您在文档中检查该SVG文档的属性，您会看到其origin被序列化为null（it’s actually a unique origin internally, but just gets serialized as null。）

Answer 2

您可以使用blobURL而不是dataURL。 blobURL目前没有跨源问题。我在Chrome 56.0中进行了测试

请参阅Blob和objectURL。

HTML：

<embed id="myembed" type="image/svg+xml"></embed>

JS：

var url = URL.createObjectURL(new Blob(['<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/></svg>'], {type : 'image/svg+xml'}));

var c = document.getElementById("myembed");
c.setAttribute('src', url);
c.onload = function() {
    var s = c.getSVGDocument();
    alert(s.tagName);
};