DOMPurify

Category	Security
Dependencies	isomorphic-dompurify
Bundle size	0.12 kB (10.36 kB with 3rd party deps)

Isomorphic DOMPurify wrapper used by Vueform for HTML sanitization.

Installation

npm

npm install @vueform/dompurify

pnpm

pnpm add @vueform/dompurify

yarn

yarn add @vueform/dompurify

bun

bun add @vueform/dompurify

import { createVueform } from '@vueform/ui'
import dompurify from '@vueform/dompurify'

createVueform({
  plugins: [dompurify()], 
})

Usage

Registering the plugin installs DOMPurify as the security module's sanitize engine ($security.sanitizer) — HTML rendered in the areas the security policy allows passes through it from then on. A sanitizer already set in the config wins over the plugin. The policy itself — which areas may render HTML and the rest of the $security options — is documented in the Security guide.

Two $security options, available only with this plugin, configure the engine:

createVueform({
  plugins: [dompurify()],
  $security: {
    sanitizeOptions: { ALLOWED_TAGS: ['b', 'i', 'a'] },
    sanitizeInit: (DOMPurify) => {
      DOMPurify.addHook('afterSanitizeAttributes', (node) => { /* ... */ })
      return DOMPurify
    },
  },
})

Option	Description
sanitizeOptions	Passed directly to DOMPurify.sanitize() as the config object.
sanitizeInit	Receives the DOMPurify instance before first use — add hooks, set global config.

Source

packages/dompurify