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

「v-html」は劇薬だ：Vue.jsにおけるXSSの盲点と、泥臭いまでの防衛術

現場でコードレビューをしていると、必ずと言っていいほど目にするのが v-html の安易な利用だ。「CMSから取得したリッチテキストをそのまま表示したい」「デザイン要件でHTMLタグが含まれる文字列を流し込みたい」。動機は理解できる。だが、それがどれほどの地雷を埋め込んでいるか、自覚しているエンジニアは驚くほど少ない。

今日は、Vue.jsにおける v-html がなぜ「即時インシデントへの招待状」なのか、そして我々プロが現場でどうやってこのリスクを封じ込めているのか、その現実的な解法を共有する。

—

1. なぜ v-html は「終わりの始まり」なのか

Vue.jsは、デフォルトではデータを「テキスト」としてレンダリングする。{{ mustache }} 構文を使えば、中身が