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

Nuxt

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-htmlHTMLとして解釈している部分では、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>

まとめ

今回は、sanitize-htmlのインストールと使い方について紹介しました!

プログラミング学習を始めたばかりの頃は、XSS難しいですよね。

今回は例なども上げて説明したので、多少理解していただけたと思います!

サービス開発の際にセキュリティ面で気をつけることはたくさんあると思いますが、サニタイズもしっかりとやっていきましょう!

オススメの関連商品

Note一覧

コメント