Registry / web-framework / vue-safe-html

vue-safe-html

library3.0.1jsnpmunverified

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.

web-framework auth-security

npm install vue-safe-html

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SAFE-HTML

vue-safe-html

web-frameworkjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueSafeHTML

✓ import VueSafeHTML from 'vue-safe-html';

✗ const VueSafeHTML = require('vue-safe-html');

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.

allowedTags

✓ import VueSafeHTML, { allowedTags } from 'vue-safe-html';

Import `allowedTags` named export to extend the default list of allowed tags when configuring the plugin, rather than overwriting it entirely.

v-safe-html

✓ <div v-safe-html="myHtmlContent"></div>

The directive itself is used directly in the template without explicit JavaScript import, but relies on the plugin being installed via `Vue.use(VueSafeHTML)`.

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.

import Vue from 'vue'; import VueSafeHTML from 'vue-safe-html'; // Optionally configure global allowed tags or attributes Vue.use(VueSafeHTML, { allowedTags: ['p', 'strong', 'em', 'a'], allowedAttributes: ['href', 'title'] }); new Vue({ el: '#app', data: { unsafeHtml: '<script>alert("XSS attempt!")</script><b>Hello</b> <a href="malicious.com" onclick="doEvil()">World</a> <p>This is safe.</p>' }, template: ` <div id="app"> <h3>Content with default sanitization:</h3> <div v-safe-html="unsafeHtml"></div> <h3>Content with local override (only allowing 'p'):</h3> <div v-safe-html.p="unsafeHtml"></div> </div> ` });

Debug

Known issues

gotchaThis 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.

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.

affects: >=1.0.0

breakingStarting 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.

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.

affects: >=2.2.0

breakingThe 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.

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.

affects: >=2.2.0

gotchaIf 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.

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']`).

affects: >=1.0.0

Errors

Common errors & fixes

My HTML attributes (like `href`, `class`, `style`) are disappearing after `v-safe-html` is applied!

Since version 2.2.0, `vue-safe-html` strips all HTML attributes by default for enhanced security. Only explicitly allowed attributes will be preserved.

fix

When installing the plugin, configure `allowedAttributes` with an array of attribute names you wish to retain: `Vue.use(VueSafeHTML, { allowedAttributes: ['href', 'class', 'title'] })`.

I'm using `vue-safe-html` but still seeing XSS vulnerabilities in my application.

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.

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.

Certain HTML tags (e.g., `<img>`, `<span>`) are stripped even though I want them to render.

`vue-safe-html` operates on an `allowedTags` whitelist. By default, only a very limited set of common text formatting tags are allowed.

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>`.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

27 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ecosia/vue-safe-html ↗

packagehttps://www.npmjs.com/package/vue-safe-html ↗