ホームページ > 記事 > ウェブフロントエンド > DOM ベースの XSS 攻撃から JavaScript アプリケーションを保護する
クロスサイト スクリプティング (XSS) 攻撃は、Web アプリケーションの一般的な脆弱性であり、最も危険なタイプの 1 つは DOM ベースの XSS です。この形式の XSS は、Web ページのドキュメント オブジェクト モデル (DOM) が操作されて悪意のあるスクリプトが実行されるときに発生します。このブログでは、DOM ベースの XSS とその仕組み、そして実際のサンプル コードを使用してアプリケーションをこれらの攻撃から保護する方法について説明します。
DOM ベースの XSS は、サーバー側のコードではなくクライアント側のコードに脆弱性がある XSS 攻撃の一種です。これは、Web アプリケーションがユーザー入力などの信頼できないソースからのデータを使用し、適切な検証やエスケープを行わずにそのデータを DOM に書き込む場合に発生します。これにより、Web ページのコンテキスト内で悪意のあるスクリプトが実行され、攻撃者がデータを盗んだり、セッションをハイジャックしたりすることが可能になります。
攻撃者が DOM ベースの XSS を悪用する方法を理解するために、簡単なシナリオを分析してみましょう。
脆弱な Web アプリケーションの例
URL ハッシュからのユーザー入力を使用して挨拶メッセージを表示する単純な Web ページを考えてみましょう。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM-based XSS Example</title> </head> <body> <div id="message"></div> <script> // Assume user input is taken from the URL hash var userInput = window.location.hash.substring(1); // Directly inserting user input into the DOM document.getElementById('message').innerHTML = "Hello, " + userInput + "!"; </script> </body> </html>
1.悪意のある URL の作成: 攻撃者は、URL ハッシュに悪意のある JavaScript コードを含む URL を作成できます。例:
https://xyz.com/#<script>alert('XSS');</script>
2.悪意のある URL の共有: 攻撃者はこの URL を潜在的な被害者と共有し、被害者は何の疑いもなくクリックする可能性があります。攻撃者は、電子メール、ソーシャル メディア、またはその他の手段を介してこのリンクを配布する可能性があります。
3.脆弱性の悪用: 被害者が悪意のある URL にアクセスすると、Web アプリケーションは URL ハッシュから値を抽出し、DOM に挿入します。悪意のあるスクリプトは Web ページのコンテキストで実行されます。
結果: 被害者には、スクリプトが実行されたことを示すメッセージ「XSS」を含むアラート ボックスが表示されます。実際の攻撃では、悪意のあるスクリプトが Cookie の盗用、キーストロークのキャプチャ、ユーザーのフィッシング サイトへのリダイレクトなどのアクションを実行する可能性があります。
<script> // User visits: https://xyz.com/#<script>alert('XSS');</script> var userInput = window.location.hash.substring(1); document.getElementById('message').innerHTML = "Hello, " + userInput + "!"; // This results in: Hello, <script>alert('XSS');</script>! // The alert will pop up
DOM ベースの XSS から保護するには、次のベスト プラクティスに従ってください。
1.ユーザー入力のサニタイズとエスケープ: ユーザー入力は、DOM に挿入する前に必ずサニタイズしてエスケープします。 DOMPurify などのライブラリを使用して HTML をサニタイズします。
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.8/purify.min.js"></script> <script> var userInput = window.location.hash.substring(1); // Sanitize the user input var sanitizedInput = DOMPurify.sanitize(userInput); // Insert sanitized input into the DOM document.getElementById('message').innerHTML = "Hello, " + sanitizedInput + "!"; </script>
2.安全な DOM 操作メソッドを使用します: innerHTML を使用する代わりに、textContent、createElement、appendChild などのより安全なメソッドを使用します。
<script> var userInput = window.location.hash.substring(1); var messageDiv = document.getElementById('message'); // Create a text node with the user input var textNode = document.createTextNode("Hello, " + userInput + "!"); // Append the text node to the message div messageDiv.appendChild(textNode); </script>
3.コンテンツ セキュリティ ポリシー (CSP): 強力な CSP を実装して、スクリプトをロードして実行できるソースを制限します。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">
DOM ベースの XSS は、Web アプリケーションやユーザー データを侵害する可能性がある重大なセキュリティ リスクです。ユーザー入力のサニタイズとエスケープ、安全な DOM 操作方法の使用、堅牢なコンテンツ セキュリティ ポリシーの実装などのベスト プラクティスに従うことで、DOM ベースの XSS 攻撃のリスクを大幅に軽減できます。
常に警戒を怠らず、JavaScript アプリケーションがこれらの脆弱性やその他の脆弱性から安全であることを確認してください。ご質問がある場合、またはさらにサポートが必要な場合は、以下のコメント欄にお気軽にお問い合わせください。
以上がDOM ベースの XSS 攻撃から JavaScript アプリケーションを保護するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。