【テクニカル・上級編】Vue.jsにおけるv-htmlディレクティブの脆弱性と防御 – アプリケーションセキュリティ & 安全な開発防御ガイド

v-htmlの甘美な毒：Vue.jsにおけるDOMベースXSSの深層と防衛アーキテクチャ

現場のコードレビューで、v-htmlを目にした瞬間に眉をひそめる。それがセキュリティアーキテクトとしての反射だ。Vue.jsはデフォルトでテンプレート内のデータをエスケープし、XSS（Cross-Site Scripting）に対して極めて堅牢な防壁を築いている。しかし、開発者が「リッチテキストをレンダリングしたい」という誘惑に負け、v-htmlという名のパンドラの箱を開けた瞬間、その防壁は砂上の楼閣と化す。

今日は、Vue.jsにおけるv-htmlの脆弱性を単なる「警告」で終わらせず、メモリレイヤの挙動とブラウザのパーサ仕様、そして生成AI時代の「信頼境界」という観点から解体していく。

—

1. なぜv-htmlは脆弱性の「特異点」なのか

Vue.jsのテンプレートエンジンは、データバインディングにおいて値をプレーンテキストとして扱う。これは、DOMツリーが構築される際に、値が解析対象（パース）ではなく、単純なtextContentとして扱われることを意味する。

しかし、v-htmlディレクティブを使用すると、Vueは内部的にinnerHTMLプロパティを呼び出す。ここでブラウザのパーサが起動する。攻撃者が注入した文字列が、HTML構造として解釈されるわけだ。

攻撃のメカニズム：パーサの「勘違い」を突く

攻撃者は、単なる