https://github.com/radyakaze/nuxt-dompurify
A Nuxt 3 module for sanitizing HTML content using DOMPurify to protect against XSS attacks.
https://github.com/radyakaze/nuxt-dompurify
dompurify html-sanitization html-sanitizer nuxt nuxt3 sanitizer security xss
Last synced: 7 months ago
JSON representation
A Nuxt 3 module for sanitizing HTML content using DOMPurify to protect against XSS attacks.
- Host: GitHub
- URL: https://github.com/radyakaze/nuxt-dompurify
- Owner: radyakaze
- License: mit
- Created: 2024-10-03T14:18:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-11T09:08:31.000Z (12 months ago)
- Last Synced: 2025-03-16T20:51:18.307Z (7 months ago)
- Topics: dompurify, html-sanitization, html-sanitizer, nuxt, nuxt3, sanitizer, security, xss
- Language: TypeScript
- Homepage:
- Size: 1.29 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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:
```bash
yarn add -D @radya/nuxt-dompurify
```
## Usage
Add the module to your Nuxt config file:
```javascript
export default defineNuxtConfig({
modules: ['@radya/nuxt-dompurify'],
})
```
### Example
You can use the directive `v-sanitize-html` to sanitize HTML content in your templates:
```vue
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>`
```
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:
```ts
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:
```vue
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>`
```
## Contributing
We welcome contributions to `Nuxt DOMPurify`. Please follow these steps to get started:
1. **Enable Corepack**: Ensure Corepack is enabled by running:
```bash
corepack enable
```
2. **Install Dependencies**: Install all necessary dependencies by running:
```bash
yarn install
```
3. **Generate Type Stubs**: Run the following command to generate type stubs:
```bash
yarn dev:prepare
```
4. **Start Development Mode**: Use the following command to start the playground in development mode:
```bash
yarn dev
```
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.