{"id":12567,"library":"vue-sanitize-directive","title":"Vue Sanitize Directive","description":"vue-sanitize-directive is a Vue.js directive designed for declarative HTML sanitization within templates, powered by the flexible `sanitize-html` library. It provides a `v-sanitize` directive that can be used to remove potentially unsafe HTML content from user-provided input, offering various modifiers like `.strip`, `.basic`, `.inline`, and `.nothing` for different sanitization levels. The current stable version is 0.2.1. Recent updates in version 0.2.0 introduced support for both Vue 2.x and Vue 3.x, alongside experimental server-side rendering (SSR) capabilities. This package differentiates itself by integrating robust `sanitize-html` functionality directly into Vue's templating system, simplifying the process of displaying user-generated content safely. While convenient for client-side display, the documentation explicitly warns that primary validation and sanitization of user-provided input should always occur on the backend for robust security.","status":"active","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/leopiccionia/vue-sanitize-directive","tags":["javascript","vue","sanitization","sanitize","v-sanitize"],"install":[{"cmd":"npm install vue-sanitize-directive","lang":"bash","label":"npm"},{"cmd":"yarn add vue-sanitize-directive","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-sanitize-directive","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library providing the HTML sanitization logic. The directive is a wrapper around it. Version 2.x changed defaults.","package":"sanitize-html","optional":false}],"imports":[{"note":"Used for global plugin registration with `Vue.use()` (Vue 2) or `app.use()` (Vue 3). For ESM-only projects, `require` will cause issues.","wrong":"const VueSanitize = require('vue-sanitize-directive')","symbol":"VueSanitize","correct":"import VueSanitize from 'vue-sanitize-directive'"},{"note":"This is a global directive registered via the plugin. It is not imported directly. Apply to HTML elements.","symbol":"v-sanitize","correct":"<div v-sanitize=\"unsafeHtml\"></div>"},{"note":"Only for experimental SSR support in Vue 2.x. Most users will not need to import this directly.","symbol":"VueSanitizeDirectiveSSR","correct":"import { VueSanitizeDirectiveSSR } from 'vue-sanitize-directive'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport VueSanitize from 'vue-sanitize-directive';\n\nconst app = createApp({\n  data() {\n    return {\n      unsafeHtml: '<p>Hello <script>alert(\"XSS\")</script> World! <a href=\"javascript:alert(\\'XSS\\')\">Click me</a> <span style=\"color: red;\">Red Text</span></p>',\n      anotherUnsafeHtml: '<div><img src=\"x\" onerror=\"alert(\\'XSS\\')\"></div>',\n      customAllowedTags: ['p', 'span', 'strong']\n    };\n  },\n  template: `\n    <div>\n      <h1>Vue Sanitize Directive Demo</h1>\n\n      <h2>Default (.basic) Sanitization</h2>\n      <p>Original: {{ unsafeHtml }}</p>\n      <div v-sanitize=\"unsafeHtml\"></div>\n      <hr>\n\n      <h2>.strip Modifier (removes all tags)</h2>\n      <p>Original: {{ unsafeHtml }}</p>\n      <div v-sanitize.strip=\"unsafeHtml\"></div>\n      <hr>\n\n      <h2>Custom Allowlist (only p, span, strong)</h2>\n      <p>Original: {{ unsafeHtml }}</p>\n      <div v-sanitize=\"[customAllowedTags, unsafeHtml]\"></div>\n      <hr>\n\n      <h2>.nothing Modifier (be careful!)</h2>\n      <p>Original: {{ anotherUnsafeHtml }}</p>\n      <div v-sanitize.nothing=\"anotherUnsafeHtml\"></div>\n    </div>\n  `\n});\napp.use(VueSanitize);\napp.mount('#app');","lang":"typescript","description":"This quickstart demonstrates how to install and globally register `vue-sanitize-directive` for a Vue 3 application. It showcases the default sanitization, `.strip` modifier, applying a custom allowlist, and the `.nothing` modifier, highlighting how the directive cleans potentially unsafe HTML content."},"warnings":[{"fix":"Review the `sanitize-html` changelog for version 2.x to understand new defaults and explicitly configure your allowlist if your application relied on previous `sanitize-html` defaults for specific tags or attributes. You may need to provide an array of `[allowedTags, unsafeHtmlString]` to the directive.","message":"Version 0.2.0 introduced a breaking change by updating the underlying `sanitize-html` library to 2.7.0. `sanitize-html` version 2.x has significantly different default allowed tags and attributes compared to 1.x.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Always implement robust server-side sanitization and validation for any user-generated content submitted to your application. Use client-side sanitization primarily for display purposes or when backend control is genuinely unavailable.","message":"Client-side HTML sanitization using `v-sanitize` should not be the sole security measure for user-provided input. Backend validation and sanitization are crucial to prevent XSS and other vulnerabilities, especially before storing data in a database.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Only use `v-sanitize.nothing` when you are absolutely certain the HTML content is safe and fully trusted. For any untrusted or user-generated content, rely on the default `v-sanitize` behavior or specific modifiers like `.strip`, `.basic`, or a custom allowlist.","message":"The `.nothing` modifier effectively bypasses all sanitization, making `v-sanitize.nothing` functionally equivalent to `v-html`. Using this modifier with untrusted input can introduce Cross-Site Scripting (XSS) vulnerabilities.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure you are using the latest version of `vue-sanitize-directive` (0.2.1 or newer) to benefit from any `sanitize-html` dependency updates that address security vulnerabilities. Periodically check for updates to `vue-sanitize-directive`.","message":"`sanitize-html` (the underlying library) version 2.7.0 and prior had known vulnerabilities, including Regular Expression Denial of Service (ReDoS) and Information Exposure issues. While `vue-sanitize-directive` bundles `sanitize-html`, older bundled versions might be susceptible.","severity":"gotcha","affected_versions":"<0.2.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have called `app.use(VueSanitize)` (for Vue 3) or `Vue.use(VueSanitize)` (for Vue 2) in your application's entry point (e.g., `main.ts` or `main.js`) after importing `VueSanitize`.","cause":"The `vue-sanitize-directive` plugin has not been correctly installed and registered with your Vue application instance.","error":"Failed to resolve directive: sanitize"},{"fix":"If specific tags or attributes are needed, provide a custom allowlist array as the first argument to the directive: `<div v-sanitize=\"[myCustomAllowlist, unsafeHtml]\"></div>`. Consult the `sanitize-html` documentation for detailed configuration options.","cause":"This often occurs after upgrading to `vue-sanitize-directive` v0.2.0+, due to breaking changes in `sanitize-html` v2.x which introduced new, stricter default allowed tags and attributes. Your content might contain tags that are no longer allowed by default.","error":"My HTML is not being sanitized as expected; some tags or attributes are still present."}],"ecosystem":"npm"}