vue-sanitize-directive

v-sanitize

Vue's default v-text is HTML-insensitive, while v-html doesn't perform sanitization by default.

v-sanitize is a Vue directive for HTML sanitization, powered by the flexible sanitize-html. The directive can receive either a string, that will undergo a partial sanitization if no modifier is present, or an array of two elements, the first being a sanitize-html allowlist (know more here) and the second being the string to be sanitized.

<div v-sanitize="unsafe_html"></div>

Warning

The validation and sanitization of user-provided input should be performed on the back-end, before storing it on the database. You should resort to client-side input sanitization only if you don't control the back-end, e.g., consuming content from an external API.

Setup

Start getting it with NPM or Yarn (see package).

npm install vue-sanitize-directive

Then install it like any other Vue plugin. This will provide the v-sanitize directive globally.

import VueSanitize from 'vue-sanitize-directive'

// Vue 2.x
Vue.use(VueSanitize)

// Vue 3.x
app.use(VueSanitize)

Usage (demos)

Strip all tags (.strip modifier)

Removes all HTML tags, keeping just the text content.

<span v-sanitize.strip="unsafe_html"></span>

Remove unsafe tags (default/ .basic modifier)

Allows some HTML tags, but remove unsafe content, like <script/> and <iframe/> tags.

<span v-sanitize.basic="unsafe_html"></span> = <span v-sanitize="unsafe_html"></span>

Keep inline styles (.inline modifier)

Removes most tags, keeping only inline formatting and <br/> tags.

<span v-sanitize.inline="unsafe_html"></span>

Allow all tags (.nothing modifier)

Allows all HTML tags, not performing sanitization. For all effects, it's a replacement for v-html.

<span v-sanitize.nothing="unsafe_html"></span>