E-Bot7 XSS

The package is about a set of tools which help to deal with security and help to prevent XSS attacks.

Installation

The installation process is pretty common and it doesn't have any other peer dependencies.

npm install @ebot7/xss

Sanitize HTML

import { sanitize } from "@ebot7/xss";

const dirtyHTML = "<h1>Hello world!</h1><p>We use <a href='https://quilljs.com' onmouseenter='alert(\"XSS\");'>Quill</a> as a wysiwyg editor</p>";

const cleanHTML = sanitize(dirtyHTML);

console.log(cleanHTML); //"<p>We use <a href='https://quilljs.com'>Quill</a> as a wysiwyg editor</p>"

It uses sanitize-html package under the hood with some preconfigured options. However, you could pass you own ones which will be deep merged with default options.

import { sanitize } from "@ebot7/xss";

const dirtyHTML = "<h1>Hello world!</h1><p>We use <a href='https://quilljs.com' onmouseenter='alert(\"XSS\");'>Quill</a> as a wysiwyg editor</p>";

const cleanHTML = sanitize(dirtyHTML, {allowedTags: ['h1']});

console.log(cleanHTML); //"<h1>Hello world!</h1><p>We use <a href='https://quilljs.com'>Quill</a> as a wysiwyg editor</p>"

Default options are deepe merged with given ones, that's why you could see an h1 tag in a result above. To get default options you can import them like:

import { DEFAULT_SANITIZE_OPTIONS } from "@ebot7/xss";

And they are:

{
  allowedTags: [
    'a',
    'b',
    'br',
    'div',
    'em',
    'i',
    'img',
    'li',
    'ol',
    'p',
    'span',
    'strong',
    'u',
    'ul',
  ],

  allowedAttributes: {
    a: ['href', 'name', 'target', 'rel'],
    img: ['src', 'alt', 'width', 'height', 'align', 'style'],
  },
}