【Vue/Nuxt】sanitize-htmlのインストールと使い方

sanitize-htmlとは
サニタイズしない場合
1. サンプルコード
sanitize-htmlのインストール
1. npmでインストールする場合
2. yarnでインストールする場合
sanitize-htmlの使い方
まとめ

sanitize-htmlとは

sanitize-htmlは、HTMLのサニタイザーです！

例えば、掲示板のようなユーザーからの入力を受け付けるウェブアプリケーションでは、入力値をHTMLとして解釈する場合に、そのまま表示するとXSSの危険性があります。

HTMLのサニタイザーは、このような危険のある入力を適切にパースし、HTMLをフィルタリングにかけることで、XSS攻撃を防ぎます。

身近なところだと、マークダウンでユーザーからの入力を受け付ける場合などがあります。

限定的なユーザーの範囲内での利用であれば基本的には問題はありませんが、一般の様々なユーザーが使用するようなウェブアプリケーションで使用する場合は、サニタイズを導入して、脆弱性を作らないように注意しましょう！

サニタイズしない場合

サニタイズしていない場合では、以下のサンプルコードのようにユーザーからの入力にJavaScriptが含まれている時には、当然JavaScriptが発火してしまいます。

これが悪意のあるユーザーからの投稿である場合は、XSS攻撃が成立します。

サンプルコード

サンプルコードは以下の記事を参考にしています。

本記事で紹介しているサンプルコードは、テンプレートの記述にpugを使用しているため、スタンダードなサンプルがみたい方は上記の元記事をご参照ください！

以下がpugで記述した例となります。

<template lang="pug">
  div
    p {{ mastache }}
    p(v-html="vhtml")
</template>

<script lang="ts">
import { Vue } from 'nuxt-property-decorator';

@Component({
  name: 'Something'
})
export default class extends Vue {
  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>

<style lang="scss" scoped>
...
</style>

mastache構文を使用して、テキストとして解釈している箇所はJavaScriptが発火しないことがわかります。

一方で、v-htmlでHTMLとして解釈している部分では、click部分にマウスホバーすると、JSでalertが出力されてしまうことがわかります。

sanitize-htmlのインストール

ここでは、Vue/Nuxtで使用可能なsanitize-htmlのインストールを実施していきます！

以下のnpmまたはyarnのどちらかご利用中の方を使用してインストールを実施してください！

npmでインストールする場合
yarnでインストールする場合

npmでインストールする場合

以下がnpmでインストールする場合のコマンドです。

TypeScriptを利用している場合は、@types/sanitize-htmlも追加しましょう！

$ npm install sanitize-html @types/sanitize-html

yarnでインストールする場合

以下がyarnでインストールする場合のコマンドです。

TypeScriptを利用している場合は、@types/sanitize-htmlも追加しましょう！

$ yarn add sanitize-html @types/sanitize-html

sanitize-htmlの使い方

sanitizeHTMLを追加する

Vue.prototype.$sanitize = sanitizeHTMLとすることで、sanitize-htmlが使えるようになります！

import sanitizeHTML from 'sanitize-html';

Vue.prototype.$sanitize = sanitizeHTML;

@Component({})
export default class extends Vue {}

サニタイズする

v-html=”$sanitize(something)”とすることで、サニタイズすることができます！

p(v-html="$sanitize(vhtml)")

サニタイズできているか確認する

以下が全体のVueファイルになります。

サニタイズできているか確認してみましょう！

マウスホバーをしてもJavaScriptが発火しなければサニタイズできていますね！

<template lang="pug">
  div
    p {{ mastache }}
    p(v-html="$sanitize(vhtml)")
</template>

<script lang="ts">
import { Vue } from 'nuxt-property-decorator';
import sanitizeHTML from 'sanitize-html';

Vue.prototype.$sanitize = sanitizeHTML;

@Component({
  name: 'Something'
})
export default class extends Vue {
  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>

<style lang="scss" scoped>
...
</style>