在 file:/// 元素上使用 toDataURL 导出 Canvas 会导致污染错误，即使在本地资源上也是如此答案

【问题标题】：Exporting Canvas with toDataURL on a file:/// element causes taint error even on local resource在 file:/// 元素上使用 toDataURL 导出 Canvas 会导致污染错误，即使在本地资源上也是如此
【发布时间】：2021-06-17 23:18:44
【问题描述】：

我有一个本地 HTML 页面，它是使用 file:// 协议从硬盘驱动器（在 Android WebView 内）加载的。（文件夹：WirelessBarcodeScanner/Custom Forms/bctest.html）

使用本地文件加载：// （文件夹：WirelessBarcodeScanner/_temp/img_9857836593673.jpeg）

然后我将此 img 导出到画布，并尝试对其执行 toDataURL()。使用“可能无法导出受污染的画布”导致 SecurityException。

如何解决这个安全问题？ CORS 来源应相同，因为两个来源相同（本地硬盘）。

我可以用 _temp 文件夹做些什么来告诉这里的任何资源都可能以某种方式导出？

【问题讨论】：

标签： html5-canvas android-webview file-uri

【解决方案1】：

默认情况下，Android WebView 不允许跨域访问。带有 file:// URL 的图像始终是跨源的，因此 WebView 会阻止 CORS 请求，并且画布会获取 tainted。

但是，可以将 WebView 配置为允许跨域访问 file:// URL，如下所示：

webView.getSettings().setAllowFileAccessFromFileURLs(true);

【讨论】：