Tainted canvases may not be exported

html

cors-headers

local-development

web-development

byAlex Kataev·Mar 8, 2025

CORS policy restrictions might cause a "Tainted canvases may not be exported" error. A solution would be to set <image>.crossOrigin = "anonymous" for all externally sourced images before loading them onto the canvas. This will bypass the CORS restrictions:

var img = new Image();
// Enforces good security hygiene
img.crossOrigin = "anonymous";  
img.onload = function() {
    var canvas = document.createElement('canvas');
    // Kind of painting, but with pixels
    canvas.getContext('2d').drawImage(img, 0, 0);  
    var dataURL = canvas.toDataURL();  // Canvas' most wanted mugshot
};
// Ensure CORS is supported here
img.src = "https://yourdomain.com/image.png";

But don't forget, Access-Control-Allow-Origin needs to be set in the type of HTTP headers for cross-origin image loading.

How to manage CORS issues during local development

Serving assets – do it the right way

To avoid facing CORS-related issues in a local development setting, run a local server such as an Apache, IIS or Node.js server. These web servers handle CORS headers appropriately to serve files.

Let's talk about the folders

Keep your project neat and organized. This reduces complications when loading assets. Try to place HTML, CSS, and JavaScript files in the same folder or directly on the desktop. This helps keep the path simple and manageable.

What about hosting securely?

Use public folders on cloud platforms like Dropbox or GitHub for serving images. These platforms typically handle the CORS headers, simplifying the process of sharing images across multiple domains.

Yep, videos are included

To prevent the canvas from being tainted when loading videos, include the crossorigin attribute on the <img> and <video> tags. When sourcing videos, apply <source crossorigin='anonymous'> within the <video> tags.

Sensitivity towards sensitive data

Always remember, sensitive information should never be stored in local files used by canvases. Local files open to web applications fetch increase the risk of exposure of data. Handle private data securely and keep it separate from project folders.

Protective measures for canvas projects

Are you in control of your server? Then set up your headers.

If you have control over the server hosting your assets, configure it to include Access-Control-Allow-Origin: * header. This action permits cross-origin resource sharing. Do remember to specify trusted domains in production environments to avoid security risks.

Extra steps for WebGL or mapping frameworks

For libraries like OpenLayers, ensure to set the crossOrigin property on image sources:

new ol.layer.Tile({
  source: new ol.source.XYZ({
    crossOrigin: 'anonymous', // Your canvas' bodyguard
    // Other properties here
  })
});

What's in the URL?

Ensure no unwanted query parameters or debug flags are included with your image URL – these can cause security blips. Cleanliness is key:

img.src = "https://yourdomain.com/image.png"; // Clean as a whistle

One last thing to remember

If you cannot configure CORS on the assets server, use a proxy server that adds the proper headers.
Be sure your operations on canvas are only with images or videos from sources with the correct CORS settings.

explain-codes / Html / Tainted canvases may not be exported

Linked

How to download a file in React JS



How can I convert an image into Base64 string using JavaScript?



Force browser to download image files on click



Why does my http://localhost CORS origin not work?



How can I set response header on express.js assets

