canvas.toDataURL() 导致安全错误

Posted 2023-03-05

【中文标题】canvas.toDataURL() 导致安全错误

【英文标题】：canvas.toDataURL() causing a security error

【发布时间】：2012-12-29 01:33:42

【问题描述】：

我正在通过KineticJS's .toDataURL() 方法使用 html5 画布和 .toDataURL() 函数。画布使用我的用户上传到站点的图像，这些图像存储在不同的机器和子域farm1.domain.com。

问题：当.toDataURL()被调用时，我得到了错误

SECURITY_ERR: DOM Exception 18 

有没有办法解决这个问题？如果用户通过domain.com 访问页面并且图像托管在www.domain.com，我也会遇到同样的问题。

尝试：

我在 virtualhost 中的httpd.conf 中添加了以下几行并重新启动了 apache 服务。

Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"

从domain.com 的页面访问托管在www.domain.com 上的图像时，我仍然遇到同样的错误！在 KineticJS 中有没有办法解决这个问题？

【问题讨论】：

可能重复：***.com/questions/9344548/… 和 ***.com/questions/2390232/…

重复并被回答，看右栏中的相关，这里是spec

我猜必须将 origin-clean 标志设置为 true 以避免错误？这可以在 KineticJS 中完成吗？

这似乎在 Chrome 45 中有效，我只在 Safari 9 中遇到问题

【参考方案1】：

没有办法解决这个错误。从不同域加载到画布中的图像将引发此错误，因为每个浏览器当前都已实现。在您的情况下，图像应该存储在同一个域中，并且您不会遇到异常。

【讨论】：

我无法将图像存储在其他服务器和 CDN 中，这真的很奇怪，尤其是当图像数量无法容纳在单个服务器中时......

@Nyxynyx 是的，不幸的是，这是画布元素的安全限制。

【参考方案2】：

您需要将Access-Control-Allow-Origin 标头添加到您正在加载的图像中，而不是添加到正在加载它们的页面中。有关此标头以及一般 CORS 的详细信息，您可能需要阅读专门讨论此问题的“CORS isn't just for XHR”。