Vue のセキュリティ対策

Vue でアプリケーションを開発する時に気をつけるべきセキュリティ対策を紹介します。

ユーザーからの入力値をtemplateで直接使わない

templateで直接、ユーザーが入力した値を使うのは危険です。値をそのまま HTML として描画するからです。ユーザーに HTML を入力されると、それを実行することになってしまうからです。

ダメな例

new Vue({
  el: '#app',
  template: `<div>` + userProvidedString + `</div>` // 絶対にしてはいけない
})

参考

• ルール No.1: 信頼できないテンプレートを絶対に使わない | セキュリティ | Vue.js

ユーザーからの入力値でv-htmlを使用しない

v-htmlは設定した値をそのまま HTML として描画するので、ユーザーが入力した値をv-htmlで使うのは危険です。ユーザーに HTML を入力されると、それを実行することになるからです。

Vue の公式サイトでも警告されているので紹介します。

ウェブサイト上で任意の HTML を動的にレンダリングすることは、XSS 攻撃につながりやすいため、非常に危険です。信頼できるコンテンツにのみ v-html を使用し、ユーザーが提供するコンテンツには絶対に使用しないでください。

ユーザが入力した HTML は、サンドボックス化された iframe、またはそれを入力したユーザのみがアクセスできるアプリの一部という場合を除き、100%安全とはみなされないことに注意して下さい。

参考

• HTML の挿入 | セキュリティ | Vue.js
• v-html | ビルトインのディレクティブ | Vue.js

ライブラリの利用方法を見直す

この対策は Vue というよりは、ライブラリを利用したアプリケーション開発全般に言えることです。ライブラリは便利です。たとえば Web アプリケーションの開発ではライブラリを何も使わない開発は「ありえない」と言えるくらい、ライブラリの利用は一般的です。Vue もライブラリの一つと言うことも出来ます。ですが、ライブラリを利用するということは自分以外の人が書いたコードを利用するということです。そのコードにはセキュリティホールが含まれている可能性があります。以下の点に気をつけることで自分のアプリケーションに脆弱性が入ってしまう可能性を下げることができます。

• たくさんの人が利用しているライブラリを利用する
• 最新版のリリース日付が直近の日付のライブラリを利用する

そして、自身のアプリケーションのライブラリを最新版にバージョンアップするこが大切です。