canvas 已被帶有 computedStyleMap().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; }

如果您在 canvas 上繪制這樣的圖像源后能夠獲得 canvas 數據，那么請立即向 chromium 團隊提交錯誤，因為這將是一個安全問題。 （但我無法在我自己的 Chrome 83 或任何其他分支上重現此內容）。

請注意，目前 HTML 規范仍然不包括CSSImageValue作為潛在來源，但計划是它將屬於is-origin-clean算法的HTMLOrSVGImageElement分支。 所以CSSImageValue應該只在跨域請求的情況下污染 canvas，但是考慮到 API 的年輕化以及在所有這些經常變化的接口中存儲這些信息的難度，實現者只是在安全方面犯了錯誤，只是簡單地標記它一直都是不安全的，因為他們被允許使用他們認為不安全的任何來源。