総仕上げ XSSを見つけて直す

このレッスンで学ぶこと

総仕上げは、新しい概念を増やさず、練習用のショップの検索欄・レビュー欄・商品ページを点検して直すひと続きの手順に組み直す回です。使うのは自分が権限を持つこの練習用の環境だけです。

読み終えるころには、印を1つ入れてから直して確かめるまでを、自分の手だけで通せるようになります。

入口と出口を書き出す

まず、利用者が中身を決められる入口を挙げます。検索欄の q、商品レビューの本文、そして商品ページのJavaScriptが読む location.hash の3つです。次に、その文字が解釈される出口を見ます。検索結果の見出しとレビューの表示はHTMLの本文、商品ページの innerHTML はブラウザ内でHTMLになる場所です。入口と出口の組が、この章で見た反射型・蓄積型・DOM型に1つずつ対応します。

3か所を試す

それぞれに <b>test</b> を入れ、太字になるかを見ます。

• 検索欄に入れて見出しが太字になれば、反射型の穴
• レビューに保存し、別のアカウントで同じ商品を開いても太字なら、蓄積型の穴
• URLの # に入れて、おすすめ欄が太字なら、DOM型の穴

太字になったということは、送った文字がHTMLとして解釈されたということです。ここにスクリプトを書ければ動き、Cookieが読めればそれを読み出して外部へ送ることもできます。

文脈に合わせて直す

直し方は、入口で文字を取り除くのではなく、出すときに文脈へ合わせます。

• 検索の見出しとレビューの表示は、本文文脈なので小なり記号・大なり記号・アンパサンドを変換する
• 商品ページの innerHTML は、textContent に替えて文字として出す
• プロフィールのURLを href に出す箇所があれば、http と https だけを通す

CSPを足すのは、これらで塞いだ上に重ねる層で、直しの代わりにはしません。

手を動かす順番

DevToolsのElementsで、入れた印がどのタグの中に出るかを見て、本文か属性かを判断します。DOM型はNetworkに出ないので、Sourcesで innerHTML を検索して経路を追います。3か所とも、試して、文脈を見て、直して、攻撃と正規利用を一度に流す。この順で1つずつ閉じていきます。

まとめ