無料HTMLエンティティエンコーダー — HTMLをエスケープ

HTMLエンティティエンコードとは?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

主な機能

実践的な例

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

HTMLエンティティエンコーダーの使い方

1. 1

   HTMLまたはテキストを貼り付ける

   エスケープしたいマークアップやプレーンテキストを入力ボックスに入れます。エンコード出力は入力に応じてライブで更新されます。送信ボタンはなく、どこにも送信されません。

2. 2

   エンティティ形式を選ぶ

   名前付きは読みやすい既定です（<、&、©）。受け取り側のシステムが数値参照を好む場合や、名前付きエンティティのサポートを保証できない場合は10進（<）または16進（<）に切り替えます。

3. 3

   必要に応じてすべての非ASCIIをエンコード

   現代のUTF-8ページではこれをオフのままにして、アクセントや絵文字を読みやすい生の文字として保ちます。テキストがレガシーな単一バイト文字セットを生き延びる必要があるときだけチェックを入れると、0x7F を超えるすべての文字がASCIIセーフなエンティティに変換されます。

4. 4

   エンコード結果をコピーする

   Copyをクリックしてエスケープした文字列をクリップボードに入れ、テンプレート、ドキュメントページ、データベースフィールドに貼り付ける準備をします。Clearは次のスニペットのために両方のペインをリセットします。

5. 5

   逆が必要? Swap direction

   エンティティを表す文字に戻したいときは、Swap directionでHTMLエンティティデコーダーに切り替えてください。

よくあるHTMLエンコードの間違い

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

このツールを使う人

ウェブページにコードサンプルを表示する

リテラルなHTMLを見せる必要があるチュートリアルやドキュメントを書いていますか? スニペットをエスケープして、<strong>bold</strong> がレンダリングされるのではなくテキストとして表示されるようにします。マークアップを貼り付け、エスケープした出力をコピーして <pre> や <code> ブロックに落とし込みます。

XSSに対してユーザー入力をサニタイズする

ユーザー提供の文字列をHTMLに挿入する前に予約された5文字をエスケープし、<script>…</script> のようなペイロードを無害なテキストにします。手作業でマークアップを組み立てるときの、クロスサイトスクリプティングに対する基礎的な防御です。

データベースフィールドやJSONにマークアップを保存する

HTML断片を、下流で解釈されることなくプレーンな文字列として保存する必要がありますか? 先にエンコードして、山かっことアンパサンドが保存と再表示を無傷で生き延びるようにし、取り出すときにデコードします。

メールテンプレートやCMSコンテンツを作成する

メールクライアントやコンテンツ管理システムは生の特殊文字に厳しいものです。予約セット — 任意ですべての非ASCIIも — をエスケープして、文字セットを共有しないクライアントでもテンプレートが一貫してレンダリングされるようにします。

レガシー文字セット向けにテキストを変換する

生のUTF-8を扱えないシステムを対象にしていますか? 「すべての非ASCIIをエンコード」をオンにして、すべてのアクセント付き文字、記号、絵文字をASCIIセーフなエンティティに書き換え、7ビットクリーンなパイプラインを通してもテキストが生き延びることを保証します。

XMLとSVGの属性値をエスケープする

XMLとインラインSVGはHTMLの予約文字を共有します。引用符と山かっこをエンコードして、埋め込みマークアップを含む文字列が文書構造を壊さずに属性値へ安全に収まるようにします。

エンティティをすばやく調べる

商標記号が ™ なのか ™ なのか忘れましたか? その文字を入力し、出力から名前付き・10進・16進のエンティティを読み取るか、ページを離れずに内蔵のクイックリファレンス表を参照してください。

エンコーダーの仕組み

特殊文字モード（既定）

既定ではHTMLで予約された5文字だけ — & < > " ' — が、安全な出力のためWHATWGのHTMLシリアライズ規則に従ってエスケープされます。& が最初に置き換えられるのは、他の文字のために生成したエンティティが二重エスケープされないようにするためです。非ASCIIを含む他のすべての文字はそのまま通過します。

アポストロフィは ' を使う

HTML4で未定義で一部のレガシーパーサーで安全でない名前付きの ' ではなく、シングルクォートは U+0027 を参照する数値の '（10進 '）として出力されます。これは he のような十分にテストされたライブラリの慣習に一致し、出力がHTML4・HTML5・XMLのいずれでも安全であることを保証します。

名前付き・10進・16進のエンコード

形式セレクターは各エスケープ文字の書き方を制御します。名前付きは定義済みのラベルがあればそれを使い（<、©）、10進はUnicodeコードポイントを10進で書き（<）、16進は16進で書きます（<）。数値形式は名前付き形式と同じコードポイントを参照し、解析時に交換可能です。

すべての非ASCIIエンコードオプション

有効にすると、0x7F を超えるコードポイントを持つすべての文字が選んだ形式のエンティティに変換されます。café は café（名前付き）、café（10進）、café（16進）になります。絵文字のようなastral文字はその完全なコードポイントでエンコードされます（😀 → 😀）。これはレガシー転送向けに7ビットクリーンなASCII出力を生成します。

文字セットとエンティティの違い

文字セットはテキストがどうバイトとして保存されるかを定め、エンティティはASCIIだけを使って文字を綴る方法です。UTF-8ページでは非ASCII文字にエンティティは不要で、だからこそ既定はこれらを生のまま残します。すべてをエンコードする必要があるのは、出力が非Unicode文字セットやUTF-8に敵対するシステムを通過しなければならないときだけです。

ブラウザローカル、ネットワークゼロ

エンコードはJavaScriptのメインスレッドで同期的に実行されます。API呼び出しも、サーバーへのワーカーの往復も、永続化もありません。入力はページから離れることがなく、入力中に空のネットワークパネルを見ることで確認できます。

HTMLエスケープのベストプラクティス

正しい文脈で、出力時にエスケープする

データを受け取ったときではなく、HTMLに挿入する瞬間にエンコードし、エンコードを文脈に合わせます。HTMLエンティティエンコードはHTML要素および属性の内容向けです。URLの中ではURLエンコードを、スクリプトブロックの中ではJavaScript/JSONエスケープを使います。間違った文脈でエスケープすると穴が残ります。

信頼できない入力は必ずエスケープする

ユーザー、アップロード、外部APIに由来するあらゆる文字列は、マークアップに入る前にエスケープしなければなりません。これが中核のXSS防御です。<script>alert(1)</script> のようなペイロードは、山かっこがエンティティになれば無害なテキストになります。

可能なら組み込みのエスケープを優先する

React、Vue、そしてほとんどのサーバーテンプレートエンジンは補間されたテキストを自動的にエスケープします。element.textContent を設定すればこれもエスケープしてくれます。このツールは1回限りの変換や出力の理解のために使い、アプリケーションコードでは自前で組むのではなくフレームワークの自動エスケープに頼ってください。

UTF-8ページでは非ASCIIを生のまま残す

ページが <meta charset="utf-8"> を宣言しているなら、アクセントや絵文字をエンティティにエンコードしないでください。生のUTF-8は短く、読みやすく、同じように正しいものです。「すべての非ASCIIをエンコード」は、実際に必要となる本物のレガシー文字セットのケースのために取っておきます。

混在する文脈では数値のアポストロフィを使う

出力が古いパーサー、XMLプロセッサ、メールクライアントで消費される可能性があるときは、シングルクォートに名前付きの ' より数値の ' を優先します。数値形式はどこでも理解されますが、名前付き形式はそうではなく、レンダリングされたテキストに紛れ込んだそのままの「'」はよくある、避けられるバグです。

よくある質問