mt-v-safe-html

A lightweight, flexible, and robust XSS sanitizer's Vue plugin based on 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.

• <div>something</div></div> -> Nuxt render mismatching, layout broken and hard to debug.
• please contact example@example.com -> From remote API to i18n, not use 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 for more details.

global usage

safeHtml

1// main.ts
2import { createApp } from 'vue'
3import { createSafeHtml } from 'mt-v-safe-html'
4
5import App from './App.vue'
6
7createApp(App)
8  .use(createSafeHtml, { defaultString: 'Please update your text' }) 
9  .mount('#app')

1<template>
2  <div v-html="$safeHtml('<div>something</div></div>')"></div>
3  <div v-html="$safeHtml(() => $t('contact-us'))">
4  </div>
5</template>

i18nHtml

i18nHtml is an syntax sugar for use, just use like $t, make sure you already install vue-i18n

1// main.ts
2import { createApp } from 'vue'
3import { createI18nHtml } from 'mt-v-safe-html'
4
5import App from './App.vue'
6
7const i18n = createI18n({
8  globalInjection: true,
9  legacy: false,
10  messages: {
11    en: {
12      'contact-us': 'please contact us some@example.com'
13    }
14  }
15})
16
17createApp(App)
18  .use(i18n)
19  .use(createI18nHtml, { defaultString: 'Please update your text' }) 
20  .mount('#app')

1<template>
2  <div v-html="$i18nHtml('contact-us')"></div>
3</template>

📦 Install

1pnpm add mt-v-safe-html
2yarn add mt-v-safe-html
3npm install mt-v-safe-html