HTML本文に出力するときのXSS

このレッスンで学ぶこと

HTMLの本文(要素の中身)は、利用者由来の文字を出す場所のうち、いちばん基本の文脈です。この回は、そこで危ない文字はどれで、どう変換すればタグにならないかを確かめます。

読み終えるころには、DevToolsのElementsを見て、本文文脈が守られているかどうかを判定できるようになります。

本文文脈で危ないのは不等号

利用者由来の文字を <div>ここ</div> のように要素の中身へ出すとき、危ないのは小なり記号と大なり記号です。この2文字があると、そこから新しいタグが始まると解釈されます。

<div>「<script>...</script>」の検索結果</div>

検索語をそのまま本文に置くと、<script> がタグとして開き、中身が動きます。レビューの表示も同じ本文文脈です。

実体参照へ変換する

本文文脈では、小なり記号を <、大なり記号を >、アンパサンドを & へ変換します。これを実体参照といいます。変換後はこうなります。

<div>「&lt;script&gt;...&lt;/script&gt;」の検索結果</div>

ブラウザは < を「小なり記号の文字」として表示し、タグとしては読みません。つまり <script> が画面に文字として出るだけで、動きません。利用者が書いた文字は文字のまま見え、正規の入力も壊れません。

アンパサンドを変換しないと、利用者が書いた < という文字列が、そのまま小なり記号に化けてしまうからです。アンパサンドを先に & にしておくと、文字としての < を正しく表示できます。変換の取りこぼしを防ぐために、アンパサンドも対象に入れます。

手を動かす

練習用のショップの検索欄やレビューに <b>test</b> を入れ、DevToolsのElementsで組み上がったDOMを見ます。<b>test</b> と文字で入っていれば本文文脈は守られています。太字になっていれば未対策です。なお、本文ではなく属性の中に文字を出す場合は、守るべき文字が変わります。それは次回の属性文脈で扱います。テンプレートによっては本文出力を既定でこの変換にしていますが、そうでない出力方法もあるので、製品ごとに確かめてください。

まとめ