https://github.com/leopiccionia/vue-sanitize-directive

Vue directive for HTML sanitization.
https://github.com/leopiccionia/vue-sanitize-directive

Last synced: 10 days ago
JSON representation

Vue directive for HTML sanitization.

• Host: GitHub
• URL: https://github.com/leopiccionia/vue-sanitize-directive
• Owner: leopiccionia
• License: mit
• Created: 2017-12-03T19:07:25.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-29T20:40:23.000Z (over 1 year ago)
• Last Synced: 2024-12-26T20:38:44.923Z (22 days ago)
• Language: Vue
• Homepage: https://leopiccionia.github.io/vue-sanitize-directive/
• Size: 2.1 MB
• Stars: 11
• Watchers: 2
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-sanitize

[Vue](https://vuejs.org)'s default `v-text` is HTML-insensitive, while `v-html` doesn't perform sanitization by default.

`v-sanitize` is a Vue directive for HTML sanitization, powered by the flexible [sanitize-html](https://www.npmjs.com/package/sanitize-html). The directive can receive either a string, that will undergo a partial sanitization if no modifier is present, or an array of two elements, the first being a `sanitize-html` allowlist ([know more here](https://github.com/apostrophecms/sanitize-html)) and the second being the string to be sanitized.

```html



```


## Warning

The validation and sanitization of user-provided input should be performed on the back-end, before storing it on the database. You should resort to client-side input sanitization only if you don't control the back-end, e.g., consuming content from an external API.

## Setup

Start getting it with NPM or Yarn ([see package](https://www.npmjs.com/package/vue-sanitize-directive)).

```bash

npm install vue-sanitize-directive

```

Then install it like any other Vue plugin. This will provide the `v-sanitize` directive globally.

```js

import VueSanitize from 'vue-sanitize-directive'

// Vue 2.x

Vue.use(VueSanitize)

// Vue 3.x

app.use(VueSanitize)

```

## Usage ([**demos**](https://leopiccionia.github.io/vue-sanitize-directive))

### Strip all tags (`.strip` modifier)

Removes all HTML tags, keeping just the text content.

```html



```

### Remove unsafe tags (default/ `.basic` modifier)

Allows some HTML tags, but remove unsafe content, like `` and `` tags.

```html

 = 

```

### Keep inline styles (`.inline` modifier)

Removes most tags, keeping only inline formatting and `
` tags.

```html



```

### Allow all tags (`.nothing` modifier)

Allows all HTML tags, not performing sanitization. For all effects, it's a replacement for `v-html`.

```html



```