https://github.com/motea927/mt-v-safe-html
A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on DOMPurify.
https://github.com/motea927/mt-v-safe-html
sanitizer vue-html xss-clean
Last synced: 6 months ago
JSON representation
A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on DOMPurify.
- Host: GitHub
- URL: https://github.com/motea927/mt-v-safe-html
- Owner: motea927
- Created: 2023-06-08T17:05:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-31T14:42:37.000Z (about 2 years ago)
- Last Synced: 2025-03-30T18:01:32.349Z (7 months ago)
- Topics: sanitizer, vue-html, xss-clean
- Language: TypeScript
- Homepage: http://mt-v-safe-html.morty.tw/
- Size: 1.24 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mt-v-safe-html
A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on [DOMPurify](https://github.com/cure53/DOMPurify).
## 💪 Motivation
For any commercial projects, we often had to provide html configuration (maybe from API) for customers, but there is a worry our customer may use error syntax or unintentionally copy xss syntax from the Internet.
This had some miserable experiences.
- `
something` -> Nuxt render mismatching, layout broken and hard to debug.
- `please contact example@example.com` -> From remote API to i18n, not use [Literal interpolation
](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#literal-interpolation), application crash.
So, why not to use a robust mechanism? Just set a default string, when we have seen default string, it represent our v-html has some error.
> **Note**: i18n crash only occur in production.
## 🚀 Features
- ⚡ **Lightweight**: The bundle size is less than 9kb when gzipped.
- 🔌 **Flexible**: Supports global configuration and allows for overriding in individual components.
- 👍 **Robust**: Provides support for a default string. If the sanitized tag does not match the original HTML, you can choose to display the default string or the result from DOMPurify.
- 🦾 **Type Strong**: Written in TypeScript for improved code safety and predictability.
## 🏎 Usage
Refer to [documentations](https://mt-v-safe-html.morty.tw) for more details.
### global usage
#### safeHtml
```ts
// main.ts
import { createApp } from 'vue'
import { createSafeHtml } from 'mt-v-safe-html'
import App from './App.vue'
createApp(App)
.use(createSafeHtml, { defaultString: 'Please update your text' })
.mount('#app')
```
```vue
```
## 📦 Install
```bash
pnpm add mt-v-safe-html
yarn add mt-v-safe-html
npm install mt-v-safe-html
```