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

问题描述

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

但在我的例子中，我使用 data： url作为我的 img 然后使用 img 并在 canvas 上绘制，然后调用 canvas.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（）建议（建议部分）避免。

相同的原产地和帆布起源政策

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

Canvas具有强大的图像读取和写入功能。它将
是微不足道的使用画布作为中间人转移本地图像到
a第三方只是通过从file：//
-URL加载图像到Canvas元素，然后发送像素数据从Canvas元素到任何具有JavaScript的主机。

为了防止信息泄漏与Canvas，浏览器仔细
保护的使用Canvas图像数据源不是
安全。所有画布元素都被创建为它们的origin-clean属性
设置为true。当可能用于
的任何操作使用Canvas元素传输违反相同来源
策略的内容时，origin-clean属性将永久设置为false。

如果返回存储在canvas中的像素数据的方法（例如
toDataURL（）或getImageData（））在
origin-clean为false的Canvas元素上调用，那么一个DOMException 18 SECURITY_ERR被引发
[Canvas10]。

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

解决方案

存在一个抽象svg - > canvas - > png的库，并向SVG元素添加一个方法在任何浏览器中，你可以调用mySvg.toDataUrl（）与回调和选项canvg：

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

此实现考虑到

 < script type =text / javascriptsrc =安全性例外，因此您可以通过您遇到的权限错误。 http://canvg.github.io/canvg/rgbcolor.js\"> ;</script> 
< script type =text / javascriptsrc =http://canvg.github.io/canvg/StackBlur.js>< / script> 
< script type =text / javascriptsrc =http://canvg.github.io/canvg/canvg.js>< / script> 
< script> 
< script type =text / javascriptsrc =http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js>< / script> 
 
 mySVGelement.toDataURL（image / png，{
 renderer：canvg
 callback：function（data）{
 image.src = data; 
} 
}）; 
< / script> 
  

兼容性：

 浏览器E xportingformat 
 SVG + XML PNG / canvg PNG /原生
 IE 9+ 9+  -  
 Chrome + + 33+²
 Safari + +  -  
 Firefox + + 11+¹
 Opera + +  -  
  

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

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.

this works fine on Chrome and Firefox but fails with security error in IE!

any idea?

...
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" }))

Here is the quote from svgopen.org

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").

Same Origin and Canvas Origin Policy

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

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.

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 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].

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

解决方案

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>

Compatibility:

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