Same origin policy, google chrome, canvas and file:// scheme

Question

When trying to read image data from a canvas which was painted an image upon beforehand, Google Chrome raises a cross origin exception (complaining 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.

Answer 1

Files loaded with file:// are always considered as coming 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 comments) : 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 compilation for linux, Mac and Windows, enabling you to provide all needed executables) but other languages can be used too.

Answer 2

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.