初級

DOM (Document Object Model)

ウェブページのコンテンツと構造をプログラムから操作するための仕組み。HTMLやXMLドキュメントをツリー構造として表現する。

#フロントエンド#セキュリティ#アーキテクチャ
公開: 2025年8月26日更新: 2025年9月5日

DOM、すなわちDocument Object Modelは、Webページ(HTMLやXML文書)をプログラム、主にJavaScriptから操作するための取り決め(API)だ。ブラウザがHTMLコードを読み込んで、それを操作可能なオブジェクトの集まりとしてメモリ上に展開したもの。HTMLファイルそのものではなく、ブラウザが解釈した後の「ページの構造図」と考えるべきだ。


DOMの構造:ただの木

DOMは文書の構造を「木(ツリー)」として表現する。これをDOMツリーと呼ぶ。

  • ルート(根): documentオブジェクトが全体の根元になる。
  • ノード(節): HTMLの各要素(<html>, <body>, <h1>, <p>など)やテキスト、属性などがすべてノードとして扱われる。
  • 親子関係: 要素の入れ子構造がそのまま親子関係になる。例えば、<body>タグは<p>タグの親ノードだ。

この木構造のおかげで、「body要素の中にある2番目のp要素のテキストを書き換える」といった具体的な操作が、プログラム的に可能になる。建物の設計図があって、特定の部屋の壁紙を張り替えるようなものだ。


なぜDOMが必要か

静的なHTML文書を動的に変更するために必要不可欠。ユーザーのアクションに応じてページの内容を書き換えたり、アニメーションを加えたり、サーバーから取得した新しいデータでページを更新したり、といった現代のWebサイトに必須の機能は、すべてJavaScriptがDOMを操作することによって実現されている。DOMがなければ、Webページはただの表示されるだけの「紙」に過ぎない。


セキュリティ上の注意点:DOM Based XSS

DOMは便利だが、セキュリティ上の弱点も生む。代表的なものがDOM Based XSS(DOMベースのクロスサイトスクリプティング)だ。

これは、サーバー側は一切関与せず、ブラウザ上で完結するXSS攻撃だ。具体的には、URLのフラグメント(#以降の部分)などに含まれる不正なスクリプトを、WebページのJavaScriptが不用意に抽出し、DOMを操作してページ内に埋め込んでしまうことで発生する。

サーバーのログには不正な入力が残らず、WAFなどのサーバー側対策をすり抜けるため、検知が困難な厄介な攻撃だ。原因は、クライアントサイドのスクリプトが、ユーザーからの入力を検証(サニタイズ)せずにDOMの要素として書き出してしまうことにある。


結論

DOMはWebを動的にするための根幹技術だ。しかし、その操作を誤れば、クライアントサイドで完結する深刻な脆弱性を生み出す原因にもなる。Webページの構造を理解すると同時に、そこに入力されるデータがどう扱われるかを常に意識することが、セキュリティの基本となる。