画布已被compoundStyleMap（）。get（“ background-image”）的跨源数据污染了

Question

<div id='img3'>background-image with this</div>

#img3 {
  background-image: url("../icons/we-flow.png");
}

var img = img3.computedStyleMap().get("background-image");
//img=img1;
var canvas=document.createElement('canvas');
img.crossOrigin="Anonymous";
var ctx=canvas.getContext('2d');
try {
  ctx.drawImage(img, 0, 0);
  var data=ctx.getImageData(0, 0, canvas.width, canvas.height).data;
}catch (error) {
  console.log('refresh page will get this', img.toString(), {error, img});
}

使用chrome 83运行此代码，第一次加载该代码，一切正常，但是当我在浏览器中刷新页面时，得到了console.log：

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

为什么以及如何解决？

Answer 1

在当前的Chromium实现中，将CSSImageValue::WouldTaintOrigin设置为始终返回true。

https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/css/cssom/css_style_image_value.h#L32

 bool WouldTaintOrigin() const final { return true; }

如果您能够获得在画布上绘制了此类图像源的画布数据之后，那么请立即向Chrome团队提交错误，因为这将是安全问题。 （但我无法在自己的Chrome 83或任何其他分支上重现此内容。）>

请注意，当前HTML规范仍不包含CSSImageValue

作为潜在来源，但the plan是它将落入is-origin-clean算法的HTMLOrSVGImageElement分支中。因此，CSSImageValue仅应在跨域请求的情况下弄脏画布，但是鉴于API的年轻性以及将信息存储在所有这些经常更改的接口中的困难，实现者只是错了通过简单地将其始终标记为不安全来保证安全，因为允许他们使用他们认为不安全的任何来源。