122

I get the following error in Chrome's developer tools window when I try to set a cookie using this jQuery plugin:

Uncaught Error: SECURITY_ERR: DOM Exception 18

What does this error mean and how can I fix it? I get the same error when I use this jQuery plugin.

Josh Unger
  • 6,717
  • 6
  • 33
  • 55
Pieter
  • 31,619
  • 76
  • 167
  • 242
  • If your problem is related with canvas. This is the answer http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception/41510086#41510086 – jose920405 Jan 06 '17 at 16:40

9 Answers9

152

You're most likely using this on a local file over the file:// URI scheme, which cannot have cookies set. Put it on a local server so you can use http://localhost.

Eli Grey
  • 35,104
  • 14
  • 75
  • 93
  • Wow, I'm surprised that you were able to figure out what this error message means. Talk about vague errors... Thanks man. – Pieter Apr 24 '10 at 17:54
  • 26
    Also happened for me using getImageData() on a canvas when loaded from file://. – Timmmm Jan 23 '11 at 16:39
  • 6
    Good call, also happens when calling getImageData() for an image loaded from another host. Moving the file to the same domain/protocol/etc. fixes it. – mike clagg Feb 04 '11 at 22:30
  • @Timmmm Thanks - I was having exactly this problem. – Jamie Wong Feb 13 '11 at 19:57
  • it will also hit if you try to replace the url in the history with a different domain. Seems to be a very generic "you did something the security manager didn't like" error. – cabbey Feb 24 '11 at 21:23
  • 28
    Pro tip: if you have Python installed, simply type `python -m SimpleHTTPServer` in the root directory of your site, and find it hosted at http://localhost:8000. – Thomas Sep 04 '11 at 17:00
  • 6
    For Python 3, to get the same effect you need to do `python -m http.server 8000` – Kat Dec 25 '11 at 15:46
  • 2
    If you are a iOS developer, You might be interested to know that I also experienced this issue while trying to use localStorage after loading the HTML directly into the UIWebView control. http://stackoverflow.com/questions/11371441/preventing-annoying-html5-geolocation-alerts-inside-uiwebview – Felipe Sabino Jul 17 '12 at 14:16
  • I get the issue on accessing a file on a different domain! – theiOSDude Aug 30 '12 at 15:55
18

I also had this issue while developping on HTML5 in local. I had issues with images and getImageData function. Finally, I discovered one can launch chrome with the --allow-file-access-from-file command switch, that get rid of this protection security. The only thing is that it makes your browser less safe, and you can't have one chrome instance with the flag on and another without the flag.

alocaly
  • 697
  • 6
  • 7
  • 4
    When you use --allow-file-access-from-files (notice it's now plural) you have to remember that the switch only takes effect if there aren't any other instances of Chrome already running. – BlueMonkMN Oct 30 '11 at 15:26
11

You can also "fix" this by replacing the image with its inline Base64 representation: 

img.src= "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
Useful, when you do not intend to publish the page on the web, but instead use it on local machines only.

Ibolit
  • 9,218
  • 7
  • 52
  • 96
  • 4
    Any idea how to get the base64 representation of a canvas in such a way that it doesn't throw this error? – devios1 Apr 12 '12 at 00:22
  • var canvas = document.createElement("canvas"); canvas.width = 128; canvas.height = 128; var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); return ctx.getImageData(0, 0, 128, 128); – Ray Hulha May 27 '13 at 04:01
10

Faced with the same situation playing with Javascript . Unfortunately Chrome doesn't allow to access javascript workers stored in a local file.

One kind of workaround below using a local storage is to running Chrome with --allow-file-access-from-files (with s at the end), but only one instance of Chrome is allowed, which is not too convenient for me. For this reason i'm using Chrome Canary, with file access allowed.

BTW in Firefox there is no such an issue.

kindall
  • 178,883
  • 35
  • 278
  • 309
Endre Simo
  • 11,330
  • 2
  • 40
  • 49
  • I wish I could upvote more than once. Your answer just saved me TONS of time banging my head against the screen!! Many, many thanks!! – Jaime Feb 28 '13 at 18:13
5

This error pops up, if you try to create a web worker with data URI scheme.

var w = new Worker('data:text/javascript;charset=utf-8,onmessage%20%3D%20function()%20%7B%20postMessage(%22pong%22)%3B%20%7D'); w.postMessage('ping');

It's not allowed according to the standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#dom-worker

atimb
  • 1,072
  • 10
  • 15
4

I had this issue when using the history API. 

window.history.pushState(null, null, URL);

Even with a local server (localhost), you want to add 'http://' to your URL so that you have something similar to: 

http://localhost...
Mr_Pouet
  • 4,061
  • 8
  • 36
  • 47
3

I wasn't completely happy by the --allow-file-access-from-files solution, because I'm using Chrome as my primary browser, and wasn't really happy with this breach I was opening.

Now I'm using Canary ( the chrome beta version ) for my development with the flag on. And the mere Chrome version for my real blogging : the two browser don't share the flag !

Kyle Krzeski
  • 6,183
  • 6
  • 41
  • 52
alocaly
  • 697
  • 6
  • 7
2

One can also receive this error if using the new (so far webkit only) notification feature before getting permission.

First run:

<!-- Get permission -->
<button onclick="webkitNotifications.requestPermission();">Enable Notifications</button>

Later run:

// Display Notification:
window.webkitNotifications.createNotification('image', 'Title', 'Body').show();

The request permission functions needs to be triggered from an event caused by the user, otherwise it won't be displayed.

Thomas Hunter II
  • 5,081
  • 7
  • 35
  • 54
1

I was been getting that error in mobile safari when using ASP.NET MVC to return a FileResult with the overload that returns a file with a different file name than the original. So,

return File(returnFilePath, contentType, fileName);

would give the error in mobile safari, where as

return File(returnFilePath, contentType);

would not.

I don't even remember why I thought what I was doing was a good idea. Trying to be clever I guess.

anewcomer
  • 975
  • 11
  • 6