3

So I have some video files on Rackspace Cloud Files but since I use HTML5 functions (.toDataURL()) "SECURITY_ERR: DOM Exception 18" keeps getting thrown. My code works fine when I use a video file on my server.

So I read up about CORS and modified my Rackspace Cloud Files headers like this:

access-control-allow-credentials:   true    
access-control-allow-origin:    [my domain here]    
access-control-allow-headers:   Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control
access-control-allow-methods:   OPTIONS, GET, POST  
access-control-expose-headers:  X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name
Content-Type:   video/webm

But the DOM Exception 18 error keeps getting thrown. I don't know what the problem is. I checked to see if the HTTP headers were being outputted by my video files on Rackspace with web-sniffer.net and they are, so what's the problem, why doesn't it work?

I have tried it on IE9, Chrome 19, Safari 5.1.2, and Aurora 12.0a2, they don't work on any of those browsers so I'm certain that this is not a browser issue.

I just have to get rid of this DOM Exception 18 error.

marvind88
  • 178
  • 7
  • 1
    please edit your question to include info on the browsers you tested and what "HTML5 functions" you used - there are lots! My educated guess would be Canvas + toDataURL but... – Jörn Berkefeld Apr 16 '12 at 07:28
  • Sorry about that I just added it in...I tested it on all the latest browsers, it's the same error so I don't think it's a browser issue and yes it is the toDataURL() function throwing the exception. – marvind88 Apr 16 '12 at 12:42

1 Answers1

2

toDataURL() will not work if your content is on a CDN (or any other host than the current) that's a security restriction of the CANVAS element.

compare http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements for details on what's prohibited

basically whenever you want to do something with images or videos within a canvas and save the result you will have to have all prior content on the same domain. one workaround would be to grab the required files and save them temporarily while the user edits it

Jörn Berkefeld
  • 2,540
  • 20
  • 31
  • But according to http://www.w3.org/TR/cors/#use-cases it should work if you modify the access control headers, they give examples of cross-domain sources working with toDataURL() when you modify the headers. Does it not work for videos or a CDN or am I missing some important piece of information? – marvind88 Apr 16 '12 at 22:42
  • the CORS rule you stated is overruled by canvas specs - it's that simple. – Jörn Berkefeld Apr 17 '12 at 09:05
  • That's a W3C examples stating "Not tainting the canvas element", so no, canvas specs. does not overrule CORS according to that use case. – skrat Jul 16 '12 at 10:35