32

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.

Bakhshi
  • 1,299
  • 16
  • 25
  • 1
    Sounds to me like a bug in IE... What version of IE is this? –  Dec 04 '13 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 Dec 05 '13 at 02: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 Dec 05 '13 at 02: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](https://bugs.webkit.org/show_bug.cgi?id=29305) in the while, IE still seems to show this behaviour – Bergi Dec 05 '13 at 02: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 Dec 05 '13 at 06:33
  • Did you find a solution other that canvg? – John May 16 '14 at 17:05
  • @user3428801 unfortunately no! – Bakhshi May 19 '14 at 01:53

2 Answers2

1

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.

Gary Wolfe
  • 91
  • 3
1

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        +        +          -
chwagssd
  • 181
  • 6