v-sanitize
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

    v-sanitize

    Whitelist-based HTML sanitizer (sanitize-html) for Vue.js apps.

    Software License Packagist Latest Version Issues Download Download Download

    Note

    We should always sanitize user input values on the server. Do sanitize with Vue only for necessary cases (e.g markdown preview).

    Install

    npm install --save v-sanitize
    

    or

    yarn add v-sanitize
    

    Usage

    Register the plugin

    import Vue from 'vue';
    import VSanitize from "v-sanitize";
    
    Vue.use(VSanitize);

    Use with NuxtJS

    nuxt.config.js

    export default {
      modules: [
        ['v-sanitize/nuxt', { /* options */ }]
      ],
      sanitize: { /* options */ }
    }

    You can pass default options too:

    defaultOptions = {
        allowedTags: ['a', 'b'],
        allowedAttributes: {
          'a': [ 'href' ]
        }
    };
    Vue.use(VSanitize, defaultOptions);

    Use it in your components:

    <template>
      <div contenteditable="true" @paste="sanitize"></div>
    </template>
    
    <script>
    export default {
      methods: {
        sanitize(event) {
          event.preventDefault();
          const html = this.$sanitize(event.clipboardData.getData('text/html'));
          //or
          //const html = this.$sanitize(
          //  event.clipboardData.getData('text/html'),
          //  {
          //    allowedTags: ['b', 'br']
          //  }
          //);
          document.execCommand('insertHTML', false, (html));
        }
      },
    }
    </script>

    API

    Vue.use(VSanitize[, defaultOptions])

    options

    • Type: Object

    This plugin is dependent on sanitize-html. For details, see here https://github.com/punkave/sanitize-html#readme.

    this.$sanitize(dirty[, options])

    dirty

    • Type: String
    • Required: true

    options

    • Type: Object

    If you don't pass an options, the default options will be used.

    VSanitize.defaults

    Return sanitizeHtml.defaults.

    Directive

    Vue'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. 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 whitelist (know more here) and the second being the string to be sanitized.

    <div v-sanitize="unsafe_html"></div>

    Strip all tags (.strip modifier)

    Removes all HTML tags, keeping just the text content.

    <span v-sanitize.strip="unsafe_html"></span>

    Remove unsafe tags (default/ .basic modifier)

    Allows some HTML tags, but remove unsafe content, like <script/> and <iframe/> tags.

    <span v-sanitize.basic="unsafe_html"></span> = <span v-sanitize="unsafe_html"></span>

    Keep inline styles (.inline modifier)

    Removes most tags, keeping only inline formatting and <br/> tags.

    <span v-sanitize.inline="unsafe_html"></span>

    Allow all tags (.nothing modifier)

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

    <span v-sanitize.nothing="unsafe_html"></span>

    Change log

    Please see CHANGELOG for more information what has changed recently.

    Security

    If you discover any security related issues, please email chantouchsek.cs83@gmail.com instead of using the issue tracker.

    Contributing

    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    License

    The MIT License (MIT). Please see License File for more information.

    Install

    npm i v-sanitize

    DownloadsWeekly Downloads

    1,728

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • chantouchsek