@nanogiants/vue3-sanitize-html

vue3-sanitize-html

This package contains a Vue 3 directive which adds v-sanitize-html to an element.

Installation

npm i sanitize-html
npm i @nanogiants/vue3-sanitize-html
#optional
npm i @types/sanitize-html -D
# or
yarn add sanitize-html
yarn add @nanogiants/vue3-sanitize-html
# optional
yarn add @types/sanitize-html -D

Usage

main.ts

import { vSanitizeHtml } from '@nanogiants/vue3-sanitize-html';
import App from './App.vue';

const app = createApp(App);
app.directive('sanitize-html', vSanitizeHtml);

component.vue

<template>
  <div v-sanitize-html="{ html }">test</div>
</template>

<script setup lang="ts">
const html = '<div><span>Test</span><img src="https://raw.githubusercontent.com/nanogiants/vue3-packages/HEAD/X" onerror="alert(document.domain)"></div>';
</script>

component.vue with options

<template>
  <div v-sanitize-html="{ html, options }">test</div>
</template>

<script setup lang="ts">
import sanitize from 'sanitize-html';

const html = '<div><span>Test</span><img src="https://raw.githubusercontent.com/nanogiants/vue3-packages/HEAD/X" onerror="alert(document.domain)"></div>';
const options: sanitize.IOptions = {
  allowedTags: [],
};
</script>

args

import sanitize from 'sanitize-html';

const html = '<div>Hello World</div>';
const options: sanitize.IOptions = {
  allowedTags: [],
};

<div v-sanitize-html="{ html, options}"></div>

License

MIT