0

When I try to use canvas.toDataURL("image/jpeg"); on image imported from another domain, I get security error. Is there any way around this issue?

Dinesh
  • 73
  • 1
  • 5
  • 1
    did you try researching this? Sure doesn't look like it based on information you provided – charlietfl Jan 26 '15 at 05:44
  • Perhaps a dup: http://stackoverflow.com/a/2390361/816620 – jfriend00 Jan 26 '15 at 05:45
  • There was something about information headers. and origin anonymous but I did not understand it well. – Dinesh Jan 26 '15 at 05:46
  • Then ask more specific questions that show some effort was put in – charlietfl Jan 26 '15 at 05:47
  • Also see this solution: https://remysharp.com/2013/01/14/cors-isnt-just-for-xhr – jfriend00 Jan 26 '15 at 05:47
  • @Dinesh - in case you're interested, I'd never even heard of this issue before and just did a simple google search to come across those articles. Is that your issue? Were you able to solve it? – jfriend00 Jan 26 '15 at 06:41
  • No, I had seen the first question question on stack overflow you linked to but not the second article. They do what I wanted but required some server side tweaking. – Dinesh Jan 26 '15 at 09:11

1 Answers1

1

When you control the server from which you want to load the image, you can modify its cross origin resource sharing (CORS) settings to state your domain as trusted. Refer to the manual of the webserver software it is using and Serverfault for details.

When you don't control the server, a possible workaround is to have your own webserver request the image from the other server and then provide it to the client. Prerequisites for this are:

  1. Some kind of server-sided programming technology (PHP, ASP, JSP, node.js, RoR, Django, Perl or whatever you prefer)
  2. Your server must be authorized to access the image (that's the reason the cross-origin protection exists: Without it websites could leech images they can't access but their visitors can. When a user still has their example.com login cookie set, a javascript on any other website could make them request https://example.com/private/photos/me_naked_01.jpg, draw it to a canvas, get its dataUrl and upload it with an XmlHttpRequest).

Also you should not do this without permission when it means you are requesting the same images from the same server over and over again. The admin will notice the abnormal requests all originating from your webserver and decide to block it.

And when all else fails, you could use the old-school method and allow your users to upload their own images.

Philipp
  • 67,764
  • 9
  • 118
  • 153
  • I’ll upvote your answer if you remove the first part of your answer. **I fully endorse your second idea:** Combine the new **input type=file** with **FileReader** to let the user load a file from their local disk in a way that satisfies CORS. Your first idea of bouncing images off your server is great if you own the server you're fetching the images from--maybe that other server is set up as an image server and holds all your company image resources. But...[continued on next comment because of character limits] – markE Jan 26 '15 at 18:01
  • “Bouncing files off your server” works, but there are serious problems when downloading user-specified files to your own server: (1) civil liability for theft of copyrighted material, (2) felony liability for being an inadvertant conduit for illegal porn, stolen or even terrorist files, (3) opening a huge denial-of-service hole in your network, (4) increased server load both in terms of services and storage, (5) giving malware a free ride onto the server, and many, many more downsides… – markE Jan 26 '15 at 18:01