HTMLエンティティのエンコード/デコード
HTMLエンティティをエンコード・デコードします
エンコードとデコードは同時に更新されます。スペースは保持され、エンティティは1回だけデコードされます。
このデバイス上で処理されます。テキストはアップロードされません。
クイック例
よく使うHTMLエンティティ
HTMLエンティティのエンコードについて
HTMLエンティティを使うと、特殊文字をHTML内でテキストとして表示できます。テキストは使用する文脈に合わせてエスケープしてください。エンティティのエンコードだけでは、信頼できないHTMLのサニタイズの代わりにはなりません。
HTMLエンティティのエンコード/デコードについて
無料のHTMLエンコード/デコードツールは、特殊文字を対応するHTMLエンティティに変換し、その逆の変換も行います。山括弧、アンパサンド、引用符などの文字はHTMLで特別な意味を持つため、Webページで正しく表示し、クロスサイトスクリプティング(XSS)攻撃を防ぐにはエンコードが必要です。
HTMLエンティティのエンコードは、予約文字を名前付きまたは数値の文字参照に置き換えます。たとえば、< は <、& は &、" は " になります。これによりブラウザはそれらの文字をHTMLマークアップとして解釈せずテキストとして表示するため、ユーザー生成コンテンツを安全に表示するうえで重要です。
このツールはすべてお使いのブラウザ内で処理するため、機密性の高い内容のエンコード、開発中のフォーム入力のサニタイズ、HTMLエンティティ参照のすばやい検索に最適です。内蔵の参照表には、よく使われるHTMLエンティティが収録されており、すぐに利用できます。
主な機能
- HTMLエンティティの双方向のエンコードとデコードをリアルタイムで実行
- 名前付きエンティティ(&)、10進数(&)、16進数(&)の各形式に対応
- HTMLの予約文字をすべて網羅的に処理
- よく使うHTMLエンティティの早見表を内蔵
- エンコード結果またはデコード結果をワンクリックでクリップボードにコピー
- XSSやインジェクション攻撃を防ぐ、セキュリティを重視したエンコード
- HTMLタグ、スクリプト、フォーム要素を扱うインタラクティブな例を用意
- サーバーとの通信なしで即座に処理
- 「すべてクリア」ボタンで入力と出力をリセット
- ダークモードに対応し、見やすい表示
HTMLエンコーダーの使い方
- テキストを入力:HTMLコード、特殊文字を含むプレーンテキスト、またはエンコード済みのエンティティを入力欄に入力または貼り付けます。
- エンコード結果を確認:左側の出力パネルには、HTMLの予約文字(アンパサンド、山括弧、引用符、スラッシュ)を対応するエンティティに置き換えたテキストがすぐに表示されます。
- デコード結果を確認:右側の出力パネルには、入力に含まれるHTMLエンティティを元の文字にデコードした結果が表示されます。
- 結果をコピー:どちらかの出力の横にある「コピー」ボタンをクリックすると、エンコードまたはデコードしたテキストがクリップボードにコピーされます。
- 参照表を活用:「よく使うHTMLエンティティ」セクションのエンティティをクリックすると、読み込んでデコード後の文字を確認でき、簡単な検索ガイドとしても使えます。
活用例
- XSSの防止:ユーザー生成コンテンツをHTMLに表示する前にエンコードして、クロスサイトスクリプティング攻撃やスクリプトインジェクションを防ぎます。
- コードスニペットの表示:HTML、CSS、JavaScriptのコードをエンコードして、ブラウザに実行されず、Webページ上で読めるテキストとして表示します。
- メールテンプレート:HTMLメールテンプレートの特殊文字をエンコードして、さまざまなメールクライアントで表示が一貫するようにします。
- CMSコンテンツ管理:コンテンツ管理システムから送信された内容をサニタイズして、レイアウト崩れやセキュリティ上の脆弱性を防ぎます。
- データベースへの保存:データベースに保存する前にテキストをエンコードして、SQLインジェクションを防ぎ、特殊文字が正しく保持されるようにします。
- XMLドキュメントの処理:同じエンティティ規則を共有するXMLドキュメントやXHTMLページに安全に含められるよう、予約文字をエンコードします。
- APIレスポンスの処理:APIやWebスクレイピングで取得したHTMLエンティティをデコードして、読みやすいクリーンなテキストを抽出します。
よくある質問
HTMLエンティティのエンコードとは何ですか?
HTMLエンティティのエンコードは、HTMLで特別な意味を持つ文字(<、>、&、"など)を、ブラウザがテキストとして表示するエンティティ参照に置き換える処理です。これにより、ブラウザがそれらをHTMLマークアップやコードとして解釈するのを防ぎます。
HTMLエンコードがセキュリティ上重要なのはなぜですか?
適切なエンコードがないと、攻撃者はユーザー入力欄から悪意のあるスクリプトを挿入できます。HTMLエンコードは、scriptタグやイベントハンドラーを、ブラウザが実行せず表示するだけの無害なテキストに変換して、こうした攻撃を無効化します。
名前付きエンティティと数値エンティティの違いは何ですか?
名前付きエンティティは説明的な名前(&のための&など)を使い、数値エンティティは10進数(&)または16進数(&)の文字コードを使います。名前付きエンティティの方が読みやすい一方、数値エンティティはあらゆるUnicode文字を表せます。
このツールは無料ですか？
はい、このHTMLエンコード/デコードツールは完全無料で、利用回数の制限もアカウント登録も不要で、処理できるテキストの量にも制限はありません。
データは安全ですか?
はい、安全です。エンコードとデコードはすべてJavaScriptを使ってお使いのブラウザ内だけで行われます。データはどのサーバーにも送信されないため、機密性の高い内容、社外秘のコード、秘密情報の処理にも安心して使えます。
HTMLではどの文字をエンコードする必要がありますか?
最低限、HTMLの予約文字5つをエンコードしてください。<(小なり)、>(大なり)、&(アンパサンド)、"(二重引用符)、'(一重引用符/アポストロフィ)です。ノーブレークスペースや著作権記号などの文字にも名前付きエンティティがあります。
ヒントとベストプラクティス
- ユーザー入力は必ずエンコード:ユーザーが送信したコンテンツは、XSSの脆弱性を防ぐため、ページに表示する前に必ずHTMLエンコードしてください。
- 入力時ではなく出力時にエンコード:元のテキストをデータベースに保存し、HTMLとして表示するときだけエンコードします。これにより元のデータが保たれ、用途ごとに異なるエンコードができます。
- 参照表を活用:内蔵のHTMLエンティティ参照では、著作権(©)、登録商標(®)、商標(™)の記号など、よく使うエンティティにすばやくアクセスできます。
- 実際の入力でテスト:サンプルボタンを使ってHTMLタグ、scriptタグ、フォーム要素を試し、危険になり得る内容がエンコードでどう無害化されるかを確認できます。
- 二重エンコードに注意:テキストにすでにHTMLエンティティが含まれている場合は、先にデコードしてから再エンコードすると、出力に&amp;と表示されるような問題を防げます。
- コンテキストを考慮:HTML属性値には、テキストコンテンツとは異なるエンコード規則が必要です。コンテキストごとに、お使いのプログラミング言語の適切なエンコード関数を必ず使用してください。