中級 JavaScriptで学ぶセキュリティ基礎｜練習問題編

導入

現代のウェブアプリケーションは、ユーザーからの入力を処理する際に多くのセキュリティリスクに直面します。特に、クロスサイトスクリプティング（XSS）攻撃は、悪意のあるコードがユーザーのブラウザで実行される可能性があるため、十分な対策が求められます。このセクションでは、JavaScriptを用いた具体的なシナリオを通じて、XSS攻撃の理解とその対策について考察します。

教科書レベルの解説（セキュリティ基礎）

重要な概念の整理

XSS攻撃は、ユーザーの入力を適切にサニタイズしない場合に発生します。攻撃者は、スクリプトを挿入して他のユーザーのデータを盗み取ることが可能です。これにより、セッションハイジャックやフィッシング攻撃が行われることがあります。したがって、入力の検証と出力のエスケープが非常に重要です。

コード例（JavaScript）

// ユーザーの入力を受け取り、HTMLに表示する関数
function displayUserInput(input) {
    // ここでサニタイズを行う
    const sanitizedInput = sanitize(input);
    document.getElementById('output').innerHTML = sanitizedInput;
}

// サニタイズ関数
function sanitize(str) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
}

コードの行ごとの解説

1. ユーザーの入力を受け取る関数が定義されています。この関数は、HTML要素に入力を表示する役割を持っています。
2. サニタイズ処理を行うために、`sanitize`関数が呼び出されます。この処理は、悪意のあるコードが実行されないようにするための重要なステップです。
3. `sanitize`関数では、新しい`div`要素を作成し、ユーザーの入力をテキストノードとして追加します。これにより、HTMLエスケープが行われ、スクリプトが実行されることを防ぎます。
4. 最後に、サニタイズされた入力が指定されたHTML要素に挿入されます。これにより、安全にユーザーの入力を表示できます。

練習問題編

以下の練習問題を通じて、XSS攻撃とその対策についての理解を深めてください。

1. 問題1: `sanitize`関数を改良し、特定のHTMLタグを許可するようにしてください。例えば、``タグや``タグを許可する実装を考えてください。

   模範解答:

   
   // 改良したサニタイズ関数
   function sanitize(str) {
       const div = document.createElement('div');
       div.innerHTML = str;
       const allowedTags = ['b', 'i'];
       return Array.from(div.childNodes)
           .filter(node => allowedTags.includes(node.nodeName.toLowerCase()) || node.nodeType === Node.TEXT_NODE)
           .map(node => node.outerHTML)
           .join('');
   }
   

2. 問題2: ユーザーの入力が空でないことを確認するバリデーションを追加してください。

   模範解答:

   
   function displayUserInput(input) {
       if (!input.trim()) {
           alert('入力は空にできません。');
           return;
       }
       const sanitizedInput = sanitize(input);
       document.getElementById('output').innerHTML = sanitizedInput;
   }
   

3. 問題3: サニタイズ処理を行わない場合、どのような攻撃が考えられるか具体例を挙げて説明してください。

   模範解答:

   サニタイズを行わない場合、攻撃者は次のようなスクリプトを挿入することができます。例えば、``というコードを入力すると、他のユーザーがそのページを閲覧した際にアラートが表示され、悪意のあるコードが実行される可能性があります。これは、セッション情報の盗難や、ユーザーのデータに対する不正アクセスにつながります。