SecurityError: The operation is insecure in canvas.toDataURL

Question

I've tried to resolve the next error but without success.

I have the following jQuery and HTML5 code:

<script language="javascript" type="text/javascript">

  function doExportMap() {

      map.once('postcompose', function(event) {

        var canvas = event.context.canvas;

        var exportBMPElement = document.createElement('a');
        exportBMPElement.download = 'Mapa.bmp';
        exportBMPElement.href = canvas.toDataURL('image/bmp');
        document.body.appendChild(exportBMPElement);
        exportBMPElement.click();
        document.body.removeChild(exportBMPElement);
      });

      map.renderSync();
  }

It was working perfectly way, but now, I'm getting the following error:

SecurityError: The operation is insecure.
exportBMPElement.href = canvas.toDataURL('image/bmp');

What is wrong? Any ideas?

The funny is that I'm not loading the image from an external source. The image is from localhost

Are you loading an image from an external source into your canvas? — Shawn Lehner, Mar 18 '15 at 22:09
When your image.src is outside the webpage domain, you will "taint" the canvas and you will not be able to use `ctx.getImageData` or `ctx.toDataURL`. The browser automatically taints the canvas as a way to protect users from having their private information taken through malicious scripts using getImageData (for example, the user's banking login screen). Here's a link to more info about this security restriction: http://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image — markE, Mar 18 '15 at 22:10
The funny that I'm not loading the image from an external source... So, I'm not understanding nothing... :S — Javier Muñoz, Mar 18 '15 at 22:12
What layers are you using? You are probably missing a `'crossOrigin':'anonymous'` in one of your tile sources or your tile servers do not support CORS. — tsauerwein, Mar 19 '15 at 07:47
Did you figure this out. I have the same problem, adding the crossOrigin attribute to my tile source did not help. — ProfNimrod, Apr 03 '15 at 14:30

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

8

It would be helpful if you could post the code you are using to modify the canvas before attempting to export it. With the information you provided, my guess would be that you are writing content from an external source to your canvas. This is why it was working before and is no longer working. I assume your initial tests used a resource from the same origin.

Explanation

The same security sandbox exists with the canvas as does with any data requests being made from your code. Anytime you load content from another domain/origin it will trigger the canvas to set the origin-clean flag to false. This means the browser will prevent you from exporting data that has been loaded into the canvas. There are quite a few posts pertaining to this type of issue on StackOverflow:

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 18 '15 at 22:19

Shawn Lehner

1,293
7
14

Thanks for the update but it doesn't appear to contain any of the drawing code. Where do you actually draw to the canvas? – Shawn Lehner Mar 18 '15 at 22:52
OpenLayers is drawing to the canvas. That why you don't see any actual drawing code. – tsauerwein Mar 19 '15 at 07:48
1

Gotcha. Is it drawing using a tile set? And is that tile set hosted on the same domain as the page attempting to export the canvas? If not, this is your issue. – Shawn Lehner Mar 19 '15 at 13:49

SecurityError: The operation is insecure in canvas.toDataURL

1 Answers1

Explanation

Linked