XSS(クロスサイトスクリプティング)攻撃を防ぐ
XSS は Web ページに悪意のあるスクリプトを注入します。入力のサニタイズ、出力のエンコード、Content Security Policy による XSS 対策を学びましょう。
- 1
XSS は、ユーザー入力がエスケープされずに HTML にレンダリングされるときに発生します。種類:格納型(データベースに永続化)、反射型(URL 経由、即時)、DOM ベース(クライアント側)。対策:(1) 出力エンコード — 文脈(HTML、属性、JavaScript、URL)に応じて <、>、&、"、' をエスケープ。(2) 入力の検証/サニタイズ。(3) Content Security Policy。(4) HttpOnly Cookie。信頼できないデータを危険な場所(script、イベントハンドラー、innerHTML)に挿入しないでください。
- 2 HTML エスケープツール →
HTML の特殊文字をエスケープします:< → <、> → >、& → &、" → "、' → '。これにより、HTML 本体と属性の文脈でのスクリプトインジェクションを防ぎます。文脈に合ったエンコードを使ってください。本体には HTML エスケープ、属性には属性エスケープ、script ブロックには JavaScript エスケープ、URL には URL エンコードです。
- 3 HTML エンティティエンコーダー →
最大の安全性のために、すべての文字を HTML エンティティにエンコードします。特殊文字だけのエスケープよりも徹底しており、すべての文字が &#xNN; になります。信頼性が非常に低い入力や、コードサンプルを安全に表示する必要がある場合に使ってください。
- 4
多層防御:(1) 出力エンコード(主防御)。(2) CSP:Content-Security-Policy: default-src 'self' — インラインスクリプトをブロック。(3) HttpOnly + Secure + SameSite Cookie — XSS による Cookie の盗難を防止。(4) Trusted Types(Chrome)— タイプセーフな DOM 操作を強制。(5) X-XSS-Protection: 0(最近のブラウザーは CSP に依存しており、このヘッダーは脆弱性を持ち込みかねません)。
よくある質問
- エスケープとサニタイズの違いは何ですか?
- エスケープは特殊文字をエンコードして、マークアップとして解釈されず文字どおり表示されるようにします(< → <)。サニタイズは危険なコンテンツを除去または無効化します(<script> タグの削除)。エスケープが推奨されます。コンテンツを保ちながら安全にするからです。一部の HTML を許可する必要がある場合(リッチテキストエディター)は、サニタイズ(例: DOMPurify)が必要です。
- innerHTML が安全なことはありますか?
- 完全にサニタイズされた入力の場合だけです。innerHTML は文字列を HTML としてパースし、<script> タグを実行します。プレーンテキストには textContent(HTML パースなし)、リッチテキストには DOMPurify.sanitize() を使ってください。ユーザー入力で innerHTML を使わないでください。エスケープ済みの入力でも、特定の文脈(属性やイベントハンドラー内)では危険な場合があります。