Help us understand the problem. What is going on with this article?

Vueのv-htmlでXSSを回避する

More than 1 year has passed since last update.

Vueのテンプレート構文の項を読めばわかることですが、v-htmlにはXSSの危険があることがわかります。

危険なコードの例を見てみましょう。

危険なコード
<template>
    <div id="app">
        <h1>サニタイズなし</h1>
        <p>{{ mastache }}</p>
        <p v-html="vhtml"></p>
    </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        mastache: 'mastache:<br><a onmouseover=alert(document.cookie)>click me!</a>',
        vhtml: 'vhtml:<br><a onmouseover=alert(document.cookie)>click me!</a>'
      }
    }
  }
</script>

このコードを実行すると、以下のような画面が描画され、click meにマウスオーバーしたときに攻撃コードが実行されてしまいます。
スクリーンショット 2018-06-23 21.57.22.png

v-htmlを利用して描画する項目に、ユーザからの入力が含まれる可能性がある場合は、v-htmlにサニタイズ処理を加えましょう。
以下の例では、sanitize-htmlを利用してVueの共通処理に仕込んで利用しています。

共通処理を設定
import Vue from 'vue'
import App from './App.vue'
import sanitizeHTML from 'sanitize-html'

Vue.prototype.$sanitize = sanitizeHTML
new Vue({
  el: '#app',
  render: h => h(App)
})
サニタイズを行う
<template>
    <div id="app">
        <h1>サニタイズなし</h1>
        <p>{{ mastache }}</p>
        <p v-html="vhtml"></p>
        <h1>サニタイズあり</h1>
        <p>{{ $sanitize(mastache) }}</p>
        <p v-html="$sanitize(vhtml)"></p>
    </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        mastache: 'mastache:<br><a onmouseover=alert(document.cookie)>click me!</a>',
        vhtml: 'vhtml:<br><a onmouseover=alert(document.cookie)>click me!</a>'
      }
    }
  }
</script>

これを実行すると、以下のようになります。
sanitize-htmlの初期設定では、aタグで許可される属性にonmouseoverは含まれていませんので、サニタイズされることがわかります。改行タグなどは、そのまま機能していますね。

vue-xss.mov.gif

サンプルコードは以下。
プロジェクトを作るのが面倒だったので、Springのサンプルプロジェクトの中に紛れています。

https://github.com/tnemotox/sandbox

以上。

参考:
https://github.com/vuejs/vue/issues/6333
https://blog.sqreen.io/xss-in-vue-js/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away