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

こんにちは。セキュリティの世界で「盾」を握り続けているエンジニアです。

今日は、Vue.jsというモダンで便利なフレームワークを使っている開発者なら、必ず一度は目にするであろう「v-html」という魔法の呪文についてお話しします。

便利すぎてついつい使ってしまいがちなこの機能。実は、一歩間違えると「泥棒を家の中に招き入れる招待状」になりかねない、非常に危険な側面を持っているんです。「まさか自分のコードが狙われるはずがない」と思っているあなたこそ、ぜひ最後まで読んでくださいね。

—

Vue.jsには、HTMLタグをそのままブラウザに描画させるための v-html というディレクティブがあります。

これを使うと、例えばCMSのように「太字」や「リンク」をユーザーに許可したい場合にとても便利ですよね。でも、ここがセキュリティの最大の盲点です。

家に例えるなら…
v-html を使うということは、玄関の扉を「誰でも好きなものを置いていいですよ」と全開にするようなものです。もし、悪意ある人がそこから「爆発物（悪意あるスクリプト）」を置いていったらどうなるでしょうか？それが「クロスサイトスクリプティング（XSS）」の正体です。

—

ブラウザは、HTMLの中に