canvas.toDataURL() がセキュリティ例外をスローするのはなぜですか?

HTML キャンバスを操作するときに、複雑なセキュリティ例外が発生することがあります。 toDataURL() メソッドを使用して、キャンバスの Base64 データ URL を取得しようとしています。このエラーの背後にある理由を調べて、解決策を見つけてみましょう。

toDataURL() メソッドを使用すると、キャンバスのコンテンツを Base64 でエンコードされた文字列に変換できます。これは、画像の保存や共有に役立ちます。ただし、キャンバス要素が「オリジンが汚れている」と見なされる場合、このメソッドはセキュリティ例外を発生させることを理解することが重要です。

HTML 仕様によれば、キャンバス要素に読み込まれた画像が含まれている場合、キャンバス要素はオリジンが汚れていると見なされます。 Web ページ自体とは異なるサーバーから。コード スニペットでは、画像は Web ページとは異なるオリジンである「www.ansearch.com」から読み込まれています。

このセキュリティ制限は、クロスオリジン コンテンツの汚染を防ぐために設けられています。悪意のある Web サイトが別の Web サイトの画像にアクセスして画像を変更する可能性があり、セキュリティ リスクが生じます。したがって、toDataURL() を使用してオリジンがクリーンでないキャンバスを Base64 文字列に変換しようとすると、SECURITY_ERR 例外が発生します。

この問題を回避するには、キャンバスで使用されている画像がWeb ページと同じオリジンからロードされます。これは、独自のサーバーでイメージをホストするか、同じオリジンからイメージを提供する CDN を使用することを意味します。一致するオリジンから画像がロードされると、toDataURL() メソッドはエラーなしで機能するはずです。