有没有办法确定跨域图像是不是会在不绘制画布的情况下污染画布？

Posted 2023-03-05

【中文标题】有没有办法确定跨域图像是不是会在不绘制画布的情况下污染画布？

【英文标题】：Is there a way to determine if a cross-origin image would taint the canvas without painting it?有没有办法确定跨域图像是否会在不绘制画布的情况下污染画布？

【发布时间】：2021-11-12 19:26:20

【问题描述】：

我正在编写一个允许用户输入图像 URL 的脚本。我想把它画到画布上——但前提是 CORS 政策允许我这样做而不污染画布。有没有一种直接的方法来确定图像是否会在不先将其绘制到画布上的情况下污染画布？

【问题讨论】：

需要明确的是，我不会提前知道Access-control-allow-origin 标头在接受用户输入时会返回什么，也不知道我的Origin 标头在请求中可能是什么。

【参考方案1】：

既然您已经获得了 URL，您可以简单地将 htmlImageElement 的 crossOrigin 设置为 "anonymous"。如果图像加载，它不会污染你的画布*，如果它的错误事件被触发......你将无法绘制它。

*嗯，有一种情况仍然会发生这种情况：如果图像代表浏览器的其他安全威胁，例如 Safari 中带有<foreignObject> 的 svg 图像。对于这些边缘情况，在 1x1 画布上绘图是了解的唯一方法。