HTML Escape/Unescape｜XSS 対策の基本と 5 大特殊文字のエンティティ化

HTML XSS セキュリティ
結論：30秒で HTML エスケープをマスターする
  • 基本原則: ユーザー入力を HTML 内に直埋めする際は必ず &, <, >, ", ' を置換
  • JS での安全な表示: element.textContent = str （自動でエスケープ処理される）
  • 変換ツール: 下のコンポーネントで即座に相互変換

1. オンライン HTML エスケープ / アンエスケープ

入力テキストの特殊文字を HTML エンティティに変換（または逆変換）します。

🛡️ この場でHTMLエスケープする

2. エスケープ対象文字とエンティティ変換表

文字記号変換後の HTML エンティティ危険性の理由
<小なり&lt;タグの開始文字（<script> 等の注入防止）
>大なり&gt;タグの終了文字
&アンパサンド&amp;エンティティ宣言の開始文字
"ダブルクォート&quot;HTML 属性値（href="..."）脱出の防止
'シングルクォート&#39; または &apos;シングルクォート属性値の脱出防止

3. JavaScript での実装コード例

① 正規表現による自作エスケープ関数

function escapeHtml(str) {
  if (typeof str !== 'string') return str;
  return str.replace(/[&<>"']/g, (match) => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
    };
    return escapeMap[match];
  });
}

console.log(escapeHtml('<script>alert("XSS")</script>'));
// "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"

4. 注意点（ハマりどころ）

  1. ダブルエスケープ（二重変換）
    • 既に &lt; に変換された文字列を再度 escapeHtml() に通すと &amp;lt; になり、画面に &lt;script&gt; とそのまま文字として表示されてしまいます。
  2. HTML 属性値のクォート囲み漏れ
    • <input value=ユーザー入力> のように属性値をクォートで囲まないと、スペース文字等で属性を脱出される危険があります。属性値は必ず value="..." のようにクォート囲みを徹底してください。