HTML エンコーダー・デコーダー
通常テキスト、テンプレート断片、属性値、エンティティ文字列を貼り付けると、ブラウザ内で HTML エンティティのエンコードとデコードを行えます。エンコードモードでは、山括弧、引用符、アポストロフィ、アンパサンドなど HTML 解析に影響する文字をエスケープするか、より広い出力向けに HTML5 の extensive エンティティモードを使えます。デコードモードでは、名前付きエンティティ、10 進数値エンティティ、16 進数値エンティティを復元でき、リッチテキスト、クローラー結果、ログフィールド、重複エンコードの確認に役立ちます。
- 山括弧、引用符、アポストロフィ、アンパサンドをエンコードし、タグや属性構造として誤って解析される可能性を減らします
- 日常的な HTML 安全性には特殊文字エスケープを、より広い互換性には HTML5 の extensive エンティティ出力を選べます
- 名前付きエンティティ、10 進数値エンティティ、16 進数値エンティティをデコードし、未知のエンティティはそのまま残します
- テンプレートテキスト、属性値、リッチテキスト、メールソース、CMS 内容、クローラー結果、ログフィールドの確認に向いています
- 出力を入力に戻して、重複エンコード、欠けたエンティティ、文脈処理で戻せない変化を確認できます
- すべての変換は現在のブラウザタブ内で実行され、貼り付けた内容はアップロードされません
概要
内容をテキストとして表示すべきか、すでにエンティティ化されているか、属性、メール、CMS、ログへ入れる前にどの処理が必要かをローカルで確認できるワークベンチです。
- 01
特殊文字のエンコード
山括弧、二重引用符、アポストロフィ、アンパサンドを対応するエンティティに変換します。コード例、ユーザーテキスト、通常の文面を HTML テキストノードや属性値に表示したいときに使えます。
- 02
HTML5 extensive エンティティのエンコード
HTML5 の extensive エンティティ出力を使うと、記号、句読点、数学記号、通貨記号、その他対応文字をエンティティとして表せます。古いシステム、メールソース、明示的にエンティティ出力が必要な場面に向いています。
- 03
エンティティのデコード
名前付きエンティティ、10 進数値エンティティ、16 進数値エンティティを読みやすいテキストへ戻し、実際の内容、エンコード階層、出力元のルールを確認できます。
- 04
テンプレート出力の確認
テンプレート出力が未エンコードなのか、1 回だけエンコード済みなのか、重複しているのかを確認し、コード例、ユーザーテキスト、リッチテキスト概要の誤表示を避けやすくします。
- 05
属性テキストの処理
title、alt、aria-label、data 属性などに入るテキストを処理し、引用符、アポストロフィ、アンパサンド、山括弧が属性境界を壊すリスクを減らします。
- 06
往復確認
出力を入力に戻してモードを切り替えることで、内容が保たれるかを確認し、重複エンティティ化や HTML を通常テキストとして扱った結果も見つけやすくなります。
- 07
サンプル入力
HTML 断片、属性テキスト、エンティティテキストのサンプルを用意しているため、実データを貼る前に現在のモードを確認できます。
- 08
ローカル処理
変換、コピー、往復確認はすべてブラウザ内で行われます。テンプレート草稿、メールソース、内部ログ、CMS 内容は端末内に留まります。
使い方
変換方向を選び、入力を貼り付け、必要に応じてエンコードモードを選ぶと、出力がリアルタイムで更新されます。
- 01
変換モードでエンコードまたはデコードを選びます。
- 02
テキスト、HTML 断片、エンティティ文字列を入力欄に貼り付けます。
- 03
エンコード時、HTML 構造に影響する文字だけを処理するなら特殊文字モードを使います。より広いエンティティ出力が必要な場合は HTML5 extensive エンティティモードを使います。
- 04
出力を確認し、それがテキストノード、属性値、ドキュメント表示のどこで使われるかを確認します。
- 05
結果をコピーするか、出力を入力に戻してモードを切り替え、元のテキストへ戻るかを確認します。
詳細
HTML エンティティ変換で重要なのは、より多くの文字を変換することではなく、内容がテキストノード、属性、メールソース、別形式のどの境界へ入るかを見極めることです。
- コード例、山括弧を含むテキスト、ユーザー入力をページ本文に表示したいときは、エンコードの特殊文字モードを使います。
- 属性値を扱う場合は、引用符、アポストロフィ、アンパサンド、山括弧を重点的にエンコードします。属性が URL の場合は URL エンコード規則も必要です。
- メールソース、CMS フィールド、クローラー結果、ログに含まれるエンティティテキストを確認するときは、先にデコードして実際の文字を確認します。
- 古いシステム、メールソース、明示的なエンティティ出力要件に向けて、より広い名前付きまたは数値エンティティ出力が必要な場合は HTML5 extensive エンティティモードを使います。
- 内容が後で JSON、JavaScript 文字列、CSS に入る場合は、その境界で正しいエンコードを改めて適用してください。HTML エンティティを汎用エスケープとして扱わないでください。
- 一部の HTML タグを許可する必要がある場合は、許可リスト付きの HTML sanitizer を使ってください。エンティティエンコードは文字表現を変えるだけで、タグや属性を選別しません。
活用シーン
HTML エンティティは、テンプレート、リッチテキスト、メール、クローラー結果、CMS、ログ確認でよく現れます。このツールは、小さなテキスト断片を確認してコピーする用途に向いています。
-
コード例の表示
タグの例をドキュメント本文に置く前にエンコードすると、ブラウザは実際の HTML として解析せず、テキストとして表示します。
-
属性値の準備
title、alt、aria-label、data 属性へ入れる前に、引用符やアンパサンドをエンコードし、属性構造を壊すリスクを減らします。
-
テンプレート出力の確認
レンダリング前後のテキストを比較し、未エンコードなのか、1 回だけエンコード済みなのか、重複してエンコードされているのかを判断できます。
-
リッチテキスト内容の確認
エディター、CMS、データベースフィールドから取り出したエンティティテキストをデコードし、ユーザーが実際に入力した内容を確認します。
-
メールソースの読み取り
HTML メールやメールテンプレートにはエンティティがよく含まれます。デコードすると、見出し、ボタン文言、法務テキストを確認しやすくなります。
-
クローラー結果とログの整理
スクレイピング結果、エラーログ、API レスポンス内のエンティティを戻し、読みやすくしてから後続の整理へ進めます。
-
記号とレガシー経路の処理
特殊記号、句読点、数学記号、またはレガシー出力要件でエンティティ形式の表現が必要な場合は、HTML5 extensive エンティティモードを使います。
-
エンコード方針の確認
テンプレートエンジン、エスケープ関数、CMS 出力ルールを変更する前に、小さなサンプルで期待どおりのエンティティ変換になるかを確認できます。
関連情報
エンティティ化したテキストをリンクパラメータへ入れる場合は、続けて URL エンコーダー・デコーダー でパーセントエンコードしてください。画像を HTML、CSS、Markdown 向けのインラインリソースにする場合は、まず 画像 to Base64 で Data URL を生成できます。通常テキスト、token 断片、設定値を扱う場合は Base64 エンコーダー・デコーダー で Base64 の往復確認を行えます。
使い方のヒント
HTML エンティティの問題は、文脈の混同、重複エンコード、テンプレートエンジンの自動エスケープに手動処理を重ねることから起きがちです。
- まず内容が HTML テキストノード、属性値、または別形式に入るのかを確認してください。場所によって必要なルールが変わります。
- エンコード前に、テキストがすでにエンティティを含んでいないか確認してください。エンティティ化済みのテキストを再処理すると、アンパサンドが再変換されがちです。
- ユーザーに見える通常の文面では、多くの場合、特殊文字エスケープで十分です。Extensive エンティティ出力は、古いシステム、メールソース、明示的にエンティティ出力を求める場面に向いています。
- テンプレートエンジンは通常、既定でエスケープします。意図的に 2 層目のテキスト表示が必要な場合を除き、手動エンコードと自動エスケープを同じ内容に重ねないでください。
- デコードは確認には便利ですが、デコードした信頼できない HTML をページへ直接挿入したり、制御されていない HTML レンダリング API に渡したりしないでください。
- 一部のタグを許可する必要がある場合は、成熟した HTML sanitizer を使い、許可するタグ、属性、プロトコルを明示してください。
- 内容が URL、JSON、JavaScript、CSS へ渡る場合は、その境界で正しいエンコードを改めて適用してください。
- 公開前に、小さなサンプルでエンコードとデコードを往復し、記号、多言語文字、Emoji が削除されたり二重にエンコードされたりしていないか確認してください。
制限事項
HTML エンティティ変換が解決するのは文字表現の問題です。完全なコンテンツセキュリティ戦略ではありません。
- HTML エンティティエンコードは暗号化ではなく、アクセス制御でもありません。誰でもデコードできます。
- HTML エンティティエンコードだけでは XSS を完全に防げません。実際のページでは、文脈に応じたエスケープ、HTML sanitization、CSP、安全なレンダリング設計が必要です。
- このツールはエンティティライブラリの HTML5 エンティティ規則に従ってデコードします。未知のエンティティは通常、エラーではなくそのまま残ります。
- 特殊文字モードは HTML 構造に影響する文字を中心に扱います。通常の文章、Emoji、多くの記号を書き換えようとはしません。
- HTML5 extensive エンティティモードでは、より多くの対応文字が名前付きまたは数値エンティティとして表されるため、出力が長くなることがあります。
- デコードした信頼できない HTML をページ内容として挿入しないでください。特に制御されていない HTML 注入 API は避けてください。
- 数十 MB の入力では、テキストエリアやクリップボード操作が遅くなります。その規模ではスクリプトやストリーミング処理が適しています。
よくある質問
エンコード範囲、重複エンコード、安全性の境界、属性テキスト、ローカル処理についての実用的な回答です。
HTML エンコードと HTML エスケープは同じですか？
日常的には同じ意味で使われることがあります。ここでのエンコードは、山括弧、引用符、アンパサンドのように HTML 解析へ影響する文字をエンティティへ変換することを指します。本番コードでは、テキストノード、属性、script、style を別々の文脈として扱う必要があります。
なぜアンパサンドをエンコードする必要がありますか？
アンパサンドはエンティティの開始文字です。そのまま残すと、エンティティのように見えるテキストがブラウザでさらに解析されたり、別の処理段階で曖昧になったりします。
アンパサンドが何度も変換されるのはなぜですか？
多くの場合、内容が 2 回エンコードされています。最初の処理でアンパサンドがエンティティになり、次の処理でその中のアンパサンドが再びエンコードされています。1 回デコードして元の内容を確認してください。
特殊文字モードと extensive モードの違いは何ですか？
特殊文字モードは、山括弧、引用符、アポストロフィ、アンパサンドなど HTML 解析に影響しやすい文字を中心に扱います。Extensive モードは、より多くの対応記号や文字を HTML5 エンティティとして出力します。
デコードすると HTML やスクリプトが実行されますか？
いいえ。このツールはエンティティをテキスト文字に戻すだけで、結果をページへ挿入して実行することはありません。ただし、デコードした信頼できない HTML をアプリケーションページで直接レンダリングしないでください。
このツールで XSS を防げますか？
単独では防げません。エンティティエンコードは文脈に応じたエスケープの一部ですが、XSS 対策には安全なテンプレート、sanitizer、CSP、信頼境界、正しいレンダリング API も必要です。
属性内ではどの文字をエンコードすべきですか？
少なくとも引用符、アポストロフィ、アンパサンド、山括弧をエンコードしてください。正確なルールは、属性の引用方法、URL 属性かどうか、テンプレートエンジンがすでにエスケープしているかにも依存します。
内容はブラウザの外へ送信されますか？
いいえ。エンコード、デコード、コピー、出力を入力として使う処理は、すべて現在のブラウザタブ内で実行されます。入力はサーバーへ送信されません。
関連ツール
次の作業として、エンティティテキストを URL パラメータへ入れる、画像を Data URL にする、通常テキストの Base64 往復を確認する、といった処理へ進めます。