ブラウザでJavaScriptが動く仕組み

このレッスンで学ぶこと

ブラウザは受け取ったHTMLからDOMを組み立て、<script> に出会うとその中のJavaScriptをそのページの権限で実行します。この回は、そのJSに何ができるかを具体で確かめます。

読み終えるころには、XSSの被害がどこまで広がり得るかを、そのページのJSにできることの範囲で言えるようになります。

HTMLが解析され、スクリプトが動くまで

ブラウザは受け取ったHTMLを上から順に読み、要素を入れ子の木として組み立てます。これがDOMで、画面に見えているものの実体です。読み進める途中で <script> に出会うと、その中のJavaScriptをその場で実行します。

<p>こんにちは、<span id="name">tanaka</span> さん</p>
<script>
  document.getElementById("name").textContent = "admin";
</script>

このスクリプトは、組み立て途中のDOMに手を伸ばして表示名を書き換えます。JSはHTMLの飾りではなく、ページの中身をあとから変えられる実行者です。

そのページのJSにできること

動いたJavaScriptは、そのページのオリジンの権限で動きます。できることは主に次のとおりです。

• document.cookie から、そのサイトのCookieを読む
• フォームに打ち込まれた値を読む
• そのオリジンへ fetch で要求を送る。ログイン中ならその利用者として通る
• DOMを書き換え、画面の見た目や中身を差し替える

練習用のショップに tanaka でログインした状態でこれが動くと、tanaka として注文したり、画面の内容を読み取ったりできます。Cookieが読めれば、それを読み出して外部へ送ることもできます。

手を動かして確かめる

練習用のショップの商品ページを開き、DevToolsのConsoleで document.title や document.cookie を打ってみてください。その場で実行され、そのページの権限で結果が返ります。攻撃者のスクリプトがページに紛れ込めば、同じことが攻撃者の意図で動く、という一点がXSSの出発点です。

まとめ