その「v-html」、安易に使っていませんか？Vue.jsの魔の入り口と「玄関の防犯」の話
こんにちは！セキュリティの現場で日々、泥臭い攻防を繰り広げているエンジニアです。
今日は、Vue.jsを使っている開発者なら一度は目にするであろうv-htmlディレクティブについてお話しします。「HTMLをそのまま表示できるなんて便利！」と使っているその機能、実はあなたのアプリケーションの「玄関の鍵」を、道端に放り出しているのと同じかもしれません。
今回は、セキュリティの知識がまだ浅い方に向けて、なぜこの機能が危ないのか、どうやって身を守ればいいのかを、身近な「家の防犯」に例えて紐解いていきましょう。
—
1. なぜ「v-html」は危険なのか？
Vue.jsには、デフォルトで「勝手にHTMLを解釈しない」という素晴らしい鉄壁の守りがあります。例えば、ユーザーが入力した という文字列を、Vueはそのまま単なる「文字」として画面に表示してくれます。これは、玄関で怪しい訪問者を「ただの紙切れ」として受け取っている状態です。
しかし、v-htmlを使うと、その壁を強制的に取り払ってしまいます。「渡された文字列を、そのままブラウザでHTMLとして実行していいよ！」と許可を出してしまうのです。
これは、「中身を確認せずに、見知らぬ人から渡された『爆弾付きの小包』を、自宅のリビングで開封する」ようなもの。もしその文字列に悪意のあるプログラム（XSS：クロスサイトスクリプティング）が含まれていたら、あなたのサイトを訪れたユーザーのブラウザ上で、攻撃者の好きなように悪事が働けてしまうのです。
—
2. 攻撃者が狙うのは「信頼という隙」
攻撃者は、あなたのサイトの「入力フォーム」や「チャット機能」、「掲示板」などを狙います。
もし、ユーザーが入力した名前をv-htmlで表示していたらどうなるでしょう？攻撃者は、自分の名前に細工をして、サイトを訪れた他のユーザーの個人情報を盗んだり、勝手にパスワードを変更させたりする「罠」を仕込みます。
「でも、自分のサイトだから大丈夫でしょ？」と思っていませんか？実は、データはどこから来るか分かりません。データベースが改ざんされていたり、APIからのレスポンスにゴミが混じっていたりする可能性はゼロではないのです。
—
3. どうやって防げばいい？「二重の防衛」
対策はシンプルです。「どうしても必要な場合以外は、絶対にv-htmlを使わない」。これが鉄則です。
それでも、「CMSでブログを作っていて、どうしてもHTMLタグを許可したい」というケースはありますよね。そんな時は、家で言えば「防犯カメラ付きの厳重な検閲所」を通す必要があります。
対策：DOMPurifyで「危険な成分」だけを抜き取る
信頼できないHTMLをレンダリングする前に、安全なものだけを抽出するライブラリ「[DOMPurify](https://github.com/cure53/dompurify)」を使いましょう。これは、小包の中身を一つ一つ検品し、爆弾や危険物だけをゴミ箱に捨ててくれる頼もしいガードマンです。
import DOMPurify from ‘dompurify’;
// Vueコンポーネント内での例
computed: {
safeHtml() {
// ユーザーからの入力を受け取り、危険なスクリプトを除去する
return DOMPurify.sanitize(this.userInput);
}
}
—
4. もう一つの守り：CSP（コンテンツセキュリティポリシー）
さらに強固にするために、ブラウザ自体に「このサイトでは、怪しいスクリプトは絶対に動かさないでね！」と命令を出す「CSP（Content Security Policy）」という仕組みがあります。
これは、家全体を囲う「高圧電流のフェンス」のようなものです。万が一、v-htmlで変なスクリプトが混入しても、ブラウザが「そのスクリプトは許可リストにないから実行禁止！」と即座に遮断してくれます。
サーバーのレスポンスヘッダーに、以下のような設定を追加してみてください。
HTTPレスポンスヘッダーの例
Content-Security-Policy: default-src ‘self’; script-src ‘self’;
※ default-src 'self' とすることで、「自分自身のドメイン以外から読み込まれるスクリプトは、一切許可しない」という非常に強力な防御になります。
—
最後に：セキュリティは「疑うこと」から始まる
セキュリティは、難しい技術の習得以上に「ユーザーからの入力は、すべて悪意があるかもしれない」という疑いを持つことが最も大切です。
v-htmlを使うときは、「本当にこれが必要か？」「もしこれで攻撃されたら、誰が困るのか？」と一度立ち止まって考えてみてください。その「立ち止まる習慣」こそが、あなた自身と、あなたのサービスを使うユーザーを守る最強の武器になります。
まずは、自分のコードの中で v-html を検索して、本当に必要か見直すことから始めてみませんか？一歩ずつ、安全な開発者への道を歩んでいきましょう！
コメント