Sanitize is a powerful tool that helps keep your web applications safe by filtering out unwanted HTML and CSS while allowing you to specify what’s acceptable. Think of it as a security guard at a concert, checking IDs while allowing only authorized personnel backstage.

Installation

Let’s start with the installation process to get Sanitize up and running in your Ruby environment. Use the following command to install it:

gem install sanitize

Quick Start

To quickly clean up HTML or CSS, you can use the Relaxed configuration. Here’s how you can use it:

require 'sanitize'
Sanitize.fragment(html, Sanitize::Config::RELAXED)
Sanitize.document(html, Sanitize::Config::RELAXED)
Sanitize::CSS.stylesheet(css, Sanitize::Config::RELAXED)
Sanitize::CSS.properties(css, Sanitize::Config::RELAXED)

In the code above, think of the various config options as different types of cleaning products: some are gentle on surfaces (like the Relaxed config), while others might be more intensive.

Types of Inputs You Can Sanitize

• HTML fragments
• HTML documents
• CSS stylesheets within HTML
• Standalone CSS stylesheets

Understanding HTML Fragments

A fragment is essentially a snippet of HTML without a root-level element. If you call Sanitize without any parameters, it defaults to the strictest settings, stripping all HTML.

html = 'foo'
Sanitize.fragment(html)
# Output:  foo

To keep certain elements, you can customize the allowed elements within an allowlist:

Sanitize.fragment(html, elements: ['b'])
# Output: foo

Sanitizing CSS

Sanitize can also clean up CSS inside HTML fragments, but you need to allowlist specific elements and CSS properties. This is akin to letting only certain musicians perform at your concert.

html = '
hello!
'
Sanitize.fragment(html, elements: ['div', 'style'], attributes: {'div' => ['style']}, css: {properties: ['width']})
# Output: 
hello!

Sanitize.fragment(html,  elements: ['a', 'span'], attributes: {'a' => ['href', 'title'], 'span' => ['class']})