ウェブ開発を行っていると、誰もが一度はこのような問題に直面するはずです。
HTMLコードをそのままウェブページに表示したいのに、ブラウザがタグとして解釈してしまい、意図した結果にならない場合。あるいは、ユーザーが入力した内容を適切なエンコーディングを行わずに画面に出力し、XSS攻撃の危険にさらされてしまう場合です。
このような問題を軽減するためによく使われる代表的な方法が、まさにHTMLエスケープ（HTML Escape）です。
この記事では、HTMLエスケープとは何なのか、なぜ必要なのか、そして実際にどう活用するのかを、初めて触れる方にも分かりやすく順を追って説明します。さらに、実務で繰り返される変換作業をスピーディーに処理できる便利なオンラインツールもあわせてご紹介します。
HTMLエスケープはなぜ必要なのでしょうか？
HTMLでは、山括弧（<、>）、アンパサンド（&）、引用符（"、'）のような文字を、タグや属性、HTMLエンティティを表現する文法要素として使用します。ところが、これらの特殊文字がデータの中に含まれていると問題が生じます。ブラウザがその内容を一般のテキストではなく、HTMLの文法として解釈してしまうからです。
例えば、ウェブページに以下の内容をそのまま出力したいと仮定します。
<p>This is a <strong>test</strong> page.</p>この内容をエスケープせずにHTMLドキュメントに出力すると、ブラウザはこれをテキストではなく実際のHTMLコードとして処理します。
つまり、<p>と<strong>タグがそのままレンダリングされてしまうのです。結果として、テキストで見せたかった内容が、画面上では実際の要素として表示されることになります。
エスケープを適用すると、以下のように変換されます。
<p>This is a <strong>test</strong> page.</p>これでブラウザは、これをタグではなく純粋なテキストとして認識し、画面にそのまま表示してくれます。これがHTMLエスケープの重要な役割です。
セキュリティの観点でも必須です
技術的な理由だけではありません。HTMLエスケープはセキュリティにおいても非常に重要です。
ユーザーが入力した値をそのままウェブページに出力すると、XSS（クロスサイトスクリプティング）攻撃にさらされる可能性があります。攻撃者が悪意のあるスクリプトを入力値として仕込んでおくと、エスケープ処理なしでそのままレンダリングされた際に、そのスクリプトが実行されてしまいます。
<!-- 危険な入力値の例 -->
alert('XSS <test> & "injection" 😊');
<!-- エスケープ処理後 -->
alert('XSS <test> & "injection" 😊');エスケープ処理を行えば、スクリプトは実行されず、単なる文字列として表示されます。フロントエンドであれバックエンドであれ、ユーザーの入力値は必ずエスケープ処理を行ってから出力するのが基本的なセキュリティ対策のルールです。
必ず知っておくべきHTMLエンティティ変換表
HTMLエスケープは、特定の文字をHTMLエンティティ（HTML Entity）に置き換える作業です。よく使われる変換ルールをまとめると以下のようになります。
| 元の文字 | 名称 | HTMLエンティティ | 数値文字参照 |
|---|---|---|---|
| < | less-than | < | < |
| > | greater-than | > | > |
| & | ampersand | & | & |
| " | double-quote | " | " |
| ' | single-quote | ' | ' |
この5つがHTMLエスケープにおいて最も基本となる変換ペアです。実務ではこれらを適切に処理するだけでも、大半の問題を予防することができます。
なお、アンエスケープ（Unescape）とは、逆方向の変換、つまりHTMLエンティティを元の文字に戻す作業のことを指します。
VivoldiのHTMLエスケープツールの使い方
概念を理解できたなら、次は実際に使ってみましょう。毎回HTMLエンティティの変換ルールを調べて手動で修正する方法は手間がかかりますし、コードが長くなるほどミスの可能性も高まります。そこで、オンラインの変換ツールを活用すれば、はるかに効率的に作業を進めることができます。
VivoldiのHTMLエスケープツールは、左右に分割されたエディタ方式を採用しており、元のテキストと変換結果を同時に見比べることができます。使い方も非常にシンプルです。
基本的な使用の流れ
- 入力: 左側のエディタに、変換したいHTMLコードやテキストを入力、または貼り付けます。ファイルのアップロードにも対応しています。
- 実行: 上部にある▶ ESCAPEボタンをクリックすると、変換結果が即座に右側のパネルに反映されます。すでにエスケープされているコードを元の状態に戻す場合は、◀ UNESCAPEボタンを使用します。
- 結果の確認: 右側のパネルで変換結果を確認し、コピーボタンを使ってすぐにクリップボードへ保存することができます。
- サンプルの活用: 初めて使用する場合は、サンプル機能を利用してサンプルコードを読み込み、変換の過程を確認してみてください。
ステータスバーでは、文字数、行数、バイト数をリアルタイムで確認できます。変換前後のデータサイズの増減も比較できるため、結果をすばやくチェックするのに便利です。
出力形式の選択: HTML / JS / JSON
右側の結果パネルでは、結果をHTML、JS、JSONのいずれかの形式に切り替えて確認することができます。状況に合わせてすぐに使用できるため、実務において特に役立ちます。
同じ文字列であっても、出力される場所や文脈（HTML、JavaScript、JSON）によって、必要となるエスケープのルールが変わるためです。
- HTMLタブ: HTMLドキュメントの本文や属性値に安全に出力する際に使用するHTMLエンティティ形式です。
<、&などの形式で出力されます。 - JSタブ: JavaScriptの文字列内に含められるよう、引用符や改行、特殊文字などをJavaScriptの文字列規則に合わせて変換します。
- JSONタブ: APIのレスポンスやJSONデータの中にHTMLを含める際に使用します。JSON文字列の中で有効に動作するよう、JSONのルールに沿って特殊文字をエスケープします。
バックエンド開発者であれば、APIのレスポンスや保存されたコンテンツデータをJSONでやり取りする際、HTML文字列を一緒に含める必要がある場面があるかと思います。そうしたときに、JSONタブにサッと切り替えて使用できるのは大変便利です。
DIFF機能による変換前後の比較
結果パネルの上部にあるDIFFボタンをクリックすると、元のテキストと変換結果を並べて比較することができます。
どの部分が変更されたのかが一目で把握できるため、長いコードや大量のテキストを変換する際にも、変更箇所だけを迅速にチェックでき、ミスを減らすのに役立ちます。
細かな調整が可能なオプション機能
すべての特殊文字を一括でエスケープする方法が、常に最善とは限りません。状況によっては一部の文字だけを変換したり、特定の領域はそのまま維持したりする必要がある場合もあります。
VivoldiのHTMLエスケープツールに備わっているオプション機能が、こうした細かな調整をサポートしてくれます。
エスケープ対象の選択
オプションパネルでは、エスケープする文字を個別にON/OFFすることができます。
デフォルトでは、5つの特殊文字（<、>、&、"、'）がすべて有効になっています。特定の文字だけを選択的に処理したい場合は、該当するトグルをオフにするだけで設定可能です。
例えば、使用する環境に合わせて一部の文字だけを選択的に変換しなければならない場合、必要な文字のみを有効にして使用できます。
ただし、HTMLの属性値やユーザー入力の処理においては、通常はデフォルト設定を維持する方が安全です。
タグの保護機能
コードを解説する技術文書や開発ブログを書いていると、よく直面する状況があります。<pre>や<code>タグの内部は、すでに別途処理されているか、元の形式を維持しなければならないケースが少なくありません。すでに処理済みのコードブロックまで再度エスケープしてしまうと、意図しない出力結果になる恐れがあります。
タグ保護オプションで、<script>、<style>、<pre>、<code>などの特定のタグを保護対象に設定すると、そのタグ内の内容はエスケープ処理から除外されます。文書作成やコードのサンプル管理を行う際の反復作業を減らす手助けとなります。
二重エスケープの防止
すでに一度エスケープされているコードを再度エスケープすると、<が&lt;になってしまう問題が発生します。オプションから「すでにエスケープされた文字をスキップ」オプションを有効にすると、こうした状況を自動的に防ぐことができます。
外部から取得したコードの一部がすでに変換された状態になっている場合に、特に便利です。
絵文字の変換オプション
絵文字をHTMLエンティティに変換する機能も提供しています。デフォルト値は無効になっているため、絵文字はそのまま維持されます。
一部のレガシーシステムや、HTMLエンティティベースの保存・転送環境においては、このオプションを利用して絵文字をエンティティ形式に変換して使用することができます。
コードのエクスポート: ブログやドキュメントにすぐ活用する
コードのサンプルをブログやドキュメントに頻繁に挿入する方にとって、もう一つ便利な機能があります。それがコードのエクスポート機能です。
結果パネルのエクスポートボタンをクリックすると、テーマ選択画面が開きます。
GitHub、Dracula、Monokai、VS Code Light、VS Code Dark、One Darkなど、6種類のコードハイライトテーマから選択することができます。
選択したテーマをプレビューで確認した後、コピーボタンを押すと、インラインスタイルが含まれたHTMLコードがクリップボードにコピーされます。
生成されたコードは、別途CSSを設定することなく、さまざまなHTML環境ですぐに活用可能です。
技術ドキュメントやHTMLベースのブログ環境において、コードブロックのスタイルを一貫して維持するのに役立ち、別途のスタイリング作業を省くことで文書作成にかかる時間を節約できます。
ワークフローに合わせてエディタを設定する
ツールを繰り返し使用していると、些細な設定の違いが作業効率に影響を与えてきます。
VivoldiのHTMLエスケープツールは、エディタ環境を柔軟に調整できる設定項目もいくつか備えています。
- フォントサイズ: A− / A+ ボタンで文字の大きさを調節できます。画面サイズや作業環境に合わせて、見やすいサイズに設定してご使用ください。
- Tab/Spaces: インデントの方法をタブまたはスペース（2マス、4マスなど）から選択できます。デフォルト値はSpaces(4)です。
- スクロールの同期: 左右のパネルを一緒にスクロールするよう設定できます。長いコードや大量のテキストを比較する際、変更内容がさらに確認しやすくなります。
- テーマ: エディタ自体のテーマもLight / Darkの中から選択可能です。作業環境やお好みに応じて、使いやすい画面構成をお選びください。
左右のパネルをそれぞれ全画面に拡大することもできます。内容が多いときは、より広い作業スペースで集中して確認作業が行えます。
実際にはこのような状況で使用されます
HTMLエスケープは、想像以上にさまざまな環境で活用されています。
技術ブログやドキュメントの作成
コードを解説する記事では、HTMLタグ自体をテキストとして表示しなければならないケースが頻繁にあります。
例えば、<div>のようなタグをそのまま出力すると、ブラウザがこれを実際のHTML要素として解釈してしまい、意図したコードのサンプルが表示されなかったり、ドキュメントの構造が崩れたりする原因になります。あらかじめエスケープしてから挿入することで、こうした問題を防ぐことができます。
メールのテンプレート制作
HTMLメールの場合、クライアントごとにHTMLのサポート範囲やレンダリング方式が異なる場合があります。
メールクライアントによってHTMLの解釈方法が違うため、コードや特殊文字をテキストとして見せたい場合には、適切なエスケープ処理が役立ちます。
サーバーでの動的コンテンツの出力
ユーザーの入力値をHTMLページに出力する際は、適切なエスケープが必要不可欠です。
多くのテンプレートエンジンやフレームワークは自動エスケープ機能を提供していますが、設定が変更されていたり、特殊な出力状況であったりする場合は、別途処理が必要になることもあります。
APIのレスポンスにHTMLを含める場合
APIのレスポンスで、HTMLの文字列や書式が含まれたコンテンツをJSON形式で受け渡さなければならないケースがあります。
このような状況では、HTML文字列の処理とJSON文字列のルールを同時に考慮しなければならず、JSON形式の出力機能を利用すれば検証作業がスムーズになります。
CMSやWikiへのコード挿入
WordPressやConfluenceなどのCMS、またはドキュメントツールにコードのサンプルを挿入する際にも、HTMLの処理方式によっては個別のエスケープが必要になることがあります。
プラットフォームの特性に合わせて出力形式を調整することで、コードがより安定して表示されます。
HTMLエスケープを自作で実装するなら
開発者であれば、自らエスケープ関数を実装する機会もあるでしょう。基本のロジックはシンプルで、文字列を順番に読み込みながら、特殊文字をエンティティに置換するだけです。
JavaScriptではこのように記述します。
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}ここで一つ注意すべき点があります。必ず&を最初に処理しなければなりません。後から処理すると、すでに変換されている<の&まで再びエスケープされてしまい、&lt;になってしまうからです。
Javaでは、Apache Commons TextライブラリのStringEscapeUtils.escapeHtml4()が多く活用されます。Spring Boot環境では、Thymeleafテンプレートエンジンがデフォルトで自動エスケープをサポートしていますが、th:utextを使用する際は別途注意が必要です。
// Java - Apache Commons Text
import org.apache.commons.text.StringEscapeUtils;
String escaped = StringEscapeUtils.escapeHtml4(rawInput);
// Thymeleaf - 自動エスケープ（デフォルトの動作）
<p th:text="${userInput}"></p>
// Thymeleaf - エスケープなしでの出力（注意が必要）
<p th:utext="${trustedHtmlContent}"></p>Pythonでは、標準ライブラリに含まれているhtml.escape()関数を使えば簡単に実装できます。
import html
escaped = html.escape('<script>alert("XSS")</script>')
# 結果: <script>alert("XSS")</script>コードで処理する時もツールで処理する時も結果は同じですが、ツールは大量のテキストを素早く確認したい時やチームメンバーと共有したい時、そして開発環境なしで変換結果が今すぐ必要な時に特に役立ちます。
よくあるミスと注意点
HTMLエスケープを使用する際に、よく発生するミスについてもあわせて知っておくとよいでしょう。
- 二重エスケープ: すでに変換された値を再度エスケープすると、< が &lt; のように意図しない文字変換を引き起こす可能性があります。エスケープ処理がどの段階で実行されているのかを確認し、重複して適用されないよう管理してください。Vivoldiのツールでは、「すでにエスケープされた文字をスキップ」オプションでこのリスクを減らせます。
- URL属性の混同: href や src のようなURL属性は、HTMLエスケープだけでは十分でない場合があります。URLエンコーディング（
%xxの形式）とHTMLエスケープは目的が異なるため、区別して使用しなければなりません。 - CSS/JSの文脈の混用: HTMLエスケープは、あくまでHTMLの文脈で使用する方式です。JavaScriptの文字列、CSSの値、URLのパラメータなど、出力する場所によって必要なエンコーディングの規則は変わってきます。
- 保存と出力の段階を混用: 一般的には、データは元の形態のまま保存しておき、出力するタイミングで文脈に合わせてエスケープする方式が、管理や再利用の側面で有利です。保存と出力の段階で同時に処理してしまうと、二重エスケープが発生する原因となります。
おわりに: 小さな習慣が大きな問題を防ぎます
HTMLエスケープは、最初は手間に感じられるかもしれません。しかし、出力環境に合わせた処理を怠ると、画面表示の崩れやセキュリティの脆弱性、予期せぬ出力結果を招く恐れがあります。こうした問題は、後から修正しようとするほどコストが大きくなるケースがほとんどです。
最初から出力の文脈に合った処理方法を身につけておけば、メンテナンス性や安定性の面で大いに役立ちます。
自分で実装するよりも、まずは言語やフレームワークが提供している標準のエスケープ機能を活用し、結果をスピーディーに検証したい時や変換が必要な時には、オンラインツールもあわせてご活用ください。
VivoldiのHTMLエスケープツールは、エスケープ、アンエスケープ、出力形式の切り替え、コードのエクスポートなど、HTMLの変換と検証に必要な機能を一つの画面で利用することができます。初めてお使いになる場合は、サンプル機能で動作の仕組みをサッと確認してみてください。
以下のリンクから直接お試しいただけます。特別なインストールは不要で、ブラウザからすぐにご利用可能です。
HTMLエスケープのほかにも、URLエンコード・デコード、Base64エンコード・デコード、JSONフォーマッター、URL短縮など、様々なオンラインツールもVivoldiでまとめてご利用いただけます。
