同源策略、google chrome、canvas 和 file:// 方案答案

【问题标题】：Same origin policy, google chrome, canvas and file:// scheme同源策略、google chrome、canvas 和 file:// 方案
【发布时间】：2012-09-17 06:03:56
【问题描述】：

当尝试从预先绘制图像的画布中读取图像数据时，Google Chrome 会引发跨源异常（抱怨画布被“污染”）。目录结构如下。

/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

该错误仅在页面由 file:// 方案加载时发生。

我想知道这是否是 Chrome 错误。如果不是，适用哪些规则？有什么解决方法吗？

不幸的是，离线观看是终极用例，所以

file://方案必不可少
无法控制目标系统的浏览器设置。

【问题讨论】：

关于那个的 MDN：developer.mozilla.org/en-US/docs/…
谢谢@m90。奇怪的是，MDN 上的规则明确允许上述过程：只有当源文件的父目录是目标文件的祖先目录时，一个文件才能读取另一个文件
也高度相关：stackoverflow.com/questions/3481977/is-there-a-way-to-bypass-javascript-jquerys-same-origin-policy-for-local-acce
@m90 没有 ajax，没有 getjson 没有外部 url。对我来说，这种关系似乎并不那么牢固，但谢谢！

标签： javascript html google-chrome cross-domain

【解决方案1】：

在实践中这是一项新的 Chromium 安全策略。除了按上述 epascarello 禁用此策略外，您无能为力。给这个bug加星标，他们有点想放宽这条规则。

也检查this 的答案。

【讨论】：

【解决方案2】：

以file:// 加载的文件始终被视为来自不同的域，这是您无法绕过的功能。

来自the HTML5 spec's definition of Origin：

如果以其他方式获取文档（例如数据：URL 由用户输入，使用 createDocument() 创建的 Document API 等）来源是一个全局唯一标识符，当文档已创建。

如果加载协议为file:，则可以显示但不能分析或更改从其他文件读取的数据。

我在你的情况下可能会做什么（如果我从你的 cmets 中正确理解的话）：我会写一个小程序，可以在外部存储媒体中发布，这两个都可以启动http 服务器并启动 Web 浏览器。我会在 Go 中完成（只需两行或三行即可创建一个 http 服务器，Linux、Mac 和 Windows 的本地编译，使您能够提供所有需要的可执行文件）但也可以使用其他语言.

【讨论】：

为什么会这样？它是一个错误吗？如果不是：适用哪些规则？
这是一项功能。但是你说的“离线”查看是什么意思？如果是同域下载的文件，你可能还有其他与HTML5缓存相关的解决方案。但是如果你想访问用户文件，你就不能。跨度>
从物理存储介质（如笔式驱动器、CD 等）离线查看
所以你可能不走运。其他解决方案（可能是小程序）也会涉及对浏览器的一些控制。
我曾经不得不在拇指驱动器上获取一个网站，通过 swfobject（你好，同源策略）加载一个 swf 文件。安装驱动器后，我最终从自动运行文件启动了 XAMPP。非常丑陋，但这是我能找到的唯一解决方案。

【解决方案3】：

给他们指示，让他们使用标志 --allow-file-access-from-files 启动 chrome。

除此之外，他们需要运行本地服务器实例以避免错误。

【讨论】：

来自 OP ：“无法控制目标系统的浏览器设置”（但也许 OP 将不得不改变他的要求）。
@dystroy :-) 不幸的是，这不是我自己的要求