HTMLエスケープとは？XSS対策の基本と実装方法【2026年版】

HTMLエスケープの仕組み、XSS（クロスサイトスクリプティング）対策との関係、各言語での実装方法を解説。Web開発者必読。

HTMLエスケープとは

HTMLエスケープとは、HTML文書内で特別な意味を持つ文字（<、>、&、"、'）を、安全に表示するための文字参照に変換する処理です。

たとえば、ユーザーが入力した <script>alert('XSS')</script> をそのままHTMLに埋め込むと、ブラウザがスクリプトとして実行してしまいます。これが**XSS（クロスサイトスクリプティング）**攻撃の原理です。

エスケープ対象の文字

元の文字	エスケープ後	理由
`<`	`<`	HTMLタグの開始と解釈される
`>`	`>`	HTMLタグの終了と解釈される
`&`	`&`	文字参照の開始と解釈される
`"`	`"`	属性値の区切りと解釈される
`'`	`'`	属性値の区切りと解釈される

なぜHTMLエスケープが必要なのか

1. XSS攻撃の防止

掲示板やコメント欄など、ユーザー入力をHTMLに表示するすべてのWebアプリケーションで、エスケープ処理は必須です。エスケープを怠ると：

Cookieの窃取（セッションハイジャック）
フィッシング画面の表示
マルウェアの配布
個人情報の漏洩

といった深刻な被害が発生する可能性があります。

2. HTML構文の保護

エスケープしないと、ユーザー入力に含まれる < や > がHTMLタグとして解釈され、ページのレイアウトが崩れます。

各言語・フレームワークでの実装

JavaScript

function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

React / Next.js

ReactではJSXの {} 内に文字列を渡すと自動的にエスケープされます。ただし dangerouslySetInnerHTML を使う場合は手動でサニタイズが必要です。

Python

from html import escape
safe_text = escape(user_input)

PHP

$safe = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');

Go

import "html/template"
safe := template.HTMLEscapeString(input)

よくある間違い

1. URLエンコードとの混同

HTMLエスケープとURLエンコード（パーセントエンコーディング）は別物です。< はHTMLでは <、URLでは %3C になります。用途に応じて使い分けましょう。

2. 二重エスケープ

すでにエスケープ済みの文字列を再度エスケープすると、&lt; のような意図しない結果になります。エスケープは出力時に1回だけ行うのが原則です。

3. JavaScriptコンテキストでのエスケープ不足

HTML属性内のJavaScript（onclick など）では、HTMLエスケープだけでなくJavaScriptのエスケープも必要です。可能であれば、インラインイベントハンドラの使用自体を避けましょう。

ツールを使って確認

エスケープ結果を手軽に確認したいときは、AssistyのHTMLエスケープツールを使えば、リアルタイムで変換結果を確認できます。XSS対策のテストや、HTMLメールの特殊文字確認にも便利です。

まとめ

HTMLエスケープはXSS対策の最も基本的な防御手段
<、>、&、"、' の5文字が対象
多くのフレームワークは自動エスケープ機能を持つ
出力時に1回だけエスケープするのが原則
迷ったらHTMLエスケープツールでサッと確認

この記事の内容はAssistyのHTMLエスケープで実際にお試しいただけます。