{"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,"search_vec":"'0.2.0':72 '0.2.1':67 '2':78 '3':82 'alongsid':84 'alway':141 'backend':145 'basic':54 'capabl':91 'client':123 'client-sid':122 'content':43,117 'conveni':120 'current':63 'declar':14 'design':12 'differ':59 'differenti':94 'direct':3,7,11,33,103 'display':113,125 'document':127 'experiment':85 'explicit':128 'flexibl':22 'function':102 'generat':116 'html':15,25,42,101 'inlin':55 'input':48,139 'integr':97 'introduc':73 'javascript':149 'level':61 'librari':26 'like':52 'modifi':51 'noth':57 'occur':142 'offer':49 'packag':93 'potenti':40 'power':19 'primari':131 'process':111 'provid':28,47,138 'recent':68 'remov':39 'render':89 'robust':98,147 'safe':118 'sanit':2,6,16,24,32,60,100,134,151,152,155 'sanitize-html':23,99 'secur':148 'server':87 'server-sid':86 'side':88,124 'simplifi':109 'ssr':90 'stabl':64 'strip':53 'support':74 'system':108 'templat':18,107 'unsaf':41 'updat':69 'use':37 'user':46,115,137 'user-gener':114 'user-provid':45,136 'v':31,154 'v-sanit':30,153 'valid':132 'various':50 'version':65,71 'vue':1,5,77,81,105,150 'vue-sanitize-direct':4 'vue.js':10 'warn':129 'within':17 'x':79,83","created_at":"2026-04-19T13:43:50.689853+00:00","updated_at":"2026-04-19T13:43:50.689853+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://leopiccionia.github.io/vue-sanitize-directive","github":"https://github.com/leopiccionia/vue-sanitize-directive","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-sanitize-directive","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","auth-security"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}