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 [Google's Gumbo HTML5 parser][gumbo], which parses HTML
exactly the same way modern browsers do, and [Crass][crass], which parses CSS
exactly 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.
[![Build Status](https://travis-ci.org/rgrove/sanitize.svg?branch=master)](https://travis-ci.org/rgrove/sanitize)
[![Gem Version](https://badge.fury.io/rb/sanitize.svg)](http://badge.fury.io/rb/sanitize)
[crass]:https://github.com/rgrove/crass
[gumbo]:https://github.com/google/gumbo-parser
Links
-----
* [Home](https://github.com/rgrove/sanitize/)
* [API Docs](http://rubydoc.info/github/rgrove/sanitize/master)
* [Issues](https://github.com/rgrove/sanitize/issues)
* [Release History](https://github.com/rgrove/sanitize/blob/master/HISTORY.md#sanitize-history)
* [Online Demo](https://sanitize.herokuapp.com/)
* [Biased comparison of Ruby HTML sanitization libraries](https://github.com/rgrove/sanitize/blob/master/COMPARISON.md)
Installation
-------------
```
gem install sanitize
```
Quick Start
-----------
```ruby
require 'sanitize'
# Clean up an HTML fragment using Sanitize's permissive but safe Relaxed config.
# This also sanitizes any CSS in `
hello!
]
Sanitize.fragment(html,
:elements => ['div', 'style'],
:attributes => {'div' => ['style']},
:css => {
:properties => ['width']
}
)
#=> %[
#
#
#
# hello!
# ]
```
### Standalone CSS
Sanitize will happily clean up a standalone CSS stylesheet or property string
without needing to invoke the HTML parser.
```ruby
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.
```ruby
Sanitize.fragment(html, Sanitize::Config::RESTRICTED)
# => 'foo'
```
### 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.
```ruby
Sanitize.fragment(html, Sanitize::Config::BASIC)
# => 'foo'
```
### 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.
```ruby
Sanitize.fragment(html, Sanitize::Config::RELAXED)
# => 'foo'
```
### Custom Configuration
If the built-in modes don't meet your needs, you can easily specify a custom
configuration:
```ruby
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:
```ruby
# Create a customized copy of the Basic config, adding
and
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 `
` and `
` 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:
```ruby
# 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.
```ruby
: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 "" 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.
```ruby
: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.
```ruby
# 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.
```ruby
# Allow arbitrary HTML5 data-* attributes on
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][at-rules] to allow that may not have associated blocks,
such as `import` or `charset`. Names should be specified in lowercase.
[at-rules]:https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
##### :css => :at_rules_with_properties (Array or Set)
Names of CSS [at-rules][at-rules] to allow that may have associated blocks
containing CSS properties. At-rules like `font-face` and `page` fall into this
category. Names should be specified in lowercase.
##### :css => :at_rules_with_styles (Array or Set)
Names of CSS [at-rules][at-rules] to allow that may have associated blocks
containing style rules. At-rules like `media` and `keyframes` fall into this
category. Names should be specified in lowercase.
##### :css => :import_url_validator
This is a `Proc` (or other callable object) that will be called and passed
the URL specified for any `@import` [at-rules][at-rules].
You can use this to limit what can be imported, for example something
like the following to limit `@import` to Google Fonts URLs:
```ruby
Proc.new { |url| url.start_with?("https://fonts.googleapis.com") }
```
##### :css => :properties (Array or Set)
List of CSS property names to allow. Names should be specified in lowercase.
##### :css => :protocols (Array or Set)
URL protocols to allow in CSS URLs. Should be specified in lowercase.
If you'd like to allow the use of relative URLs which don't have a protocol,
include the symbol `:relative` in the protocol array.
#### :elements (Array or Set)
Array of HTML element names to allow. Specify all names in lowercase. Any
elements not in this array will be removed.
```ruby
:elements => %w[
a abbr b blockquote br cite code dd dfn dl dt em i kbd li mark ol p pre
q s samp small strike strong sub sup time u ul var
]
```
**Warning:** Sanitize cannot fully sanitize the contents of `