HTML エンティティ エンコード / デコード
HTML 用にテキストをエスケープし、エンティティをテキストに戻します。
このツールについて
<、>、&、引用符、さらに任意で非 ASCII 文字をすべてエスケープして HTML に安全に埋め込めるテキストにしたり、&、é、🚀 のような名前付き・数値エンティティをプレーンテキストに戻したりできます。
使い方
- HTML 用にテキストをエスケープするなら「エンコード」、エンティティを文字に戻すなら「デコード」を選びます。
- テキストを貼り付けます。
- 任意で、すべての非 ASCII 文字を数値エンティティとしてエンコードします。
- 結果をコピーします。
よくある質問
- HTML ではどの文字をエスケープする必要がありますか?
- & と < は常に、> は念のため、" と ' は属性値の中でエスケープします。この 5 つをエスケープすれば、ユーザーのテキストを HTML に安全に表示できます。
- エスケープで XSS を防げますか?
- 出力を文脈に合わせてエスケープすることは、HTML のテキストや属性に対する防御の基本です。ただし、script タグの中、イベントハンドラー属性、URL では十分ではなく、それぞれに専用のエンコードが必要です。
- アクセント付きの文字はエンコードが必要ですか?
- ページが UTF-8 で配信されていれば不要で、最近のページはほぼすべて UTF-8 です。非 ASCII 文字をすべてエンコードするのは、UTF-8 を扱えないシステムの場合にのみ役立ちます。
- と通常のスペースの違いは?
- はノーブレークスペース(U+00A0)です。通常のスペースと違い、ブラウザーはそこで行を折り返さず、複数続いても 1 つにまとめません。「10 km」のような値を離さずに表示したいときに使います。レイアウトや余白には、 を並べるのではなく CSS を使ってください。
- アポストロフィには ' と ' のどちらを使うべき?
- どちらも HTML5 と XML で使えますが、' は HTML 4 には含まれていなかったため、古いパーサーや一部のメールクライアントは認識しません。' はどこでも使えるため、このエンコーダーはこちらを使います。ダブルクォートで囲んだ属性の中では、アポストロフィをエスケープする必要はまったくありません。
- HTML エスケープと URL エンコードの違いは?
- HTML エスケープは HTML の中でテキストを安全にし、URL エンコードは URL の中でテキストを安全にします。href 属性内のリンクには両方が必要です。まず各クエリの値をパーセントエンコードし、次に URL 全体を HTML エスケープすると、パラメーター間の & はすべて & になります。パーセントエンコードの段階は URL ツールで行えます。
HTML エンティティとは?
HTML エンティティは、ある文字を表す短いテキストです。& で始まり、セミコロンで終わります。名前付きエンティティは、& を表す & や © を表す © のように単語を使います。数値エンティティは Unicode のコードポイントを使い、© のような 10 進数か、© のような 16 進数で書きます。ブラウザーはページを描画するときにそれらを実際の文字に置き換えるため、マークアップ自体はプレーンな ASCII のままにできます。
エンティティは 2 つの問題を解決します。1 つ目は、HTML がマークアップとして解釈してしまう文字を表示できることです。そのままの < はタグの開始になり、単独の & はエンティティの開始になります。2 つ目は、キーボードやファイルのエンコーディングで扱えない文字を書けることです。HTML5 では 2,000 個以上の名前付きエンティティが定義されており、🚀 を表す 🚀 のような絵文字を含め、あらゆる Unicode 文字を数値エンティティとして書けます。
JavaScript で HTML をエスケープする方法
ブラウザーでユーザーのテキストを表示する最も安全な方法は、そもそも HTML 文字列を組み立てないことです。innerHTML ではなく element.textContent を設定すれば、ブラウザーは値をテキストとして扱います。React、Vue、Svelte、Angular も、埋め込まれた値をデフォルトでエスケープします。リスクが戻ってくるのは、自分で管理していないデータに innerHTML、dangerouslySetInnerHTML、v-html を使った瞬間で、現代のアプリの XSS バグのほとんどはここから始まります。
テンプレートやメール本文のためにエスケープ済みの文字列が本当に必要な場合は、5 つの特殊文字を置換します。まずアンパサンド、次に <、>、ダブルクォート、シングルクォートの順です。& を最初にエスケープすることが重要で、そうしないと < が &lt; になってしまいます。この HTML エスケープツールは「エンコード」モードでまさにこの処理を行い、シングルクォートは ' と書きます。データベースや API から来た文字列が実際に何を含んでいるかを確認するには、「デコード」を使ってください。
ページに &amp; と表示されるのはなぜ? 二重エスケープの直し方
ページに & や " がそのままのテキストとして表示される場合、その文字列は 2 回エスケープされています。典型的には、値が保存前にエスケープされ、テンプレートが出力時にもう一度エスケープしています。1 回目で & が & になり、2 回目でそれが &amp; になり、ブラウザーはそれを & と表示します。代わりに HTML をエスケープしてくれる RSS フィード、CMS のフィールド、JSON API でも同じことが起こります。
解決策は、HTML に書き込む時点で 1 回だけエスケープし、それ以外の場所では生のテキストを保存することです。既存のデータを整理するには、「デコード」モードで貼り付けてください。1 回ごとに 1 層が取り除かれるので、エンティティが残っていればもう一度実行します。デコードには textarea 要素に対するブラウザーのパーサーを使うため、タグやスクリプトを実行せずにエンティティを読み取れます。変更前後のバージョンを比較するには、テキスト差分を使ってください。
よく使う HTML エンティティ
HTML でエスケープが必要な文字と、よく調べられる記号文字です。
| 文字 | 名前付きエンティティ | 数値エンティティ |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| ノーブレークスペース | |   |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
| ° | ° | ° |
| × | × | × |
| ÷ | ÷ | ÷ |
| – | – | – |
| — | — | — |
| … | … | … |
| « | « | « |
| » | » | » |
| → | → | → |
| ← | ← | ← |
| ✓ | ✓ | ✓ |
うまく動かない、または結果がおかしいですか? このツールの問題を報告