別のオリジンから画像をロードすると、「canvas.toDataURL()」がセキュリティ例外をスローするのはなぜですか?

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

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

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

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

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

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

以上が別のオリジンから画像をロードすると、「canvas.toDataURL()」がセキュリティ例外をスローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。