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

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

Same Origin and Canvas Origin Policy

Web pages are posed of different elements ing from different origins. Elements ing 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.

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

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

Same Origin and Canvas Origin Policy

Web pages are posed of different elements ing from different origins. Elements ing 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.

• javascript
• html
• internet-explorer
• canvas
• svg

• 1 Sounds to me like a bug in IE... What version of IE is this? – user1693593 Commented Dec 4, 2013 at 11:52
• I think so, I am using IE 11. I don't remember correctly but it seems that it's because drawing svg image on canvas makes it write-only! and prevents further read operations!! I've updated the question. – Bakhshi Commented Dec 5, 2013 at 2:06
• IE has funky levels of privacy/security, not necessarily in line with other browsers. Try lowering them down to minimum before pursuing whether or not it's a bug in IE – CrayonViolent Commented Dec 5, 2013 at 2:13
• 4 @Bakhshi: Have you read that whole document which you found? It seems to contain the answer you are looking for: "SVG can potentially contain content from multiple origins and browsers tend to blacklist any content with the MIME type image/svg+xml as multi-origin content without even testing the actual content. […]" While Webkit has been fixed in the while, IE still seems to show this behaviour – Bergi Commented Dec 5, 2013 at 2:23
• 1 yeah you're right @Bergi . it seems that the only option to render my svg as png would be canvg which I was trying to avoid. – Bakhshi Commented Dec 5, 2013 at 6:33

2 Answers 2

In my case, I changed the graphic elements that make up the image from svg to png. When using svg, I am seeing a security error in IE 11 (and 10), not Chrome, when I use toDataURL. Building the graphic using png elements, it's fine.

There is a 2nd problem with svgs not resizing properly in IE 11, so that's another strike against using svgs with IE.

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./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./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        +        +          -