m moji kit v1.0.9
&
エンコード

HTML エスケープ

ユーザー入力を HTML に挿入する前に、特殊文字 (< > & " ') を実体参照に変換します。XSS 対策の基本で、innerHTML やテンプレートに動的データを表示する場面で必要。アンエスケープにも対応。

サンプル

こんなときに使う

ユーザー投稿を表示する前にエスケープ

コメントや投稿本文を HTML に出力する直前にエスケープ。<script> タグの注入を防ぎます。

<script>alert(1)</script> → &lt;script&gt;alert(1)&lt;/script&gt;

HTML サンプルをドキュメントに貼る

技術記事で `<div>` などのタグを「タグとして表示せず文字として表示」したいとき、本ツールでエスケープしてから貼ります。

メールテンプレートで動的フィールドを安全に展開

顧客名や金額を HTML メールに差し込むとき、エスケープを通すことで予期しないタグ閉じや属性注入を防ぎます。

Markdown→HTML 変換の前段で生 HTML を許容しない

Markdown 内に書かれた HTML をすべて文字として扱いたいとき、Markdown 化前に HTML エスケープしてから渡します。

ログに HTML を残さない

アプリログに HTML 入力を残すとき、エスケープしてから書くと、ログ閲覧 UI で意図しないレンダリングを防げます。

JSON 中の文字列も HTML 安全に

JSON.stringify した文字列を HTML に直接埋める場合、< > も含めてエスケープが必要です。本ツールでは < > も &lt; &gt; に変換します。

よくあるエラーと対処

ERR エスケープしたのに XSS が成立する
原因
属性値の中で使う場合、シングルクォート/ダブルクォートを正しくエスケープしないと壊れます。属性は必ずクォートで囲むこと。
対処
本ツールはダブルクォートとシングルクォート両方をエスケープします。属性値は "..." で必ず囲んでください。
ERR JavaScript 文字列に貼ると壊れる
原因
HTML エスケープと JS エスケープは別の規則です。<script> タグ内の文字列リテラルにそのまま貼っても安全になりません。
対処
JS 文字列に貼るなら「JavaScript エスケープ」ツールを使ってください。
ERR URL 属性(href / src)の値で XSS が成立
原因
javascript: スキーマで開始する URL は HTML エスケープでは止められません。
対処
URL のスキーマを http(s):// または相対パスに限定するチェックを別途行ってください。
ERR アンエスケープしたら数値文字参照が変換されない
原因
&#x3c; や &#60; のような数値文字参照を扱っていないライブラリがあります。
対処
本ツールは &#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; に変換した実体参照の & まで再変換されて &amp;lt; になってしまいます。本ツールは正しい順序で 1 回だけエスケープします。
innerText を使えばエスケープ不要?
DOM 操作で innerText / textContent を使うとブラウザが自動エスケープします。動的に文字列を組み立ててから innerHTML に代入するときは手動エスケープが必要です。
テンプレートエンジンが自動エスケープしてくれる
Pug / Handlebars / Liquid / Jinja2 などはデフォルトで自動エスケープします。{{= raw }} のような「生出力」構文を使うときだけ手動エスケープが必要です。
DOMPurify との違いは?
DOMPurify は HTML 全体をパースして危険なタグ・属性を除去します。本ツールは「文字列を文字列としてエスケープ」する用途。Markdown を許容する場合は DOMPurify、生入力を表示するだけなら HTML エスケープ。
属性値内にも改行が入っても大丈夫?
標準 HTML では属性値内に改行を含められます(パーサが空白として扱う)。問題は出ませんが、表示や CSS の都合で改行を取り除くこともあります。
Markdown / JSX に貼るとき注意点は?
Markdown は & をそのまま通すことが多く、二重エスケープになる可能性があります。JSX も同様。フレームワーク側のエスケープルールを確認してから本ツールを使ってください。
サーバーに送信されますか?
送信されません。すべてブラウザ内で正規表現置換で処理しています。

関連ツール