javascript - Same origin policy, google chrome, canvas and file: scheme - Stack Overflow

admin管理员组

文章数量:1326659

When trying to read image data from a canvas which was painted an image upon beforehand, Google Chrome raises a cross origin exception (plaining about the canvas being "tainted"). The directory structure is as follows.

/html/base/path
|-- index.html         contains the canvas element, references the script.js
|-- script.js          loads imgs/images.jpg, paints and queries the canvas
`-- imgs/image.jpg

The error occurs only when the page was loaded by the file:// scheme.

I wonder whether this is a Chrome bug. If not, which rules do apply? Are there any workarounds?

Unfortunately, off-line viewing is the ultimate use case, so

• the file:// scheme is indispensable
• there is no control over browser settings at the target system.

When trying to read image data from a canvas which was painted an image upon beforehand, Google Chrome raises a cross origin exception (plaining about the canvas being "tainted"). The directory structure is as follows.

/html/base/path
|-- index.html         contains the canvas element, references the script.js
|-- script.js          loads imgs/images.jpg, paints and queries the canvas
`-- imgs/image.jpg

The error occurs only when the page was loaded by the file:// scheme.

I wonder whether this is a Chrome bug. If not, which rules do apply? Are there any workarounds?

Unfortunately, off-line viewing is the ultimate use case, so

• the file:// scheme is indispensable
• there is no control over browser settings at the target system.

• javascript
• html
• google-chrome
• cross-domain

Share Improve this question Follow asked Sep 25, 2012 at 17:01 wnrphwnrph 3,39355 gold badges2727 silver badges3838 bronze badges 4

• 1 MDN on that: developer.mozilla/en-US/docs/… – m90 Commented Sep 25, 2012 at 17:07
• Thanks @m90. Strangely enough, the rule stated on MDN explicitly allows the above procedure: a file can read another file only if the parent directory of the originating file is an ancestor directory of the target file – wnrph Commented Sep 25, 2012 at 17:11
• Also heavily related: stackoverflow./questions/3481977/is-there-a-way-to-bypass-javascript-jquerys-same-origin-policy-for-local-acce – m90 Commented Sep 25, 2012 at 17:37
• @m90 No ajax, not getjson no external url. The relationship seems not so strong to me, but thanks! – wnrph Commented Sep 25, 2012 at 17:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Files loaded with file:// are always considered as ing from different domains, this is a feature you can't bypass.

From the HTML5 spec's definition of Origin :

If a Document was obtained in some other manner (e.g. a data: URL typed in by the user, a Document created using the createDocument() API, etc) The origin is a globally unique identifier assigned when the Document is created.

You can display but you can't analyze or change data read from another file if the loading protocol is file:.

---

What I would probably do in your situation (if I understand it correctly from your ments) : I would write a tiny program, that could be released in the external storage media, which would both start an http server and launch a web browser. I would do it in Go (simple to make an http server in two or three lines, native pilation for linux, Mac and Windows, enabling you to provide all needed executables) but other languages can be used too.

Give them instructions for them to start up chrome with the flag --allow-file-access-from-files.

Other than that, they would need to run a local server instance to avoid the errors.

It's a new Chromium security policy in practice. You can't do anything except disabling this policy as stated above by epascarello. Star this bug, they were kind of wishing to loosen this rule.

Check this answer also.

本文标签： javascriptSame origin policygoogle chromecanvas and file schemeStack Overflow