IE 在画布上调用 toDataUrl 时抛出安全错误 [英] IE throws Security Error when calling toDataUrl on canvas

问题描述

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

first of all, I know that accessing toDataURL method of canvas when its source image is from another origin is a security issue.

但就我而言，我使用 data: url 作为我的 img 的来源，然后使用 img 并将其绘制在 canvas 然后调用 canvas.toDataUrl.

but in my case, I am using data: url as the source of my img and then use img and draw it on canvas and then call canvas.toDataUrl.

这在 Chrome 和 Firefox 上运行良好，但在 IE 中因安全错误而失败！

this works fine on Chrome and Firefox but fails with security error in 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 存在安全问题，这会导致画布变为只写.我们认为这些问题可能是避免使用我们的 SVG.toDataURL() 建议(建议"部分).

Transferring data from SVG to Canvas has security issues, which cause Canvas to become write-only. We argue that these issues could be avoided with our SVG.toDataURL() proposal (section "Recommendations").

同源和画布来源政策

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

Web pages are composed of different elements coming from different origins. Elements coming from the same origin are considered to be safe [Origin10].

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

Canvas has powerful image reading and writing capabilities. It would be trivial to use canvas as middleman for transfering a local image to a third-party just by loading image into Canvas element from file:// -URL and then sending the pixel data from the Canvas element to any host with JavaScript.

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

To prevent information leakage with Canvas, browsers are carefully protecting the usage of Canvas when the source for image data is not safe. All Canvas elements are created as their origin-clean attribute set to true. When any of the actions that may potentially be used for using Canvas element to transfer content that violates the same origin policy, the origin-clean property is permanently set to false.

If 返回存储在画布中的像素数据的方法，例如toDataURL() 或 getImageData()，在其 Canvas 元素上调用origin-clean 为假，然后引发 DOMException 18 SECURITY_ERR[画布10].

If methods that return the pixel data stored in canvas, such as toDataURL() or getImageData(), are called on the Canvas element whose origin-clean is false, then a DOMException 18 SECURITY_ERR is raised [Canvas10].

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

But I am creating SVG on the fly in the browser.

推荐答案

存在一个抽象 svg --> canvas --> png 的库，并为 SVG 元素添加一个方法，以便在任何浏览器中调用mySvg.toDataUrl() 带有回调和选项canvg":

There exists a library that abstracts the svg --> canvas --> png and adds a method to the SVG element so that in any browser you can just call mySvg.toDataUrl() with a callback and the option "canvg":

https://github.com/sampumon/SVG.toDataURL

此实现考虑了安全异常，因此您可以克服遇到的权限错误.

This implementation takes into account security exceptions so you can get past the permissions error you are encountering.

<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 时抛出安全错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！