@aegisjsproject/sanitizer

@aegisjsproject/sanitizer

Sanitizer API polyfill & config

• Code of Conduct
• Contributing

AegisJSProject Sanitizer

This is a library & polyfill for the Sanitizer API.

It provides a minimal polyfill for Element.prototype.setHTML() & Document.parseHTML(), as well as config files for HTML, SVG, & MathML. Please note, however, that the default sanitizer config in these sanitizer methods only support HTML by default.

The "base" config (not what is used by default) DOES add support for <svg>, and the "complete" config supports <svg> & <math>.

This helps prevent XSS via:

• Stripping event attributes such as onclick
• Removing unsafe URL attributes such a <a href="javascript:...">
• Prevents adding <script>s and <style>s
• Removes other potentially dangerous elements & attributes

Example

import '@aegijsproject/sanitizer/polyfill.js';
import { sanitizer } from '@aegisjsproject/sanitizer/config/base.js';

document.body.setHTML(`
  <header id="header">
    <h1 onclick="alert(location.href)" data-foo="bar">Hello, World!</h1>
  </header>
  <nav id="nav" class="flex row">
    <button type="button" popovertarget="bacon" popovertargetaction="show" accesskey="b">Show Bacon Ipsum</button>
    <a href="#foo">Normal Link</a>
    <a href="javascript:alert('javascript:')"><code>javascript:</code> Link</a>
    <a href="data:text/plain,Not%20Allowed" target="_blank"><code>data:</code> Link</a>
    <a href="${URL.createObjectURL(file)}" target="_blank"><code>blob:</code> Link</a>
  </nav>
  <main id="main"></main>
  <div popover="auto" id="bacon">
    <div>
      <b>Bacon Ipsum</b>
      <button type="button" popovertarget="bacon" popovertargetaction="hide">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="currentColor" role="presentation" aria-label="Close Popover">
          <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/>
        </svg>
      </button>
    </div>
    <p>Bacon ipsum dolor amet pork belly frankfurter drumstick jowl brisket capicola short ribs. Cow chislic ham hock t-bone shoulder salami rump corned beef spare ribs prosciutto bresaola picanha drumstick. Swine tail pork belly ribeye beef kielbasa. Beef cupim ball tip pastrami spare ribs strip steak tongue salami venison. Venison cupim meatball strip steak meatloaf prosciutto buffalo frankfurter hamburger flank boudin.</p>
  </div>
`, { sanitizer });

Restricting Allowed Content (eg for comments)

const sanitizer = {
  elements: ['span', 'div', 'p', 'code', 'pre', 'blockquote', 'img', 'a'],
  attributes: ['href', 'src', 'loading', 'height', 'width', 'class', 'alt', 'target'],
};

fetch('https://api.example.com/comments')
  .then(resp => resp.json())
  .then(comments => {
    document.querySelector('.comments').append(...comments.map(comment => {
      const el = document.createElement('div');
      el.setHTML(comment.body, { sanitizer });
      return el;
    }));
  });

Adding to allowed elements / attributes:

import { elements, attributes } from '@aegisjsproject/sanitizer/config/html.js';

const sanitizer = {
  elements: ['hello-world', ...elements],
  attributes: ['foo', ...attributes],
};

document.querySelector('.container').setHTML(`
  <hello-world foo="bar"></hello-world>
`, { sanitizer });