Shadow DOMを「セキュリティの防波堤」にする：XSS封じ込めのアーキテクチャ再考
多くの開発者がShadow DOMを単なる「スタイルのカプセル化（CSSのスコープ分離）」の道具として捉えているが、我々セキュリティアーキテクトにとって、それは「ドキュメントの非対称な隔離領域」という強力な防御装置だ。
今日のモダンWebにおいて、XSS（クロスサイトスクリプティング）はもはや単なる「アラートを表示させる」幼稚な攻撃ではない。生成AIが生成した有害なコードや、サードパーティの依存ライブラリに混入したサプライチェーン攻撃に対し、いかにして「ブラウザの実行エンジン」をハックさせないか。その回答の一つが、Shadow DOMを用いた「特権境界の強制」である。
—
1. なぜ従来のCSPだけでは足りないのか？
コンテンツセキュリティポリシー（CSP）は確かに強力だが、実際の大規模アプリケーションにおいて厳格なCSPを適用することは「運用上の自爆」を招く。インラインスクリプトや動的なスクリプト生成を多用するレガシーコードと共存させる際、CSPはしばしば「穴だらけの許可リスト」と化す。
ここでShadow DOMの出番だ。mode: 'closed' を指定してShadow Rootを作成すれば、外部のJavaScriptからはDOMツリーの内部にアクセスできなくなる。これは「攻撃者のスクリプトが、その範囲外のオブジェクトを探索・操作できなくなる」という、極めて低レイヤに近い隔離を意味する。
—
2. Shadow DOMによる「攻撃影響範囲の限定」の実装
攻撃者が document.querySelector やグローバルなJSスコープを汚染しようとしても、Shadow DOMの境界線がその試みを無力化する。以下は、サードパーティのコンテンツを表示する際の防衛的コンポーネントの実装例だ。
class SecureContainer extends HTMLElement {
constructor() {
super();
// ‘closed’モードにより、外部からのattachShadowへのアクセスを遮断
// これにより、攻撃者が親からコンポーネント内部のDOMを操作することを防ぐ
this._shadowRoot = this.attachShadow({ mode: ‘closed’ });
}
connectedCallback() {
const container = document.createElement(‘div’);
// コンテンツをサニタイズした上で注入する（DOMPurifyなどの併用は必須）
container.innerHTML = this.getAttribute(‘data-content’);
this._shadowRoot.appendChild(container);
}
}
customElements.define(‘secure-container’, SecureContainer);
このアーキテクチャの急所
mode: 'closed'の哲学:mode: 'open'は外部から容易にShadow Rootが取得できてしまう。セキュリティを語る上でopenは選択肢に入らない。- イベントのバブリング: Shadow DOM内から発生したイベントは、境界を越える際に「再ターゲット（Retargeting）」される。これにより、攻撃者がイベントリスナーを通じて情報を盗み出そうとする試みを、ブラウザ側で自動的に難読化できる。
—
3. 生成AIプロンプトインジェクションに対する防衛層
昨今、生成AIがWebフロントエンドで動的にUIを生成するケースが増えているが、そこで最も恐ろしいのは「AIが生成したHTMLに含まれる悪意あるスクリプト」だ。
ここで提案したいのは、「AI生成コンテンツ専用の隔離Shadowコンポーネント」をガードレイルとして配置することだ。
1. インジェクションの無効化: AI生成HTMLをShadow DOM内に封じ込める際、
コメント