javascript - How do I bypass a same origin policy violation for one local file to another? - Stack Overflow

admin管理员组

文章数量:1324431

I'm trying to semi-recreate Mozilla's demo usage of JavaScript + <video> + <canvas> with files that aren't hosted on a server.

Loading my document causes the error console to report this error:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///media/disk/javascript/html5/chromakey/chromakey1.htm Line: 23"]

Here's line 23:

this.referenceImageData = this.bCtx.getImageData(0, 0, this.bufferCanvas.width, this.bufferCanvas.height);

It's trying to get the image data from a canvas to which I previously copied a frame of video like this:

this.bCtx.drawImage(this.inputElement,
    0, 0,
    this.inputElement.width, this.inputElement.height,
    0, 0,
    this.bufferCanvas.width, this.bufferCanvas.height
);

Where this.inputElement references this (fairly boring) element:

<video id="MainInput" src="320x240.ogg" width="320" height="240"></video>

Is there any way to get past this error without signing my code with a JAR?

I think it has to do with Firefox's same origin policy () having an issue local file access, but I can't figure out where to go from there.

I'm trying to semi-recreate Mozilla's demo usage of JavaScript + <video> + <canvas> with files that aren't hosted on a server.

Loading my document causes the error console to report this error:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///media/disk/javascript/html5/chromakey/chromakey1.htm Line: 23"]

Here's line 23:

this.referenceImageData = this.bCtx.getImageData(0, 0, this.bufferCanvas.width, this.bufferCanvas.height);

It's trying to get the image data from a canvas to which I previously copied a frame of video like this:

this.bCtx.drawImage(this.inputElement,
    0, 0,
    this.inputElement.width, this.inputElement.height,
    0, 0,
    this.bufferCanvas.width, this.bufferCanvas.height
);

Where this.inputElement references this (fairly boring) element:

<video id="MainInput" src="320x240.ogg" width="320" height="240"></video>

Is there any way to get past this error without signing my code with a JAR?

I think it has to do with Firefox's same origin policy (https://developer.mozilla/en/Same_origin_policy_for_JavaScript) having an issue local file access, but I can't figure out where to go from there.

• javascript
• security
• html
• canvas
• same-origin-policy

Share Improve this question Follow asked Jun 24, 2009 at 20:18 x788q2302x788q2302

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

From the filesystem, each file is in a different origin (this prevents accessing e.g. /etc/passwd –let's say using an XMLHttpRequest or an iframe, and then pass data to some server on the Web using the query-string when loading an <img> or automatically sending a form though javascript). See https://datatracker.ietf/doc/html/draft-abarth-origin (it talks about "implementation-defined value", and the easiest is to have a distinct origin per file)

The easiest way to workaround your issue is to run an HTTP server.

There might be a solution using Firefox's "per-file permission" but I'm not sure it's really worth it given how cheap it is to run a local HTTP server... (YMMV)

Firefox's origin policy for file access can be changed in "about:config". To eliminate the same origin policy on file: URIs, change the "true" value of security.fileuri.strict_origin_policy to false.Mozilla;about:config;origin_policy setting

You need to access the file from the same origin, and I think that the file:// protocol is very restricted for obvious security reasons.

Only extensions could access these files, with more privileges.

本文标签： javascriptHow do I bypass a same origin policy violation for one local file to anotherStack Overflow