JavaScriptでHTML特殊文字をエスケープする方法をわかりやすく解説

JavaScriptでHTML特殊文字をエスケープする方法

Webアプリケーション開発では、ユーザー入力などをそのままHTMLに出力すると、意図しないタグが解釈されたり、最悪の場合はXSS（クロスサイトスクリプティング）攻撃を受ける危険性があります。これを防ぐために欠かせないのが「HTMLエスケープ」です。

JavaScriptでHTMLの特殊文字をエスケープするには、replace()メソッドを使うのが一般的です。主な対象となる特殊文字と、その変換後の表現は以下のとおりです。

• & → &
• < → <
• > → >
• " → "
• ' → '

replace()メソッドを使った実装例

次のコードは、特殊文字を安全なHTMLエンティティに変換する関数の例です。

function escapeHTML(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(//g, ">")
    .replace(/"/g, """)
    .replace(/'/g, "'");
}

console.log(escapeHTML('Hello'));
// 結果: <b>Hello</b>

実装時の注意点

エスケープ処理では、必ず最初に「&」を置き換えることが重要です。先に他の文字を変換してしまうと、後から生成された「&」などの一部が再び置き換えられ、正しい結果が得られなくなります。

また、ブラウザ環境であれば、DOM APIを利用したシンプルな方法もあります。textContentに代入すれば、ブラウザが自動的に特殊文字をエスケープしてくれます。

function escapeHTMLByDOM(unsafe) {
  const div = document.createElement('div');
  div.textContent = unsafe;
  return div.innerHTML;
}

Node.jsなどサーバーサイドでは専用のライブラリ（例：escape-html）を活用するのも有効です。状況に応じて適切な方法を選び、ユーザー入力をHTMLに出力する際は必ずエスケープ処理を行うようにしましょう。