🖼️

クロスオリジンな画像をキレイにして、Canvasに描画する

2024/10/04に公開

Tainted Canvas(汚染されたキャンバス)問題

セキュリティの観点から、クロスオリジンから取得した画像を CanvasRenderingContext2d に対して描画すると、その canvas 要素からは画像を取得できなくなります。
getImageDatatoBlob等の再取得系メソッドは軒並みエラーを投げるようになります。

これを回避するために、取得した画像そのものを汚染されていない画像にする処理を施します。
いわゆるオリジンロンダリングをします(そんな言葉はありません)。

結論

const launderedBlob = new Response(await fetch(CORS_URL).then(res => res.body)).blob()

いかがでしたか?

今後そう簡単に修正されるような仕様ではないと思いますが、セキュリティの意図に大きく反することには変わりないため、プロダクションには使用せず、個人開発の範疇にとどめるよう注意します。

Discussion