IE lanza un error de security al llamar a DataUrl en el canvas

En primer lugar, sé que el acceso toDataURL método de toDataURL de toDataURL cuando su image de origen es de otro origen es un problema de security.

pero en mi caso, estoy usando data: url como fuente de mi img y luego uso img y lo canvas.toDataUrl en el canvas y luego llamé a canvas.toDataUrl .

¡esto funciona bien en Chrome y Firefox pero falla con un error de security en IE!

¿alguna 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" })) 

Aquí está la cita de svgopen.org

La transferencia de datos de SVG a Canvas tiene problemas de security, que hacen que Canvas se convierta en solo de escritura. Argumentamos que estos problemas podrían evitarse con nuestra propuesta SVG.toDataURL () (sección "Recomendaciones").

Política de origen del mismo origen y canvas

Las páginas web están compuestas por diferentes elementos provenientes de diferentes orígenes. Los elementos que provienen del mismo origen se consideran seguros [Origen10].

Canvas tiene potentes capacidades de lectura y escritura de imágenes. Sería trivial utilizar canvas como intermediario para transferir una image local a un tercero simplemente cargando la image en el elemento Canvas desde file: // -URL y luego enviando los datos de píxel del elemento Canvas a cualquier host con JavaScript.

Para evitar filtraciones de información con Canvas, los browseres protegen cuidadosamente el uso de Canvas cuando la fuente de los datos de image no es segura. Todos los elementos Canvas se crean como su atributo de limpieza de origen establecido en verdadero. Cuando cualquiera de las acciones que potencialmente se pueden usar para usar el elemento Canvas para transferir contenido que infringe la misma política de origen, la propiedad de limpieza de origen se establece permanentemente como falsa.

Si se invocan methods que devuelven los datos de píxeles almacenados en canvas, como toDataURL () o getImageData (), en el elemento Canvas cuyo origen-clean es falso, se genera una DOMException 18 SECURITY_ERR [Canvas10].

Pero estoy creando SVG sobre la marcha en el browser.

Existe una biblioteca que abstrae el svg -> canvas -> png y agrega un método al elemento SVG para que en cualquier browser simplemente llame a mySvg.toDataUrl () con una callback y la opción "canvg":

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

Esta implementación tiene en count las excepciones de security para que pueda superar el error de permissions que se encuentra.

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

Compatibilidad :

 Browser E xportingformat SVG+XML PNG/canvg PNG/native IE 9+ 9+ - Chrome + + 33+ ² Safari + + - Firefox + + 11+ ¹ Opera + + - 

En mi caso, cambié los elementos charts que componen la image de svg a png. Cuando uso svg, veo un error de security en IE 11 (y 10), no en Chrome, cuando uso toDataURL. Construir el gráfico usando elementos png, está bien.

Hay un segundo problema con svgs que no cambia el tamaño correctamente en IE 11, por lo que es otro ataque contra el uso de svgs con IE.