question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"The canvas has been tainted by cross-origin data" caused by img attribute order on some browsers

See original GitHub issue

The crossOrigin attribute allows images that are loaded from external origins to be used in canvas like the one they were being loaded from the current origin. Using images without CORS approval taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. By loading the canvas from cross origin domain, you are tainting the canvas.

You can prevent this by setting crossorigin="anonymous".

However, CRAZILY enough, the order of the attribute on the img element does matter. I’ve been writing HTML since 2005 and this is the first time I found something like this. The crossorigin attribute must come before the src. On Chrome the order did not matter, but on Safari (and other mobile browsers) it solved the problem.

<img src="...image.jpg" crossorigin="anonymous" /> will result in Unhandled Rejection (SecurityError): The operation is insecure.

while <img crossorigin="anonymous" src="...image.jpg" /> works just fine.

Writing this down here so it can be added to the documentation and hopefully help someone in the future.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:8
  • Comments:7

github_iconTop GitHub Comments

11reactions
dmm22commented, Feb 11, 2021

What if i’m using it on an image url?

let currentImage = data[data.length - 1].data[i].image;

const fac = new FastAverageColor();
fac.getColorAsync(currentImage);

Where would the crossorigin="anonymous" go?

4reactions
EB-Plumcommented, Sep 23, 2020

this also work within order of codes

const img = new Image();
img.src = '...image.jpg';
img.crossOrigin = 'anonymous';
// not working on some ios safari
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = '...image.jpg';
// this code works
Read more comments on GitHub >

github_iconTop Results From Across the Web

Allowing cross-origin use of images and canvas - HTML
HTML provides a crossorigin attribute for images that, in combination with an appropriate CORS header, allows images defined by the <img> ...
Read more >
"The canvas has been tainted by cross-origin data" caused by ...
"The canvas has been tainted by cross-origin data" caused by img attribute order on some browsers ... The crossOrigin attribute allows images that ......
Read more >
How to Fix "The canvas has been tainted by cross-origin data ...
The canvas has been tainted by cross-origin data. As a security precaution, the browser will warn you that the canvas has been tainted....
Read more >
Issue with crossorigin anonymous failing to load images
Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer...
Read more >
see origin from a downloaded file chrome - Sauvons le climat
HTML provides a crossorigin attribute for images that, in combination with an ... to retrieve image data back from the canvas will cause...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found