21. IT

toDataURL()メソッド利用の際の 「Tainted canvases may not be exported」エラーについて

アプリ開発をイメージさせる写真
絹田 真也

こんにちは!エンジニアの絹田です。画像を他のドメインからダウンロードすると下記のようなエラーに直面することがあります。本日はこの原因と解消方法について説明します。

Unable to get data URL. Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

直訳すると

「HTMLCanvasElement」で「toDataURL」の実行に失敗しました:汚染されたキャンバスはエクスポートされない可能性があります。

ということです.

これは,CORSポリシーに違反してCanvasへ描写した画像をdataURLやblobに変換しようとすると発生するエラーです。

原因

CORSとはドメインをまたいだリソースのやり取りのことで,クロスオリジン リソース シェアリング(CORS)の略です.ドメインを跨いでリソースをダウンロードしてさらに変換するなんて悪い人がしそうなことですから,そうでない場合はCORSポリシーを適用しない旨を明示的に示す必要があります.

私はGoogle CloudのStorageに保存した画像をAngularのプロジェクトでアクセスするときに上記の問題に直面しました.Google CloudのStorgeのURLとAngularのドメインを同一にできれば問題ないのですがそういうわけにもいきません.その場合,フロントエンド側とサーバ側のそれぞれでCORSポリシーを適用しない旨を明示する必要があります. 私の場合はAngularのプロジェクトでしたが,Reactでも素のJavaScriptでも同じです.CORSポシリーって地味に面倒くさいです..

フロントエンド側の対処

絹田 真也

Canvas要素に描く際に生成元をanounymousに設定します.

download(){
	var gsReference = this.firestorage.refFromURL(
		'gs://my-app.appspot.com/imgs/'+this.authUid +'/'+this.query_img_name
	);
	const task = gsReference.getDownloadURL().subscribe(
		dataurl => {
			console.log(dataurl,'tsk');
			const image = new Image();
			image.onload = () => {
				this.canvas.nativeElement.width = image.width; 
				this.canvas.nativeElement.height = image.height; 
				this.canvas_rendering_context.drawImage(image, 0, 0);
			};
(これを追加) image.crossOrigin = "anonymous"; 
		image.src = dataurl; 
		}
	)
}

サーバ側の対処

私はGoogle Cloudを使っていたのでその設定方法を説明していますが、AWSであれば別に調べる必要があります。

絹田 真也

こんにちは!エンジニアの絹田です。今回はPythonでAphaVantage APIを扱う方法について紹介します。

touch my-cors.json
nano my-cors.json

my-cors.jsonは下記のように書きます。

[ 
	{ 
		"origin": ["*"], 
		"method": ["GET","POST"], 
		"responseHeader": ["Content-Type"], 
		"maxAgeSeconds": 3600 
	}
]

あとはコマンドから反映させます。

gsutil cors set ./my-cors.json gs://my-app.appspot.com 

参考文献

https://cloud.google.com/storage/docs/configuring-cors

データサイエンティスト
絹田 雅
アーナンダよ、あなたはカピラヴァットゥのサキャ族の人たちに、修学すべき人(有学)の修学と実践について説明しなさい。わたしは背中が疲れました。背中を伸ばそう。 マハーナーマよ、ここに貴い弟子は戒をそなえ、感覚器官の門を防御し、食事の適量を知り、覚醒しており、七つの正しい教えをそなえており、明瞭なこころに依存し、現世で安楽に過ごす、明瞭なこころに依存する四段階からなる瞑想(四禅)を希求し、容易に得て、困難なく得ます。
twitter-timeline