HTMLエスケープとは？

HTMLエスケープとは、HTML内で特別な意味を持つ文字を、対応するエンティティ参照に置き換える処理です。エスケープが必要な5つの文字は、アンパサンド（&）、小なり記号（<）、大なり記号（>）、ダブルクォート（"）、シングルクォート（'）です。エスケープしない場合、ブラウザはこれらの文字をマークアップの指示として解釈してしまい、ページのレンダリングが崩れたりインジェクション攻撃の糸口を与えたりします。

HTML仕様（WHATWGが管理）では、文字参照に2種類の形式が定義されています。& のような名前付きエンティティと、& や & のような数値エンティティです。名前付きエンティティはソースコードで読みやすい反面、数値エンティティ（10進数または16進数）は名前付きエイリアスのない文字も含めたあらゆる Unicode コードポイントを表現できます。どちらの形式もブラウザでは同一の出力を生成します。

アンエスケープ（デコードとも呼ばれます）はその逆の処理で、エンティティ参照をリテラルの文字に戻します。HTMLソースからテキストを抽出する場合、システム間でコンテンツを移行する場合、またはエンティティが二重エンコードされたテンプレートをデバッグする場合によく使われます。このツールはブラウザ内でどちらの方向にも変換できるため、エスケープロジックの検証やHTMLの多いソースから平文を取り出す作業が素早く行えます。

HTMLエスケープツールを使う理由

大量のテキストブロックにわたって手動で山括弧やアンパサンドを置き換えるのは手間がかかり、ミスも起きやすいです。専用ツールを使えば、インストール不要で入力を一度に変換できます。

⚡

即時変換

テキストまたはHTMLを貼り付けると、すぐにエスケープまたはアンエスケープされた出力が得られます。処理はJavaScriptによってローカルで実行されるため、サーバーへの往復を待つ必要はありません。

🔒

プライバシー優先の処理

入力内容はブラウザの外に送信されません。サーバーに送られることも、どこかに保存されることもないため、認証情報、APIキー、内部コードを含むマークアップも安全にエスケープできます。

📋

アカウント・インストール不要

ページを開いてすぐに貼り付けを開始できます。ログイン画面も、メール登録も、インストールするソフトウェアも一切不要です。最新ブラウザーが動作するデバイスならどこでも使えます。

🌐

完全なエンティティ対応

HTMLの必須特殊文字5種類と数値エンティティ（10進数および16進数）に対応しています。往復変換（エスケープ後にアンエスケープすると元の文字列に戻る）をサポートします。

HTMLエスケープの主な使用例

フロントエンド開発：ユーザー入力の表示

ユーザーが送信したテキストをページ内にレンダリングする際は、ブラウザがHTMLタグとして解釈しないよう事前にエスケープします。これは、生の文字列を出力するテンプレートにおいて蓄積型XSSを防ぐための主要な対策です。

バックエンドエンジニア：HTMLレスポンスの生成

文字列をHTMLに連結するサーバーサイドコードでは、挿入前に動的な値をエスケープする必要があります。このツールで、ネストしたクォートのようなエッジケースに対してエスケープ関数が正しい出力を生成するかを確認できます。

DevOps：HTMLへの設定の埋め込み

インラインのJSONやシェルコマンドをHTMLページ内（例：scriptタグやdata属性）に配置する場合はエスケープが必要です。設定スニペット内の山括弧やアンパサンドが正しくエンコードされているかを確認できます。

QAエンジニア：XSSベクターのテスト

一般的なXSSペイロードをツールに貼り付けて、アプリケーションの出力が正しくエスケープされたバージョンと一致するかを確認します。エスケープされた出力をアプリの出力と1文字ずつ照合できます。

テクニカルライター：ドキュメントのコードサンプル

HTMLベースのドキュメント（Jekyll、Hugo、独自CMS）にコードスニペットを公開する際、ジェネリック型構文やテンプレートプレースホルダーの山括弧をエスケープする必要があります。コードサンプルを貼り付ければ、すべての特殊文字が即座にエンコードされます。

学習：HTMLエンティティを理解する

任意の文字を入力・貼り付けて、名前付きエンティティと数値エンティティの形式を確認できます。ノーブレークスペース、エムダッシュ、Unicode記号などのエッジケースを試して、HTML文字エンコーディングの仕組みを理解できます。

HTMLエンティティ参照表

以下の表はよく使われるHTMLエンティティの一覧です。5つの特殊文字（& < > " '）はHTMLコンテンツと属性値では必ずエスケープする必要があります。その他のエンティティは任意ですが、入力が難しい文字やソースコードで曖昧になる文字に便利です。

文字	説明	名前付きエンティティ	数値エンティティ
&	Ampersand	&	&
<	Less-than sign	<	<
>	Greater-than sign	>	>
"	Double quote	"	"
'	Single quote / apostrophe	'	'
	Non-breaking space
