Nuxt(node.js)でsanitize-htmlの許可タグ・属性をいじる方法

エンジニア向けの記事です。サニタイズをしたいけど、タグや属性は色々指定できるようにしたいという人向けの記事です。

結論

pluginsを作りましょう。そこで許可属性を記述しましょう。

まずはパッケージの読み込みから。yarn add sanitize-htmlで読み込めます(npmだったらnpm install)。

/nuxt.config.js
ここでpluginを呼び出します

export default {
 mode: 'universal',
 ...
 plugins: ['~/plugins/sanitize', ...],
 ...
}

/plugins/sanitize.js
pluginsを定義しましょう。TagsとAttributesは好きなものを。
デフォルトで使えるものは本家のgithubに書いてあります。

import Vue from 'vue'
import sanitizeHTML from 'sanitize-html'

sanitizeHTML.defaults.allowedTags.push('h2')
sanitizeHTML.defaults.allowedTags.push('figure')
sanitizeHTML.defaults.allowedTags.push('figcaption')
sanitizeHTML.defaults.allowedTags.push('s')
sanitizeHTML.defaults.allowedTags.push('cite')
sanitizeHTML.defaults.allowedAttributes.a = [
 'id',
 'class',
 'href',
 'target',
 'rel'
]
sanitizeHTML.defaults.allowedAttributes.h2 = ['id', 'class']
sanitizeHTML.defaults.allowedAttributes.h3 = ['id', 'class']
sanitizeHTML.defaults.allowedAttributes.h4 = ['id', 'class']
sanitizeHTML.defaults.allowedAttributes.h5 = ['id', 'class']
sanitizeHTML.defaults.allowedAttributes.h6 = ['id', 'class']
sanitizeHTML.defaults.allowedAttributes.p = ['id', 'class', 'style']
sanitizeHTML.defaults.allowedAttributes.span = ['id', 'class']
sanitizeHTML.defaults.allowedAttributes.br = ['class']
sanitizeHTML.defaults.allowedAttributes.figure = ['class']
sanitizeHTML.defaults.allowedAttributes.img = ['id', 'class', 'src', 'alt', 'width', 'height']
sanitizeHTML.defaults.allowedAttributes.pre = ['*']
sanitizeHTML.defaults.allowedAttributes.code = ['*']
sanitizeHTML.defaults.allowedAttributes.div = ['id', 'class', 'style']

Vue.prototype.$sanitize = sanitizeHTML

任意のファイル
使いたい場所での使い方

<tmeplate>
  <div v-html="$sanitize(content)" />
</template>

<script>
export default {
  data () {
    return {
      content: 'hoge'
    }
  }
}
</script>

注意

sanitize-htmlはそこはかとなく重いです。g-zipで78kbくらい。ガンガンパッケージ使う人は注意しましょう。

解説

ぶっちゃけ今回はそのまんまなので、解説することがありません。
強いて言えば、Vue.prototype.$sanitizeで$sanitizeを使えるようにしています、ということくらいです。