{"id":12565,"library":"vue-safe-html","title":"Vue Safe HTML Directive","description":"Vue Safe HTML is a Vue.js directive, currently at version 3.0.1, designed to dynamically render HTML content after programmatically stripping unwanted tags. It supports both Vue 2 and Vue 3, is TypeScript-ready, and has zero external dependencies, making it a lightweight solution for basic HTML sanitization. The library differentiates itself by offering explicit customization of allowed HTML tags and attributes, either globally during plugin installation or locally via directive modifiers. While it provides tag-stripping functionality, it explicitly states that it is not a comprehensive XSS (Cross-Site Scripting) protection mechanism and should not be relied upon for full security against malicious inputs. Releases appear to be event-driven, addressing bug fixes and compatibility, rather than following a strict time-based cadence. It also supports Nuxt SSR environments.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/ecosia/vue-safe-html","tags":["javascript","vue","directive","safe","html","sanitize","strip"],"install":[{"cmd":"npm install vue-safe-html","lang":"bash","label":"npm"},{"cmd":"yarn add vue-safe-html","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-safe-html","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primary import for registering the plugin with Vue. For modern Vue CLI/Vite projects, ESM import is standard. CommonJS `require` can be used in older Node/Webpack setups, though not explicitly recommended in v3 documentation examples.","wrong":"const VueSafeHTML = require('vue-safe-html');","symbol":"VueSafeHTML","correct":"import VueSafeHTML from 'vue-safe-html';"},{"note":"Import `allowedTags` named export to extend the default list of allowed tags when configuring the plugin, rather than overwriting it entirely.","symbol":"allowedTags","correct":"import VueSafeHTML, { allowedTags } from 'vue-safe-html';"},{"note":"The directive itself is used directly in the template without explicit JavaScript import, but relies on the plugin being installed via `Vue.use(VueSafeHTML)`.","symbol":"v-safe-html","correct":"<div v-safe-html=\"myHtmlContent\"></div>"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueSafeHTML from 'vue-safe-html';\n\n// Optionally configure global allowed tags or attributes\nVue.use(VueSafeHTML, {\n  allowedTags: ['p', 'strong', 'em', 'a'],\n  allowedAttributes: ['href', 'title']\n});\n\nnew Vue({\n  el: '#app',\n  data: {\n    unsafeHtml: '<script>alert(\"XSS attempt!\")</script><b>Hello</b> <a href=\"malicious.com\" onclick=\"doEvil()\">World</a> <p>This is safe.</p>'\n  },\n  template: `\n    <div id=\"app\">\n      <h3>Content with default sanitization:</h3>\n      <div v-safe-html=\"unsafeHtml\"></div>\n      <h3>Content with local override (only allowing 'p'):</h3>\n      <div v-safe-html.p=\"unsafeHtml\"></div>\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates installation of the `vue-safe-html` plugin globally, passing custom `allowedTags` and `allowedAttributes`, and then using the `v-safe-html` directive in a Vue component to render sanitized HTML, including a local override."},"warnings":[{"fix":"For full XSS protection, use a dedicated, robust sanitization library that handles attributes, CSS, URLs, and other vectors, or sanitize content on the server-side before rendering. Consider libraries like `dompurify` in conjunction or as an alternative.","message":"This library is explicitly NOT XSS-safe. It only strips tags programmatically based on a whitelist and does not provide comprehensive protection against all forms of Cross-Site Scripting attacks. Do not rely on it as a sole security measure for untrusted HTML.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly define `allowedAttributes` when installing the plugin via `Vue.use(VueSafeHTML, { allowedAttributes: ['href', 'title', 'target'] })` to allow specific attributes to be rendered on their respective allowed tags.","message":"Starting from version 2.2.0, HTML attributes are *completely removed* by default. If you were relying on attributes like `href`, `class`, or `src` to be preserved, they will now be stripped unless explicitly allowed.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"Review any edge cases involving unusual or malformed HTML that previously passed through the sanitizer to ensure desired behavior is maintained. Ensure your `allowedTags` configuration is precise.","message":"The regex for sanitizing HTML tags was rewritten in v2.2.0, addressing several issues where input tags or tags starting with certain characters were not stripped correctly. While this improves security, it might alter behavior for previously malformed or unexpectedly allowed tags.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"Only set `allowedTags: []` if you explicitly intend to remove all HTML formatting. To allow specific tags, provide a non-empty array of tag names (e.g., `['p', 'strong']`).","message":"If you provide an empty array to the `allowedTags` option (e.g., `Vue.use(VueSafeHTML, { allowedTags: [] })`), all HTML tags will be stripped from the content, leaving only plain text.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"When installing the plugin, configure `allowedAttributes` with an array of attribute names you wish to retain: `Vue.use(VueSafeHTML, { allowedAttributes: ['href', 'class', 'title'] })`.","cause":"Since version 2.2.0, `vue-safe-html` strips all HTML attributes by default for enhanced security. Only explicitly allowed attributes will be preserved.","error":"My HTML attributes (like `href`, `class`, `style`) are disappearing after `v-safe-html` is applied!"},{"fix":"Do not rely on `vue-safe-html` alone for XSS protection. Implement server-side sanitization, or use a dedicated, robust client-side XSS sanitization library (e.g., DOMPurify) as an additional layer of defense for untrusted HTML content.","cause":"The library is a basic HTML tag-stripper and is explicitly stated as 'not XSS-safe'. It primarily focuses on whitelisting tags, not comprehensive XSS protection.","error":"I'm using `vue-safe-html` but still seeing XSS vulnerabilities in my application."},{"fix":"Extend the default `allowedTags` array when installing the plugin: `import VueSafeHTML, { allowedTags } from 'vue-safe-html'; Vue.use(VueSafeHTML, { allowedTags: [...allowedTags, 'img', 'span'] })`. Alternatively, use directive modifiers for local overrides: `<div v-safe-html.img.span=\"myHtml\"></div>`.","cause":"`vue-safe-html` operates on an `allowedTags` whitelist. By default, only a very limited set of common text formatting tags are allowed.","error":"Certain HTML tags (e.g., `<img>`, `<span>`) are stripped even though I want them to render."}],"ecosystem":"npm"}