©	Copyright sign	©	©
®	Registered sign	®	®
—	Em dash	—	—
’	Right single quote	’	’
€	Euro sign	€	€

エスケープ vs. アンエスケープ：使い分け

この2つの操作は互いに逆の変換です。方向を間違えると、二重エンコードされた出力やエスケープされていない出力が生成されます。

エスケープ（エンコード）

信頼されていないテキストや動的なテキストをHTMLに挿入するときに使用します。リテラルの < を < に変換し、ブラウザがタグの開始ではなく文字として表示するようにします。ユーザー入力、ログエントリ、またはマークアップを含む可能性のある任意の文字列をレンダリングする前に適用します。

アンエスケープ（デコード）

HTMLソースから平文を抽出するときに使用します。< を < に戻します。CMSからコンテンツを移行する場合、スクレイピングしたHTMLを解析する場合、またはエンティティ名を文字ではなく表示してしまう &amp; のような二重エンコードされた文字列を修正する場合に適用します。

コード例

以下は4つの言語でのHTMLエスケープとアンエスケープの実装例です。各スニペットはネストしたクォートや数値エンティティなどのエッジケースを含む両方向の変換を扱います。

JavaScript (browser / Node.js)

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

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

Python

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

PHP

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

よくある質問

HTMLエスケープとURLエンコードの違いは何ですか？

HTMLエスケープはHTML内で特別な意味を持つ文字（< > & " '）を < のようなエンティティ参照に置き換えてテキストとして表示させます。URLエンコード（パーセントエンコーディング）はURLで安全でない文字を %XX の16進数シーケンスに置き換えます。それぞれ異なるコンテキストを保護します。HTMLエスケープはマークアップインジェクションを防ぎ、URLエンコードは有効なクエリ文字列とパスセグメントを確保します。

HTMLでエスケープが必要な文字はどれですか？

常にエスケープが必要な5つの文字は、&（アンパサンド）、<（小なり記号）、>（大なり記号）、"（属性内のダブルクォート）、'（属性内のシングルクォート）です。これらのいずれかをエスケープしないと、レンダリングが崩れたりクロスサイトスクリプティングの脆弱性が生まれたりする可能性があります。

' はHTML5で有効ですか？

はい。' 名前付きエンティティはHTML5仕様で定義されており、すべての最新ブラウザーでサポートされています。HTML 4には含まれておらず、&、<、>、" のみが認識されていました。非常に古いHTML 4パーサーをサポートする必要がある場合は、数値形式の ' を使用してください。

&amp; のような二重エンコードされたHTMLエンティティを修正するにはどうすればよいですか？

二重エンコードは、すでにエスケープされた文字列が再度エスケープ関数を通過したときに発生します。修正するには、出力が安定するまでアンエスケープを繰り返します。二重エンコードされた文字列をアンエスケープモードでこのツールに貼り付け、& 参照が残っている場合はもう一度実行します。二重エンコードを防ぐには、エスケープ関数を適用する前に入力がすでにエスケープされていないかを確認してください。

JavaScriptの文字列内でHTMLエンティティを使用できますか？

HTMLエンティティはJavaScriptエンジンではなくHTMLパーサーによって解釈されます。scriptブロック内のコードはHTMLパーサーがページを処理した後に実行されるため、scriptブロック内の < はJavaScriptが見る前に < になっています。インラインイベントハンドラー（onclickなど）では、属性値が最初にHTMLデコードされてからJavaScriptとして実行されます。外部の .js ファイルではエンティティに特別な意味はなく、リテラルテキストとして扱われます。

PHPのhtmlspecialcharsとhtmlentitiesの違いは何ですか？

htmlspecialchars() はHTML構造に影響する5つの特殊文字（& < > " '）のみをエスケープします。htmlentities() はこれら5文字に加えて、著作権記号やアクセント付き文字など、名前付きHTMLエンティティを持つすべての文字をエスケープします。セキュリティの観点からは、ENT_QUOTES を指定した htmlspecialchars() で十分です。htmlentities() は、UTF-8を扱えないシステム向けにASCIIのみの出力が必要な場合に有用です。

HTMLエスケープだけでXSSを防ぐことができますか？

HTMLエスケープは最も一般的なケース、つまり信頼されていないテキストをHTML要素のコンテンツや属性値に挿入する場合のXSSを防ぎます。ただし、他のインジェクションコンテキストには対応していません。ユーザーデータをscriptブロックに挿入する場合はJavaScript文字列エスケープが必要です。style属性に挿入する場合はCSSエスケープが必要です。URL属性（href、src）に挿入する場合はURLの検証とエンコードが必要です。完全なXSS対策は、すべての挿入ポイントでコンテキストに応じたエスケープを適用することです。

HTML エスケープ / アンエスケープ