Sanitize

Sanitize is an allowlist-based HTML and CSS sanitizer. It removes all HTML and/or CSS from a string except the elements, attributes, and properties you choose to allow.

Using a simple configuration syntax, you can tell Sanitize to allow certain HTML elements, certain attributes within those elements, and even certain URL protocols within attributes that contain URLs. You can also allow specific CSS properties, @ rules, and URL protocols in elements or attributes containing CSS. Any HTML or CSS that you don't explicitly allow will be removed.

Sanitize is based on the Nokogiri HTML5 parser, which parses HTML the same way modern browsers do, and Crass, which parses CSS the same way modern browsers do. As long as your allowlist config only allows safe markup and CSS, even the most malformed or malicious input will be transformed into safe output.

Installation

gem install sanitize

Quick Start

require 'sanitize'

# Clean up an HTML fragment using Sanitize's permissive but safe Relaxed config.
# This also sanitizes any CSS in `<style>` elements or `style` attributes.
Sanitize.fragment(html, Sanitize::Config::RELAXED)

# Clean up an HTML document using the Relaxed config.
Sanitize.document(html, Sanitize::Config::RELAXED)

# Clean up a standalone CSS stylesheet using the Relaxed config.
Sanitize::CSS.stylesheet(css, Sanitize::Config::RELAXED)

# Clean up some CSS properties using the Relaxed config.
Sanitize::CSS.properties(css, Sanitize::Config::RELAXED)

Usage

Sanitize can sanitize the following types of input:

HTML fragments
HTML documents
CSS stylesheets inside HTML <style> elements
CSS properties inside HTML style attributes
Standalone CSS stylesheets
Standalone CSS properties

[!WARNING]

Sanitize cannot fully sanitize the contents of <math> or <svg> elements. MathML and SVG elements are foreign elements that don't follow normal HTML parsing rules.

By default, Sanitize will remove all MathML and SVG elements. If you add MathML or SVG elements to a custom element allowlist, you may create a security vulnerability in your application.

HTML Fragments

A fragment is a snippet of HTML that doesn't contain a root-level <html> element.

If you don't specify any configuration options, Sanitize will use its strictest settings by default, which means it will strip all HTML and leave only safe text behind.

html = '<b><a href="http://foo.com/">foo</a></b><img src="bar.jpg">'
Sanitize.fragment(html)
# => "foo"

To keep certain elements, add them to the element allowlist.

Sanitize.fragment(html, elements: ['b'])
# => "<b>foo</b>"

HTML Documents

When sanitizing a document, the <html> element must be allowlisted. You can also set :allow_doctype to true to allow well-formed document type definitions.

html = %[
  <!DOCTYPE html>
  <html>
    <b><a href="http://foo.com/">foo</a></b><img src="bar.jpg">
  </html>
]

Sanitize.document(html,
  allow_doctype: true,
  elements: ['html']
)
# => "<!DOCTYPE html><html>foo\n  \n</html>"

CSS in HTML

To sanitize CSS in an HTML fragment or document, first allowlist the <style> element and/or the style attribute. Then allowlist the CSS properties, @ rules, and URL protocols you wish to allow. You can also choose whether to allow CSS comments or browser compatibility hacks.

html = %[
  <style>
    div { color: green; width: 1024px; }
  </style>

  <div style="height: 100px; width: 100px;"></div>
  <p>hello!</p>
]

Sanitize.fragment(html,
  elements: ['div', 'style'],
  attributes: {'div' => ['style']},

  css: {
    properties: ['width']
  }
)
#=> %[
#   <style>
#     div {  width: 1024px; }
#   </style>
#
#   <div style=" width: 100px;"></div>
#   hello!
# ]

Standalone CSS

Sanitize will happily clean up a standalone CSS stylesheet or property string without needing to invoke the HTML parser.

css = %[
  @import url(evil.css);

  a { text-decoration: none; }

  a:hover {
    left: expression(alert('xss!'));
    text-decoration: underline;
  }
]

Sanitize::CSS.stylesheet(css, Sanitize::Config::RELAXED)
# => %[
#
#
#   a { text-decoration: none; }
#
#   a:hover {
#
#     text-decoration: underline;
#   }
# ]

Sanitize::CSS.properties(%[
  left: expression(alert('xss!'));
  text-decoration: underline;
], Sanitize::Config::RELAXED)
# => %[
#
#   text-decoration: underline;
# ]

Configuration

In addition to the ultra-safe default settings, Sanitize comes with three other built-in configurations that you can use out of the box or adapt to meet your needs.

Sanitize::Config::RESTRICTED

Allows only very simple inline markup. No links, images, or block elements.

Sanitize.fragment(html, Sanitize::Config::RESTRICTED)
# => "<b>foo</b>"

