v-textis HTML-insensitive, while
v-htmldoesn't perform sanitization by default.
v-sanitizeis 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-htmlallowlist (know more here) and the second being the string to be sanitized.
WarningThe 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.
SetupStart 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
import VueSanitize from 'vue-sanitize-directive' // Vue 2.x Vue.use(VueSanitize) // Vue 3.x app.use(VueSanitize)
Strip all tags (Removes all HTML tags, keeping just the text content.
Remove unsafe tags (default/ Allows some HTML tags, but remove unsafe content, like
<span v-sanitize.basic="unsafe_html"></span> = <span v-sanitize="unsafe_html"></span>
Keep inline styles (Removes most tags, keeping only inline formatting and
Allow all tags (Allows all HTML tags, not performing sanitization. For all effects, it's a replacement for