- Vue.js開発におけるXSS対策について、学習した内容を備忘録としてメモする。
XSS(クロスサイトスクリプティング)とは
- 発生の流れ
- 攻撃者は、入力内容に、スクリプト付のリンクを貼る等の罠を仕掛ける。
- 被害者となるユーザが誤って罠を実行する（リンクをクリック等）と、セキュリティ的に問題のある別のウェブサイト（クロスサイト）に対し、脆弱性を利用した悪意のあるスクリプトが含まれた通信が実行される。
- その結果、偽のページがユーザに表示される。
- 反射型、蓄積型、DOMベース型がある。
XSSによる被害
- CookieやlocalStorageに保存された個人情報などの抜き取り。
- Webページの改竄（入力フォーム送信先の変更など）
DOM ベース XSS
-
攻撃者が実行可能なJavaScriptをJavaScriptによって生成されるHTML DOMに注入できる脆弱性。
- SPAのような、Web ページ全体を都度読み込むのではなく、ページの一部分を書き換えるアプリで発生する可能性がある。
Vue.jsでXSSが発生するパターン
HTMLの挿入(v-html)
- 以下のようなコードでスクリプトをフォーム入力した場合、そのスクリプトが実行される。
<div id="app">
<p><span v-html="userProvidedHtml"></span></p>
<input v-model="userProvidedHtml">
</div>
<script>
new Vue({
el:"#app",
data:{
userProvidedHtml: ""
}
})
</script>
対策
- 入力された値を表示する際には、マスタッシュ記法(
{{userProvidedHtml}})を使用する。
URLの挿入(v-bind)
- 以下のようなコードでスクリプトをフォーム入力した場合、
aタグにスクリプトが反映される。 - クリックすると、そのスクリプトが実行される。
<div id="app">
<a v-bind:href="userProvidedUrl">
click me
</a>
<input v-model="userProvidedUrl">
</div>
<script>
new Vue({
el:"#app",
data:{
msg: ""
}
})
</script>
対策
- sanitize-url 等のライブラリや算出プロパティを使用して間接的に値を渡す。
スタイルの挿入(v-bind)
- サニタイズ未実施のスタイル(
userProvidedStylesを利用すると、攻撃者はクリックジャックのための CSS を設置することができる。以下は例。- ログインボタンの上の透明ボックスにリンクをスタイリングする。
- ログインページに似せたサイトが構築されていた場合、ユーザーはログイン情報を盗まれる可能性がある。
<a
v-bind:href="sanitizedUrl"
v-bind:style="userProvidedStyles"
>
click me
</a>
対策
- オブジェクト構文を使用し、特定のプロパティのみ指定させる。
<a
v-bind:href="sanitizedUrl"
v-bind:style="{
color: userProvidedColor,
background: userProvidedBackground
}"
>
click me
</a>
サーバーサイドテンプレートの挿入
- 下記のようなPHPコードをサーバー上に配置し、パラメータに
param={{スクリプト}}を設定してアクセスすると、スクリプト が実行されることがある。
<div id="app">
<?= htmlspecialchars($_GET["param"], ENT_QUOTES, "utf-8") ?>
</div>
<script>
new Vue({
el: '#app'
})
</script>
対策
- 可能な限り、バックエンド側とフロントエンド側のテンプレートを混在させない。
- HTML の動的な生成はフロントエンド側のみで行うなど。
- ユーザー入力を出力する箇所では、HTMLエスケープを行ったうえで、v-preを使用し、PHP などで動的に出力する箇所のコンパイルをスキップさせる。