Chrome SecurityError: DOM Exception 18

Of the more cryptic and frus­trat­ing Chrome errors are the SecurityErrors. These bad boys show up at inop­por­tune times and ruin your day with an “Uncaught Error” and a big red excep­tion killing your code in its tracks.

So you’re play­ing around with HTML5 Canvas when all of a sud­den you’re get­ting a Uncaught Error: SecurityError: DOM Exception 18 in the con­sole. What’s it mean?

DOM Exception 18

This excep­tion is thrown when your code is try­ing to access some­thing it shouldn’t, includ­ing cross-domain resources or stuff on your local filesystem.

Once you hit this one you will either need to loosen your browser secur­ity set­tings which is never optimal, or find out how to work around it.

HTML5 Canvas & Exception 18

Which brings us to the case of the com­plain­ing can­vas. Loading images into your can­vas from another domain will “taint” your can­vas, mean­ing any attempts to read the can­vas back again will fail with this error.

This is because your Javascript adheres to a same-origin policy to increase secur­ity. It’s essen­tially done as a con­tain­ment meas­ure so that a rogue script can’t use your browser to access resources you’re authen­tic­ated against.

Hypothetical Canvas Attack

For instance, if I hypo­thet­ic­ally wanted to access your email and your browser didn’t pre­vent cross-site-scripting, I could per­form a $.ajax('http://gmail.com'). This would pull down your logged-in gmail page, and then I could send all your email mes­sages back to my server.

The same applies for images.

This fea­ture pre­vents a rogue site pulling down your Facebook pho­tos, for instance (which again could hypo­thet­ic­ally be done), ren­der­ing them to a can­vas in order to get a hold of the bin­ary image data then send­ing it back to the attack server.

So the second you draw a third party image to your can­vas, you can no longer read back the res­ult­ing image.

The easy solu­tion is to host all your images loc­ally or if that’s not pos­sible you could use a script to pull down and serve the images on your behalf.

SVG Image & Canvas SecurityError

If you’re play­ing around with draw­ing SVG to Canvas in Chrome, you may also run into this secur­ity error, but for a dif­fer­ent reason.

Chrome bombs out printing a SVG

This appears to be a Chrome-specific fea­ture (per­haps a bug?) whereby the SVG doc­u­ment is con­sidered to be of dif­fer­ent ori­gin to the can­vas. This goes a step fur­ther than simply check­ing the ori­gin of the url, it out­right black­lists all SVG images regard­less of ori­gin, includ­ing images encoded in data: uris.

This means that whenever you paint a SVG to your can­vas you’re taint­ing your can­vas and won’t be able to pull inform­a­tion back out of it. This severely hinders efforts to use SVG images as dynamic game sprites, and can be frus­trat­ing to debug because it isn’t imme­di­ately obvi­ous what’s happening.

Working around the same-origin policy

It’s actu­ally pos­sible to spe­cify a cus­tom policy to over­ride the default same-origin beha­viour. This is done via cus­tom HTTP head­ers, which means you’ll need access to your web server to make these changes.

I haven’t yet exper­i­mented with this tech­nique myself, but you can read about it on HTML5 Rocks. I’ll be play­ing with this in the fol­low­ing days, but if you’ve had luck with this tech­nique, do let me know in the comments.

7 thoughts on “Chrome SecurityError: DOM Exception 18”

  1. Hello Ash,
    I am run­ning into the very same prob­lem but going through the examples at HTML5 Rocks, the change of same-origin policy does not seem to kick in. Have you had any luck with it?

  2. Hey Ash,
    Extremely help­ful! I am work­ing on draw­ing svg on can­vas objects that can be used as tex­tures in Three.js. Unfortunately, I have yet to get around this secur­ity issue. If there isn’t an easy ‘cor­rect’ way to do it, do you know of any hacks (even if they com­pletely dis­reg­ard sane secur­ity prac­tices) to get around the problem?

    1. Hmm, that’s tricky. One thing you could con­sider is using the canvg lib­rary to draw instead of using the nat­ive SVG pro­cessing. This is a sep­ar­ate imple­ment­a­tion of SVG which shouldn’t trig­ger the secur­ity exception.

      I haven’t used it for a year or so and last time I did there were a few things not imple­men­ted, but it might be a start.

  3. Thanks. This art­icle made it real quick find­ing out what was caus­ing my issue. So I guess devel­op­ing with local file urls is prob­ably out of the ques­tion? I’m just learn­ing to use can­vas and babylon.js and was work­ing from a desktop directory.

    Found a quick fix is using “python –m SimpleHTTPServer 8000″ . Of course that’s if you have python installed :-)

Leave a Reply