Sanitize::Config::BASIC

Allows a variety of markup including formatting elements, links, and lists.

Images and tables are not allowed, links are limited to FTP, HTTP, HTTPS, and mailto protocols, and a rel="nofollow" attribute is added to all links to mitigate SEO spam.

Sanitize.fragment(html, Sanitize::Config::BASIC)
# => '<b><a href="http://foo.com/" rel="nofollow">foo</a></b>'

Sanitize::Config::RELAXED

Allows an even wider variety of markup, including images and tables, as well as safe CSS. Links are still limited to FTP, HTTP, HTTPS, and mailto protocols, while images are limited to HTTP and HTTPS. In this mode, rel="nofollow" is not added to links.

Sanitize.fragment(html, Sanitize::Config::RELAXED)
# => '<b><a href="http://foo.com/">foo</a></b><img src="bar.jpg">'

Custom Configuration

If the built-in modes don't meet your needs, you can easily specify a custom configuration:

Sanitize.fragment(html,
  elements: ['a', 'span'],

  attributes: {
    'a' => ['href', 'title'],
    'span' => ['class']
  },

  protocols: {
    'a' => {'href' => ['http', 'https', 'mailto']}
  }
)

You can also start with one of Sanitize's built-in configurations and then customize it to meet your needs.

The built-in configs are deeply frozen to prevent people from modifying them (either accidentally or maliciously). To customize a built-in config, create a new copy using Sanitize::Config.merge(), like so:

# Create a customized copy of the Basic config, adding <div> and <table> to the
# existing allowlisted elements.
Sanitize.fragment(html, Sanitize::Config.merge(Sanitize::Config::BASIC,
  elements: Sanitize::Config::BASIC[:elements] + ['div', 'table'],
  remove_contents: true
))

The example above adds the <div> and <table> elements to a copy of the existing list of elements in Sanitize::Config::BASIC. If you instead want to completely overwrite the elements array with your own, you can omit the + operation:

# Overwrite :elements instead of creating a copy with new entries.
Sanitize.fragment(html, Sanitize::Config.merge(Sanitize::Config::BASIC,
  elements: ['div', 'table'],
  remove_contents: true
))

Config Settings

:add_attributes (Hash)

Attributes to add to specific elements. If the attribute already exists, it will be replaced with the value specified here. Specify all element names and attributes in lowercase.

add_attributes: {
  'a' => {'rel' => 'nofollow'}
}

:allow_comments (boolean)

Whether or not to allow HTML comments. Allowing comments is strongly discouraged, since IE allows script execution within conditional comments. The default value is false.

:allow_doctype (boolean)

Whether or not to allow well-formed HTML doctype declarations such as "<!DOCTYPE html>" when sanitizing a document. This setting is ignored when sanitizing fragments. The default value is false.

:attributes (Hash)

Attributes to allow on specific elements. Specify all element names and attributes in lowercase.

attributes: {
  'a' => ['href', 'title'],
  'blockquote' => ['cite'],
  'img' => ['alt', 'src', 'title']
}

If you'd like to allow certain attributes on all elements, use the symbol :all instead of an element name.

# Allow the class attribute on all elements.
attributes: {
  :all => ['class'],
  'a' => ['href', 'title']
}

To allow arbitrary HTML5 data-* attributes, use the symbol :data in place of an attribute name.

# Allow arbitrary HTML5 data-* attributes on <div> elements.
attributes: {
  'div' => [:data]
}

:css (Hash)

Hash of the following CSS config settings to be used when sanitizing CSS (either standalone or embedded in HTML).

:css => :allow_comments (boolean)

Whether or not to allow CSS comments. The default value is false.

:css => :allow_hacks (boolean)

Whether or not to allow browser compatibility hacks such as the IE * and _ hacks. These are generally harmless, but technically result in invalid CSS. The default is false.

:css => :at_rules (Array or Set)

Names of CSS at-rules to allow that may not have associated blocks, such as import or charset. Names should be specified in lowercase.

:css => :at_rules_with_properties (Array or Set)

Names of CSS at-rules to allow that may have associated

Sanitize

Install / Use

README

Sanitize

Links

Installation

Quick Start

Usage

HTML Fragments

HTML Documents

CSS in HTML

Standalone CSS

Configuration

Sanitize::Config::RESTRICTED

Sanitize::Config::BASIC

Sanitize::Config::RELAXED

Custom Configuration

Config Settings

:add_attributes (Hash)

:allow_comments (boolean)

:allow_doctype (boolean)

:attributes (Hash)

:css (Hash)

:css => :allow_comments (boolean)

:css => :allow_hacks (boolean)

:css => :at_rules (Array or Set)

:css => :at_rules_with_properties (Array or Set)