@radya/nuxt-dompurify
v1.0.5
Published
A Nuxt 3 module that integrates DOMPurify for sanitizing HTML content and protecting against XSS attacks, with support for multiple profiles.
Downloads
155
Maintainers
Readme
Nuxt DOMPurify
A Nuxt 3 module that integrates DOMPurify for sanitizing HTML content. This module helps protect your application from XSS attacks by sanitizing any potentially dangerous HTML inputs.
Installation
Install the module via Yarn:
yarn add -D @radya/nuxt-dompurify
Usage
Add the module to your Nuxt config file:
export default defineNuxtConfig({
modules: ['@radya/nuxt-dompurify'],
})
Example
You can use the directive v-sanitize-html
to sanitize HTML content in your templates:
<template>
<div v-sanitize-html="dirtyHtml" />
</template>
<script setup>
const dirtyHtml = `
<div>
<h1>Welcome to My Website</h1>
<h3>This is H3 heading</h3>
<p>This is a <strong>simple</strong> paragraph.</p>
<img src="image.jpg" onerror="alert('Hacked!')" />
<a href="https://example.com" onclick="stealCookies()">Click me!</a>
<script>alert('This is an XSS attack!')</` + `script>
</div>`
</script>
This will sanitize the dirtyHtml
variable, ensuring it is safe to render in the DOM.
Profiles
This module also supports profiles to allow different DOMPurify configurations for specific use cases. You can define profiles in your nuxt.config.ts
like this:
export default defineNuxtConfig({
modules: ['@radya/nuxt-dompurify'],
dompurify: {
profiles: {
profileName: {
ALLOWED_TAGS: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
}
}
},
})
Using Profiles
To use a specific profile, you can pass the profile name as an argument to the v-sanitize-html
directive:
<template>
<div v-sanitize-html:profileName="dirtyHTML" />
</template>
<script setup>
const dirtyHtml = `
<div>
<h1>Welcome to My Website</h1>
<h3>This is H3 heading</h3>
<p>This is a <strong>simple</strong> paragraph.</p>
<img src="image.jpg" onerror="alert('Hacked!')" />
<a href="https://example.com" onclick="stealCookies()">Click me!</a>
<script>alert('This is an XSS attack!')</` + `script>
</div>`
</script>
Contributing
We welcome contributions to Nuxt DOMPurify
. Please follow these steps to get started:
Enable Corepack: Ensure Corepack is enabled by running:
corepack enable
Install Dependencies: Install all necessary dependencies by running:
yarn install
Generate Type Stubs: Run the following command to generate type stubs:
yarn dev:prepare
Start Development Mode: Use the following command to start the playground in development mode:
yarn dev
License
This project is licensed under the MIT License. See the LICENSE file for more details.