canvas.toDataURL() SecurityError

by

Unless google serves this image with the correct Access-Control-Allow-Origin header, then you wont be able to use their image in canvas. This is due to not having CORS approval. You can read more about this here, but it essentially means:

Although you can use images without CORS approval in your canvas,
doing so taints the canvas. Once a canvas has been tainted, you can no
longer pull data back out of the canvas. For example, you can no
longer use the canvas toBlob(), toDataURL(), or getImageData()
methods; doing so will throw a security error.

This protects users from having private data exposed by using images
to pull information from remote web sites without permission.

I suggest just passing the URL to your server-side language and using curl to download the image. Be careful to sanitise this though!

EDIT:

As this answer is still the accepted answer, you should check out @shadyshrif’s answer, which is to use:

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

This will only work if you have the correct permissions, but will at least allow you to do what you want.

More Related Contents:

  1. Canvas tainted by cross-origin data
  2. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  3. XMLHttpRequest cannot load XXX No ‘Access-Control-Allow-Origin’ header
  4. Enabling CORS in Cloud Functions for Firebase
  5. How do I add a simple onClick event handler to a canvas element?
  6. How to configure CORS in a Spring Boot + Spring Security application?
  7. How to add image to canvas
  8. Simulation background-size: cover in canvas
  9. HTML5 Canvas to PNG File
  10. HTML5 Canvas drawImage ratio bug iOS
  11. Can I get image from canvas element and use it in img src tag?
  12. How to save image from canvas with CSS filters
  13. Convert canvas to PDF
  14. Download Canvas as PNG in fabric.js giving network Error
  15. Cross Domain Resource Sharing GET: ‘refused to get unsafe header “etag”‘ from Response
  16. CORS – Is it a client-side thing, a server-side thing, or a transport level thing? [duplicate]
  17. HTML2canvas generates Blurry images
  18. Using Canvas to animate a sorting algorithm in JS
  19. Save canvas as jpg to desktop [duplicate]
  20. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  21. Drawing rotated text on a HTML5 canvas
  22. HTML5 Canvas Circle Text
  23. Cross-domain connection in Socket.IO
  24. HTML5 Dynamically create Canvas
  25. Image Manipulation – add image with corners in exact positions
  26. socket.io, ‘Access-Control-Allow-Origin’ error
  27. XMLHttpRequest: Network Error 0x80070005, Access is denied on Microsoft Edge (but not IE)
  28. Creating a Clickable Grid in a Web Browser
  29. canvas- Cropping images in different shapes
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment