HTMLエンコーダー / デコーダー

テキストをHTMLエンティティにエンコードまたはHTMLエンティティをテキストにデコードします。

入力テキスト

HTMLエンコーダー / デコーダーの使い方

1
テキストまたは HTML を入力する
エスケープしたいプレーンテキスト、または戻したい HTML エンティティを入力ボックスに貼り付けます。
2
エンコードかデコードを選ぶ
「Encode to HTML Entities」をクリックして < > & のような文字を安全なエンティティに変換するか、「Decode HTML Entities」でエンティティを読める文字に戻します。
3
出力を確認する
変換結果を出力ボックスで確認し、必要に応じて「Swap Input/Output」で逆変換を続けられます。

4
結果をコピーする
「Copy Output」を押してエンコードまたはデコードしたテキストを取得するか、「Clear Both」でフィールドをリセットします。

HTMLエンコーディング: 特殊文字を安全にエスケープする

HTMLエンコーディングの意味

HTMLエンコーディングは、HTMLエスケープとも呼ばれ、HTMLで特別な意味を持つ文字を文字参照に変換して、ブラウザがそれらをマークアップとして解釈するのではなく、文字どおりのテキストとして表示するようにします。ブラウザは生の < をタグの始まりとして読むので、ページに実際の小なり記号を表示するには、代わりに参照 < を書かなければなりません。エンコーディングは、表示したいものと、さもなければブラウザが実行してしまうものとの間の、安全な翻訳です。

日常的なHTMLで本当にエスケープが必要な文字はほんのひと握りですが、それを正しく行えるかどうかが、正しく表示されるページと、壊れたり脆弱になったりするページとの分かれ目です。参照には2種類あります。< のような名前付き実体と、< や < のような数値参照で、いずれも同じ見える文字を生み出します。

中心となる文字とその実体

5つの文字で、ほとんどすべてのエスケープの必要が満たされます。アンパサンド & は & になり、すべての実体を始める文字なので、手作業の変換ではどんなときも最初に来なければなりません。小なり記号 < は < に、大なり記号 > は > になります。これらはタグを区切るからです。二重引用符 " は " に、単一引用符すなわちアポストロフィ ' は '（HTML5では名前付きの '）になり、これらは属性値の中で重要になります。

アンパサンド最優先のルールは、微妙なバグを防ぎます。もし < を < に置き換えてから後でアンパサンドをエスケープすると、書いたばかりの < を &lt; に変えてしまい、ページに文字どおりのテキスト "<" を表示することになります。常にほかより先に & をエンコードしてください。このツールは変換を自動的に正しい順序で適用するので、その罠にはまることは決してありません。

実例: コードの断片を表示する

リンクとして描画するのではなく、テキスト <a href="x">Tom & Jerry</a> を文字どおりに表示するページが欲しいとしましょう。各特殊文字はその参照に置き換えられます。開きの山括弧は < に、閉じの山括弧は > に、属性を囲む二重引用符は " に、名前の間のアンパサンドは & になります。

エンコードされた結果は <a href="x">Tom & Jerry</a> です。HTMLファイルに貼り付けると、ブラウザは、チュートリアルやドキュメントのページが例のマークアップを示すのとまったく同じように、それを動作するアンカー要素にするのではなく、元のソースコードを画面に目に見える形で表示します。

なぜエンコーディングがXSSを防ぐのか

クロスサイトスクリプティング（XSS）は、攻撃者が、後で他のユーザーに表示される入力欄、たとえばコメント、ユーザー名、検索語などを通じて、ページにHTMLやJavaScriptを注入する攻撃です。サイトがその信頼できないテキストをエスケープせずにページに挿入すると、script タグのようなペイロードが、被害者のブラウザでそのサイトの権限をもって実行され、セッションの窃取やそれ以上のことを可能にします。

エンコーディングはその攻撃を根本で無力化します。危険な文字がエスケープされると、注入された <script>alert(1)</script> は、実行可能な要素としてではなく、無害な見えるテキスト、すなわち <script>alert(1)</script> として保存され描画されます。この種の脆弱性に対する単一で最も信頼できる防御は、信頼できないあらゆるデータを、それがページに書き込まれるまさにその地点でHTMLエンコードすることです。

要素の内容と属性のコンテキスト

データをどこに置くかによって、どの文字が危険かが変わり、すべての場所に1つのエスケープのルールでは足りません。要素の内容、つまり開きタグと閉じタグの間のテキストの中では、重要な文字は <、>、& です。属性値の中では、属性を区切る引用符が、攻撃者に値から脱出することを許す文字なので、そこではアンパサンドに加えて " と ' をエンコードしなければなりません。

最も堅牢な習慣は、常に属性を引用符で囲み、対応する引用符を < > & とともにエンコードすることです。引用符のない属性ははるかに守りにくくなります。なぜなら、その場合スペースやほかの多くの文字が値から抜け出せるからです。また、まったく別のコンテキスト、つまり script ブロック、style ブロック、URL属性の中もあり、そこではHTMLエスケープだけでは不十分で、代わりにコンテキストに応じたエンコーディングが必要になります。

エンコードとデコード、それぞれをいつ行うか

エンコードは、出力を生成するときに使う方向です。Encode のアクションで、生のテキストを取って安全なマークアップを生み出します。デコードはその逆で、Decode のアクションで、実体を文字どおりの文字に戻します。これは、データベース、メール、別のツールからコピーしたエスケープ済みのソースがあって、その下にあるテキストを読んだり編集したりしたいときに便利です。

実用的なワークフローは、Swap ボタンで両方を使います。保存された断片をプレーンな文字にデコードし、編集し、その編集版を安全な表示のために再エンコードする、これらすべてを打ち直すことなく行えます。ただし、タイミングの黄金律を忘れないでください。入力の瞬間ではなく出力の瞬間にエンコードすることです。早すぎるエスケープは、保存時に生のままであるべきデータを壊してしまうことがあるからです。

避けるべきよくある間違い

古典的なエラーは二重エンコードです。すでにエスケープ済みのテキストをもう一度エンコーダーに通すと、& を &amp; に変えてしまい、ユーザーに文字どおりの "&" を表示します。エンコードはちょうど1回だけ、しかも出力の境界でのみ行ってください。その近い親戚は、データベースへ入れる途中と出す途中の両方でデータをエスケープすることで、同じく文字化けした結果を生みます。

もう1つのよくある間違いは、HTMLエスケープがすべてのコンテキストを保護すると思い込むことです。それはJavaScriptの文字列、CSSの値、javascript: で始まる href の中に置かれたデータを保護しません。それらには独自のエンコーディングのルールが必要です。最後に、アンパサンドや属性の引用符を忘れる不完全なエスケープ処理を自前で作らないでください。その隙間こそが、まさにバグやXSSが滑り込む場所です。完全で、正しい順序のエンコーダーに仕事をさせてください。

よくある質問

どの文字が HTML エンティティにエンコードされますか?

< (<)、> (>)、& (&)、引用符などの予約文字・特殊文字が、名前付きまたは数値の HTML エンティティに置き換えられます。これにより、ブラウザがマークアップとして解釈するのではなく、文字をそのままページ上に表示できます。

エンコードはどのように XSS を防ぐのに役立ちますか?

< や > のような文字をエンティティに変換することで、ユーザーが入力したマークアップやスクリプトタグが実行されず、可視のテキストとして表示されます。信頼できない入力をページに挿入する前にエンコードすることは、クロスサイトスクリプティング (XSS) に対する基本的な防御です。

エンティティを通常のテキストに戻せますか?

はい。「Decode HTML Entities」ボタンで処理を逆向きに行い、& や ' などのエンティティを元の & や ' の文字に戻せるので、生のテキストを読んだり再利用したりできます。

Swap ボタンは何のためにありますか?

「Swap Input/Output」は現在の結果を入力フィールドに移します。たとえばスニペットをデコードし、編集したものを入力し直さずに再エンコードするような往復処理に便利です。

入力はサーバーに送信されますか?

いいえ。エンコードとデコードはすべてブラウザ内で行われるため、テキストや機密的な HTML がデバイスから外に出ることはありません。ツールは無料で登録不要です。