エンコード
HTML エスケープ
ユーザー入力を HTML に挿入する前に、特殊文字 (< > & " ') を実体参照に変換します。XSS 対策の基本で、innerHTML やテンプレートに動的データを表示する場面で必要。アンエスケープにも対応。
サンプル
直近の入力
全履歴 ·
履歴はあなたのブラウザにのみ保存されます。サーバーに送信されません。 設定
こんなときに使う
ユーザー投稿を表示する前にエスケープ
コメントや投稿本文を HTML に出力する直前にエスケープ。<script> タグの注入を防ぎます。
<script>alert(1)</script> → <script>alert(1)</script> HTML サンプルをドキュメントに貼る
技術記事で `<div>` などのタグを「タグとして表示せず文字として表示」したいとき、本ツールでエスケープしてから貼ります。
メールテンプレートで動的フィールドを安全に展開
顧客名や金額を HTML メールに差し込むとき、エスケープを通すことで予期しないタグ閉じや属性注入を防ぎます。
Markdown→HTML 変換の前段で生 HTML を許容しない
Markdown 内に書かれた HTML をすべて文字として扱いたいとき、Markdown 化前に HTML エスケープしてから渡します。
ログに HTML を残さない
アプリログに HTML 入力を残すとき、エスケープしてから書くと、ログ閲覧 UI で意図しないレンダリングを防げます。
JSON 中の文字列も HTML 安全に
JSON.stringify した文字列を HTML に直接埋める場合、< > も含めてエスケープが必要です。本ツールでは < > も < > に変換します。
よくあるエラーと対処
ERR
エスケープしたのに XSS が成立する - 原因
- 属性値の中で使う場合、シングルクォート/ダブルクォートを正しくエスケープしないと壊れます。属性は必ずクォートで囲むこと。
- 対処
- 本ツールはダブルクォートとシングルクォート両方をエスケープします。属性値は "..." で必ず囲んでください。
ERR
JavaScript 文字列に貼ると壊れる - 原因
- HTML エスケープと JS エスケープは別の規則です。<script> タグ内の文字列リテラルにそのまま貼っても安全になりません。
- 対処
- JS 文字列に貼るなら「JavaScript エスケープ」ツールを使ってください。
ERR
URL 属性(href / src)の値で XSS が成立 - 原因
- javascript: スキーマで開始する URL は HTML エスケープでは止められません。
- 対処
- URL のスキーマを http(s):// または相対パスに限定するチェックを別途行ってください。
ERR
アンエスケープしたら数値文字参照が変換されない - 原因
- < や < のような数値文字参照を扱っていないライブラリがあります。
- 対処
- 本ツールは &#NN; と &#xHH; に対応しています。他ツールを使うときは仕様を確認してください。
CLI / 他言語でやる方法
Python
python -c "import html; print(html.escape('<script>'))" html.escape はデフォルトでクォートもエスケープ。アンエスケープは html.unescape。
Node.js (he)
node -e "console.log(require('he').encode('<script>'))" he パッケージは数値文字参照や名前付き実体参照に幅広く対応。
PHP
php -r "echo htmlspecialchars('<script>', ENT_QUOTES, 'UTF-8');" ENT_QUOTES でシングルクォートもエスケープ。
よくある質問
▶ なぜシングルクォートもエスケープするの?
属性値をシングルクォートで囲んだ場合(<a href='...'>)、内部のシングルクォートが属性を閉じてしまうのを防ぐためです。両方のクォートをエスケープしておけば属性記法に関わらず安全です。
▶ & を最初にエスケープすべき理由は?
& を後にエスケープすると、すでに < に変換した実体参照の & まで再変換されて &lt; になってしまいます。本ツールは正しい順序で 1 回だけエスケープします。
▶ innerText を使えばエスケープ不要?
DOM 操作で innerText / textContent を使うとブラウザが自動エスケープします。動的に文字列を組み立ててから innerHTML に代入するときは手動エスケープが必要です。
▶ テンプレートエンジンが自動エスケープしてくれる
Pug / Handlebars / Liquid / Jinja2 などはデフォルトで自動エスケープします。{{= raw }} のような「生出力」構文を使うときだけ手動エスケープが必要です。
▶ DOMPurify との違いは?
DOMPurify は HTML 全体をパースして危険なタグ・属性を除去します。本ツールは「文字列を文字列としてエスケープ」する用途。Markdown を許容する場合は DOMPurify、生入力を表示するだけなら HTML エスケープ。
▶ 属性値内にも改行が入っても大丈夫?
標準 HTML では属性値内に改行を含められます(パーサが空白として扱う)。問題は出ませんが、表示や CSS の都合で改行を取り除くこともあります。
▶ Markdown / JSX に貼るとき注意点は?
Markdown は & をそのまま通すことが多く、二重エスケープになる可能性があります。JSX も同様。フレームワーク側のエスケープルールを確認してから本ツールを使ってください。
▶ サーバーに送信されますか?
送信されません。すべてブラウザ内で正規表現置換で処理しています。