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

Deciare

What have you drawn on that canvas? – Yovonnda

Are you loading an image from an external source into your canvas? – Tapping

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: developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image – Coextensive

The funny that I'm not loading the image from an external source... So, I'm not understanding nothing... :S – Cornelia

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. – Morbihan

Did you figure this out. I have the same problem, adding the crossOrigin attribute to my tile source did not help. – Sundowner

Answer 1

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:

• canvas.toDataURL() Security Error The operation is insecure
• Security Error with canvas.toDataURL() and drawImage()

Tapping

Thanks for the update but it doesn't appear to contain any of the drawing code. Where do you actually draw to the canvas? – Tapping

OpenLayers is drawing to the canvas. That why you don't see any actual drawing code. – Morbihan

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. – Tapping