HTMLエンティティ変換ツール｜エンコード・デコード

HTMLエンティティをエンコード・デコードします。&<>などの変換に。

モード:
入力
出力
🛡HTMLエスケープはXSS脆弱性を防ぐための基本テクニックです

HTMLエンティティ変換ツール｜エンコード・デコードとは

HTMLエンティティのエンコード・デコードを行う無料ツールです。<>&"'などの特殊文字をHTMLエンティティに変換（エスケープ）、またはエンティティを元の文字に戻します（アンエスケープ）。XSS対策のHTMLエスケープ確認・Webスクレイピングのデコード・HTMLコンテンツのサニタイズ検証に最適。登録不要で即利用可能。

使い方

  1. 1変換したいテキストを入力エリアに貼り付けてください。
  2. 2エンコード（特殊文字→HTMLエンティティ）かデコード（HTMLエンティティ→特殊文字）を切り替えてください。
  3. 3リアルタイムで変換結果が表示されます。コピーボタンで結果をクリップボードにコピーできます。
  4. 4エンコード結果はHTMLのcontent属性・innerHTML・サーバーサイドレンダリングでの出力に活用できます。

メリット・特徴

  • HTMLエンティティのエンコード・デコードを双方向でリアルタイム変換
  • XSS対策に必須のHTMLエスケープ処理（<>&"'）を正確に実行
  • &#数値; 形式の数値参照および&名前; 形式の名前付きエンティティの両方に対応
  • Webスクレイピングで取得したHTMLテキストのデコードに活用
  • HTMLコンテンツのサニタイズ確認・セキュリティレビューに最適
  • 登録・インストール不要。ブラウザで即利用できる完全無料ツール
01

HTMLエンティティの基本知識

なぜHTMLエンティティが必要なのか

HTMLでは<・>・&の3文字がHTMLタグや特殊記号として特別な意味を持ちます。これらの文字をHTMLコンテンツとして表示したい場合、そのまま書くとブラウザがHTMLタグや参照として解釈してしまいます。例えば「2 < 3」というテキストをHTMLに書く場合、「2 &lt; 3」と書く必要があります。また"（ダブルクォート）は属性値の区切りに使われるため、属性値内では&quot;にエスケープが必要です。HTMLエンティティはこれらの問題を解決する標準的な手段です。XSS（クロスサイトスクリプティング）攻撃の多くは、ユーザー入力をエスケープせずHTMLに出力することで発生するため、セキュリティの観点からも理解が不可欠です。

名前付きエンティティと数値参照

HTMLエンティティには「名前付きエンティティ」と「数値参照」の2種類があります。名前付きエンティティは&名前;の形式で、&lt;（<）・&gt;（>）・&amp;（&）・&quot;（"）・&copy;（©）・&reg;（®）・&trade;（™）・&nbsp;（ノーブレークスペース）・&hellip;（…）などがあります。数値参照は&#番号;または&#x16進数;の形式で、あらゆるUnicode文字をHTMLに埋め込めます。例えば&copy;は&#169;とも書けます。現代のHTMLはUTF-8エンコードを標準とするため、日本語など通常のUnicode文字はエンティティに変換せずそのまま書けます。エンティティが必要なのは&・<・>・"・'の特殊な意味を持つ文字だけです。

02

XSS対策とHTMLエスケープの実践

XSS攻撃とHTMLエスケープの重要性

XSS（Cross-Site Scripting）はWebアプリケーションの脆弱性で、攻撃者がHTMLに悪意のあるJavaScriptを埋め込み、被害者のブラウザで実行させる攻撃です。典型的な手口は、ユーザー入力（検索キーワード・コメント・プロフィール情報など）をエスケープせずHTMLに出力することです。例えば検索キーワードとして「<script>alert('XSS')</script>」が入力された場合、エスケープなしで出力するとJavaScriptが実行されます。HTMLエスケープを実施することで<は&lt;として表示されるだけになり、スクリプト実行を防止できます。OWASP（Open Web Application Security Project）はXSS防止の第一手段としてHTMLエスケープを推奨しています。

各言語・フレームワークでのXSS対策

HTMLエスケープの実装は使用する言語・フレームワークによって異なります。PHPではhtmlspecialchars($input, ENT_QUOTES | ENT_HTML5, 'UTF-8')が基本です。ENT_QUOTESを指定することでシングルクォートもエスケープされます。JavaScriptではDOM操作でelement.textContent = inputを使うと自動エスケープされます。innerHTMLを使う場合は手動でエスケープが必要です。React・Vue・Angularなどのモダンフロントエンドフレームワークは、テンプレート内の変数をデフォルトでエスケープするため、dangerouslySetInnerHTML（React）やv-html（Vue）を意図的に使わない限りXSSが防止されます。本ツールを使ってエスケープ処理の動作を確認し、セキュリティレビューに活用してください。

よくある質問（FAQ）

HTMLエンティティとは何ですか？
HTMLで特別な意味を持つ文字（<>& など）をHTMLに安全に表示するための表記法です。例えば < は &lt;、> は &gt;、& は &amp;、" は &quot;、' は &#39; と表記します。HTMLエンティティを使うことで、これらの文字が誤ってHTMLタグとして解釈されるのを防ぎます。
&amp;と&#38;の違いは？
&amp;は名前付きエンティティ（Named Character Reference）、&#38;は数値参照（Numeric Character Reference）です。どちらも&記号を表し、ブラウザでの表示結果は同じです。本ツールはエンコード時に名前付きエンティティ形式で出力し、デコード時は両形式に対応しています。
全角文字・日本語はエンコードされますか？
日本語などのUnicode文字はそのまま出力されます。HTMLで特別な意味を持つ5文字（& < > " '）のみがエンティティにエンコードされます。現代のHTMLはUTF-8を前提としているため、日本語をエンティティに変換する必要はありません。
XSS攻撃を防ぐためにどの文字をエスケープすべきですか？
HTMLコンテキストでは最低限「& < > " '」の5文字をエスケープする必要があります（&→&amp;、<→&lt;、>→&gt;、"→&quot;、'→&#39;）。Webアプリでユーザー入力をHTMLに出力する際は、必ずこれらの文字をエスケープしてXSS（クロスサイトスクリプティング）を防止してください。
WebスクレイピングでHTMLエンティティをデコードしたい場合は？
Webスクレイピングで取得したHTMLにはエンティティが含まれていることがあります。例えば「&amp;amp;」「&lt;p&gt;」などです。本ツールのデコード機能でこれらを元のテキストに変換できます。Pythonではhtml.unescape()、JavaScriptではDOMParserを使ったデコードも可能です。
PHP・JavaScriptでHTMLエスケープするには？
PHPではhtmlspecialchars($str, ENT_QUOTES, 'UTF-8')を使います。JavaScriptではelement.textContent = strを使うとDOMが自動的にエスケープします。Reactなどのフレームワークはデフォルトでレンダリング時にエスケープするため、dangerouslySetInnerHTMLを使わない限りXSSが防止されます。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →