IE 在画布上调用 toDataUrl 时引发安全错误-解网

问：

首先，我知道当画布的源图像来自另一个来源时访问画布的方法是一个安全问题。toDataURL

但就我而言，我使用 url 作为我的源，然后使用并绘制它，然后调用 .data:imgimgcanvascanvas.toDataUrl

这在 Chrome 和 Firefox 上工作正常，但在 IE 中失败并出现安全错误！

有什么想法吗？

...
var svgxml = getxmlsvg();
img.onload = function(){
    canvas.drawImage(this, 0, 0);
    canvas.toDataURL("image/png"); // <--- security error
}
image.src = URL.createObjectURL(new Blob([svgxml], {type: "image/svg+xml;charset=utf-8" }))

这是 svgopen.org 的引述

将数据从 SVG 传输到 Canvas 存在安全问题，这会导致 Canvas 变为只写。我们认为这些问题可能是我们的 SVG.toDataURL（）提案（“建议”部分）避免了这一点。

同源和画布源策略

网页由来自不同起源。来自同一来源的元素被认为是安全 [Origin10]。

Canvas 具有强大的图像读写能力。它会的使用 canvas 作为中间人将本地图像传输到第三方只需将图像从 file:// 加载到 Canvas 元素中即可 -URL，然后使用 JavaScript 将像素数据从 Canvas 元素发送到任何主机。

为了防止 Canvas 的信息泄露，浏览器会小心翼翼当图像数据的来源不是安全。所有 Canvas 元素都创建为其 origin-clean 属性设置为 true。当任何可能用于使用 Canvas 元素传输违反同一来源的内容策略中，origin-clean 属性永久设置为 false。

如果方法返回存储在 canvas 中的像素数据，例如 toDataURL（）或 getImageData（）在 Canvas 元素上调用，其 origin-clean 为 false，则引发 DOMException 18 SECURITY_ERR [帆布10]。

但是我正在浏览器中即时创建 SVG。

JavaScript HTML 互联网浏览器画布 SVG

@Bakhshi：你读过你找到的整个文件吗？它似乎包含您正在寻找的答案：“SVG 可能包含来自多个来源的内容，浏览器倾向于将任何 MIME 类型为 image/svg+xml 的内容列入黑名单，作为多来源内容，甚至不测试实际内容。[...]”虽然 Webkit 已经修复了一段时间，但 IE 似乎仍然显示出这种行为

1赞 Bakhshi 12/5/2013

是的，你是对的@Bergi.似乎将我的 svg 渲染为 png 的唯一选择是我试图避免的。canvg

答：

1赞 Gary Wolfe 2/16/2015 #1

就我而言，我将构成图像的图形元素从 svg 更改为 png。使用 svg 时，当我使用 toDataURL 时，我在 IE 11（和 10）而不是 Chrome 中看到安全错误。使用 png 元素构建图形，这很好。

在 IE 11 中，svg 无法正确调整大小存在第二个问题，因此这是对在 IE 中使用 svg 的又一次打击。

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 
<script>
<script type="text/javascript" src="http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js"></script>

mySVGelement.toDataURL("image/png", {
  renderer: "canvg"
  callback: function(data) {
      image.src = data;
  }
});
</script>

兼容性：

Browser     E x p o r t i n g  f o r m a t
            SVG+XML  PNG/canvg  PNG/native
IE           9+       9+         -
Chrome       +        +          33+ ²
Safari       +        +          -
Firefox      +        +          11+ ¹
Opera        +        +          -

IE 在画布上调用 toDataUrl 时引发安全错误

IE throws Security Error when calling toDataUrl on canvas

评论

评论

评论