rehype-sanitize

What is rehype-sanitize?

The rehype-sanitize package is a plugin for the rehype ecosystem that allows you to sanitize HTML. It is used to clean up and secure HTML content by removing potentially harmful elements and attributes, making it safe to use in web applications.

What are rehype-sanitize's main functionalities?

Basic Sanitization

This feature allows you to sanitize basic HTML content by removing potentially harmful elements like <script> tags. The example code demonstrates how to use rehype-sanitize to clean up an HTML string.

const rehype = require('rehype');
const rehypeSanitize = require('rehype-sanitize');

const html = '<div><script>alert("XSS")</script><p>Hello World</p></div>';

rehype()
  .use(rehypeSanitize)
  .process(html)
  .then((file) => {
    console.log(String(file));
  });

Custom Schema

This feature allows you to use a custom schema for sanitization. The example code demonstrates how to use a GitHub-flavored schema to sanitize HTML content.

const rehype = require('rehype');
const rehypeSanitize = require('rehype-sanitize');
const schema = require('hast-util-sanitize/lib/github');

const html = '<div><script>alert("XSS")</script><p>Hello World</p></div>';

rehype()
  .use(rehypeSanitize, schema)
  .process(html)
  .then((file) => {
    console.log(String(file));
  });

Customizing Allowed Elements

This feature allows you to customize the allowed elements and attributes in the HTML content. The example code demonstrates how to allow only <p>, <b>, and <i> tags and the 'className' attribute.

const rehype = require('rehype');
const rehypeSanitize = require('rehype-sanitize');

const schema = {
  tagNames: ['p', 'b', 'i'],
  attributes: {
    '*': ['className']
  }
};

const html = '<div class="container"><p class="text">Hello <b>World</b></p></div>';

rehype()
  .use(rehypeSanitize, schema)
  .process(html)
  .then((file) => {
    console.log(String(file));
  });

Other packages similar to rehype-sanitize

sanitize-html

sanitize-html is a library for cleaning up user-submitted HTML, preserving whitelisted elements and attributes while removing potentially harmful content. It offers a high degree of customization and is widely used for sanitizing HTML in web applications. Compared to rehype-sanitize, sanitize-html provides more granular control over the sanitization process and is not tied to the rehype ecosystem.

dompurify

DOMPurify is a fast, tolerant, and secure client-side HTML, MathML, and SVG sanitizer. It works in all modern browsers and can be used to clean up HTML content before rendering it in the DOM. DOMPurify is known for its performance and security features, making it a popular choice for client-side sanitization. Unlike rehype-sanitize, which is a plugin for the rehype ecosystem, DOMPurify is a standalone library.

xss

xss is a module used to filter input from users to prevent XSS attacks. It provides a set of default rules for sanitizing HTML and allows for customization of these rules. The xss library is designed to be simple and effective, making it a good choice for server-side sanitization. Compared to rehype-sanitize, xss is more focused on preventing XSS attacks and is not part of the rehype ecosystem.

README

rehype-sanitize

rehype plugin to sanitize HTML.

Install

npm:

npm install rehype-sanitize

Use

Say we have the following file, index.html:

<div onmouseover="alert('alpha')">
  <a href="jAva script:alert('bravo')">delta</a>
  <img src="x" onerror="alert('charlie')">
  <iframe src="javascript:alert('delta')"></iframe>
  <math>
    <mi xlink:href="data:x,<script>alert('echo')</script>"></mi>
  </math>
</div>
<script>
require('child_process').spawn('rm', ['-r', '-f', process.env.HOME]);
</script>

And our script, example.js, looks as follows:

var fs = require('fs')
var rehype = require('rehype')
var merge = require('deepmerge')
var gh = require('hast-util-sanitize/lib/github')
var sanitize = require('rehype-sanitize')

var schema = merge(gh, {tagNames: ['math', 'mi']})

rehype()
  .data('settings', {fragment: true})
  .use(sanitize, schema)
  .process(fs.readFileSync('index.html'), function(err, file) {
    if (err) throw err
    console.log(String(file))
  })

Now, running node example yields:

<div>
  <a>delta</a>
  <img src="x">

  <math>
    <mi></mi>
  </math>
</div>

API

rehype().use(sanitize[, schema])

Remove potentially dangerous things from HTML, or more correct: keep only the safe things in a document.

schema

The sanitation schema defines how and if nodes and properties should be cleaned. The schema is documented in hast-util-sanitize.

Security

Improper use of rehype-sanitize can open you up to a cross-site scripting (XSS) attack. The defaults are safe, but deviating from them is likely unsafe.

Use rehype-sanitize after all other plugins, as other plugins are likely also unsafe.

Related

• hast-util-sanitize — Core utility that does the sanitation

Contribute

See contributing.md in rehypejs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer