HTMLのtoDataURLでUncaught SecurityError例外が発生する原因と解決策

toDataURLでUncaught SecurityError例外が発生する原因とは？

JavaScriptでCanvasのtoDataURL()メソッドを呼び出した際、「Uncaught SecurityError」例外がスローされることがあります。このエラーは、別ドメイン（クロスオリジン）から読み込んだ画像をCanvasに描画した場合に発生する、典型的なセキュリティ関連の問題です。

エラーが発生する仕組み

ブラウザには「同一オリジンポリシー」というセキュリティ機構が備わっています。外部ドメインの画像をそのままCanvasに描画すると、そのCanvasは「汚染（tainted）」された状態になります。汚染されたCanvasに対してtoDataURL()やgetImageData()を実行すると、悪意あるデータ取得を防ぐため、セキュリティ例外が発生します。

解決策：img要素にcrossorigin属性を追加する

この問題を解決するには、<img>タグにcrossorigin="anonymous"属性を追加します。これにより画像がCORS（Cross-Origin Resource Sharing）経由で正しく読み込まれ、Canvasが汚染されなくなります。

<img id="myid" crossorigin="anonymous" src="https://example.com/images/sample.jpg?v=2">

function getBase64() {
    var myImg = document.getElementById("myid");
    var c = document.createElement("canvas");

    c.width = myImg.width;
    c.height = myImg.height;

    var context = c.getContext("2d");
    context.drawImage(myImg, 0, 0);

    var dataURL = c.toDataURL("image/png");
    alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
}
getBase64();

注意点：サーバー側の設定も必要

crossorigin属性を追加しても、画像を配信するサーバー側がCORSに対応していなければ機能しません。サーバーがレスポンスヘッダーにAccess-Control-Allow-Originを適切に返すよう設定されていることを確認してください。

• 同一ドメインの画像： crossorigin属性は不要です
• 外部ドメインの画像： crossorigin="anonymous"属性の追加と、サーバー側のCORS設定の両方が必要です

上記の対応を行うことで、外部画像を使ったCanvas操作でもtoDataURL()を安全に実行できるようになります。