Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

sanitize-html

apostrophecms8.8mMIT2.14.0TypeScript support: definitely-typed

Clean up user-submitted HTML, preserving allowlisted elements and allowlisted attributes on a per-element basis

html, parser, sanitizer, sanitize

readme

sanitize-html

sanitize-html provides a simple HTML sanitizer with a clear API.

sanitize-html is tolerant. It is well suited for cleaning up HTML fragments such as those created by CKEditor and other rich text editors. It is especially handy for removing unwanted CSS when copying and pasting from Word.

sanitize-html allows you to specify the tags you want to permit, and the permitted attributes for each of those tags. If an attribute is a known non-boolean value, and it is empty, it will be removed. For example checked can be empty, but href cannot.

If a tag is not permitted, the contents of the tag are not discarded. There are some exceptions to this, discussed below in the "Discarding the entire contents of a disallowed tag" section.

The syntax of poorly closed p and img elements is cleaned up.

href attributes are validated to ensure they only contain http, https, ftp and mailto URLs. Relative URLs are also allowed. Ditto for src attributes.

Allowing particular urls as a src to an iframe tag by filtering hostnames is also supported.

HTML comments are not preserved. Additionally, sanitize-html escapes ALL text content - this means that ampersands, greater-than, and less-than signs are converted to their equivalent HTML character references (& --> &amp;, < --> &lt;, and so on). Additionally, in attribute values, quotation marks are escaped as well (" --> &quot;).

Requirements

sanitize-html is intended for use with Node.js and supports Node 10+. All of its npm dependencies are pure JavaScript. sanitize-html is built on the excellent htmlparser2 module.

Regarding TypeScript

sanitize-html is not written in TypeScript and there is no plan to directly support it. There is a community supported typing definition, @types/sanitize-html, however.

npm install -D @types/sanitize-html

If esModuleInterop=true is not set in your tsconfig.json file, you have to import it with:

import * as sanitizeHtml from 'sanitize-html';

When using TypeScript, there is a minimum supported version of >=4.5 because of a dependency on the htmlparser2 types.

Any questions or problems while using @types/sanitize-html should be directed to its maintainers as directed by that project's contribution guidelines.

How to use

Browser

Think first: why do you want to use it in the browser? Remember, servers must never trust browsers. You can't sanitize HTML for saving on the server anywhere else but on the server.

But, perhaps you'd like to display sanitized HTML immediately in the browser for preview. Or ask the browser to do the sanitization work on every page load. You can if you want to!

  • Install the package:
npm install sanitize-html

or

yarn add sanitize-html

The primary change in the 2.x version of sanitize-html is that it no longer includes a build that is ready for browser use. Developers are expected to include sanitize-html in their project builds (e.g., webpack) as they would any other dependency. So while sanitize-html is no longer ready to link to directly in HTML, developers can now more easily process it according to their needs.

Once built and linked in the browser with other project Javascript, it can be used to sanitize HTML strings in front end code:

import sanitizeHtml from 'sanitize-html';

const html = "<strong>hello world</strong>";
console.log(sanitizeHtml(html));
console.log(sanitizeHtml("<img src=x onerror=alert('img') />"));
console.log(sanitizeHtml("console.log('hello world')"));
console.log(sanitizeHtml("<script>alert('hello world')</script>"));

Install module from console:

npm install sanitize-html

Import the module:

// In ES modules
import sanitizeHtml from 'sanitize-html';

// Or in CommonJS
const sanitizeHtml = require('sanitize-html');

Use it in your JavaScript app:

const dirty = 'some really tacky HTML';
const clean = sanitizeHtml(dirty);

That will allow our default list of allowed tags and attributes through. It's a nice set, but probably not quite what you want. So:

// Allow only a super restricted set of tags and attributes
const clean = sanitizeHtml(dirty, {
  allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
  allowedAttributes: {
    'a': [ 'href' ]
  },
  allowedIframeHostnames: ['www.youtube.com']
});

Boom!

Default options

allowedTags: [
  "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
  "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
  "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
  "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
  "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
  "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
  "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr"
],
nonBooleanAttributes: [
  'abbr', 'accept', 'accept-charset', 'accesskey', 'action',
  'allow', 'alt', 'as', 'autocapitalize', 'autocomplete',
  'blocking', 'charset', 'cite', 'class', 'color', 'cols',
  'colspan', 'content', 'contenteditable', 'coords', 'crossorigin',
  'data', 'datetime', 'decoding', 'dir', 'dirname', 'download',
  'draggable', 'enctype', 'enterkeyhint', 'fetchpriority', 'for',
  'form', 'formaction', 'formenctype', 'formmethod', 'formtarget',
  'headers', 'height', 'hidden', 'high', 'href', 'hreflang',
  'http-equiv', 'id', 'imagesizes', 'imagesrcset', 'inputmode',
  'integrity', 'is', 'itemid', 'itemprop', 'itemref', 'itemtype',
  'kind', 'label', 'lang', 'list', 'loading', 'low', 'max',
  'maxlength', 'media', 'method', 'min', 'minlength', 'name',
  'nonce', 'optimum', 'pattern', 'ping', 'placeholder', 'popover',
  'popovertarget', 'popovertargetaction', 'poster', 'preload',
  'referrerpolicy', 'rel', 'rows', 'rowspan', 'sandbox', 'scope',
  'shape', 'size', 'sizes', 'slot', 'span', 'spellcheck', 'src',
  'srcdoc', 'srclang', 'srcset', 'start', 'step', 'style',
  'tabindex', 'target', 'title', 'translate', 'type', 'usemap',
  'value', 'width', 'wrap',
  // Event handlers
  'onauxclick', 'onafterprint', 'onbeforematch', 'onbeforeprint',
  'onbeforeunload', 'onbeforetoggle', 'onblur', 'oncancel',
  'oncanplay', 'oncanplaythrough', 'onchange', 'onclick', 'onclose',
  'oncontextlost', 'oncontextmenu', 'oncontextrestored', 'oncopy',
  'oncuechange', 'oncut', 'ondblclick', 'ondrag', 'ondragend',
  'ondragenter', 'ondragleave', 'ondragover', 'ondragstart',
  'ondrop', 'ondurationchange', 'onemptied', 'onended',
  'onerror', 'onfocus', 'onformdata', 'onhashchange', 'oninput',
  'oninvalid', 'onkeydown', 'onkeypress', 'onkeyup',
  'onlanguagechange', 'onload', 'onloadeddata', 'onloadedmetadata',
  'onloadstart', 'onmessage', 'onmessageerror', 'onmousedown',
  'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout',
  'onmouseover', 'onmouseup', 'onoffline', 'ononline', 'onpagehide',
  'onpageshow', 'onpaste', 'onpause', 'onplay', 'onplaying',
  'onpopstate', 'onprogress', 'onratechange', 'onreset', 'onresize',
  'onrejectionhandled', 'onscroll', 'onscrollend',
  'onsecuritypolicyviolation', 'onseeked', 'onseeking', 'onselect',
  'onslotchange', 'onstalled', 'onstorage', 'onsubmit', 'onsuspend',
  'ontimeupdate', 'ontoggle', 'onunhandledrejection', 'onunload',
  'onvolumechange', 'onwaiting', 'onwheel'
],
disallowedTagsMode: 'discard',
allowedAttributes: {
  a: [ 'href', 'name', 'target' ],
  // We don't currently allow img itself by default, but
  // these attributes would make sense if we did.
  img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
},
// Lots of these won't come up by default because we don't allow them
selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],
// URL schemes we permit
allowedSchemes: [ 'http', 'https', 'ftp', 'mailto', 'tel' ],
allowedSchemesByTag: {},
allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
allowProtocolRelative: true,
enforceHtmlBoundary: false,
parseStyleAttributes: true

Common use cases

"I like your set but I want to add one more tag. Is there a convenient way?"

Sure:

const clean = sanitizeHtml(dirty, {
  allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ])
});

If you do not specify allowedTags or allowedAttributes, our default list is applied. So if you really want an empty list, specify one.

"What if I want to allow all tags or all attributes?"

Simple! Instead of leaving allowedTags or allowedAttributes out of the options, set either one or both to false:

allowedTags: false,
allowedAttributes: false

"What if I want to allow empty attributes, even for cases like href that normally don't make sense?"

Very simple! Set nonBooleanAttributes to [].

nonBooleanAttributes: []

"What if I want to remove all empty attributes, including valid ones?"

Also very simple! Set nonBooleanAttributes to ['*'].

Note: This will break common valid cases like checked and selected, so this is unlikely to be what you want. For most ordinary HTML use, it is best to avoid making this change.

nonBooleanAttributes: ['*']

"What if I don't want to allow any tags?"

Also simple! Set allowedTags to [] and allowedAttributes to {}.

allowedTags: [],
allowedAttributes: {}

"What if I want disallowed tags to be escaped rather than discarded?"

If you set disallowedTagsMode to discard (the default), disallowed tags are discarded. Any text content or subtags are still included, depending on whether the individual subtags are allowed.

If you set disallowedTagsMode to completelyDiscard, disallowed tags and any content they contain are discarded. Any subtags are still included, as long as those individual subtags are allowed.

If you set disallowedTagsMode to escape, the disallowed tags are escaped rather than discarded. Any text or subtags are handled normally.

If you set disallowedTagsMode to recursiveEscape, the disallowed tags are escaped rather than discarded, and the same treatment is applied to all subtags, whether otherwise allowed or not.

"What if I want to allow only specific values on some attributes?"

When configuring the attribute in allowedAttributes simply use an object with attribute name and an allowed values array. In the following example sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-scripts" would become sandbox="allow-popups allow-scripts":

allowedAttributes: {
  iframe: [
    {
      name: 'sandbox',
      multiple: true,
      values: ['allow-popups', 'allow-same-origin', 'allow-scripts']
    }
  ]
}

With multiple: true, several allowed values may appear in the same attribute, separated by spaces. Otherwise the attribute must exactly match one and only one of the allowed values.

"What if I want to maintain the original case for SVG elements and attributes?"

If you're incorporating SVG elements like linearGradient into your content and notice that they're not rendering as expected due to case sensitivity issues, it's essential to prevent sanitize-html from converting element and attribute names to lowercase. This situation often arises when SVGs fail to display correctly because their case-sensitive tags, such as linearGradient and attributes like viewBox, are inadvertently lowercased.

To address this, ensure you set lowerCaseTags: false and lowerCaseAttributeNames: false in the parser options of your sanitize-html configuration. This adjustment stops the library from altering the case of your tags and attributes, preserving the integrity of your SVG content.

allowedTags: [ 'svg', 'g', 'defs', 'linearGradient', 'stop', 'circle' ],
allowedAttributes: false,
parser: {
  lowerCaseTags: false,
  lowerCaseAttributeNames: false
}

Wildcards for attributes

You can use the * wildcard to allow all attributes with a certain prefix:

allowedAttributes: {
  a: [ 'href', 'data-*' ]
}

Also you can use the * as name for a tag, to allow listed attributes to be valid for any tag:

allowedAttributes: {
  '*': [ 'href', 'align', 'alt', 'center', 'bgcolor' ]
}

Additional options

Allowed CSS Classes

If you wish to allow specific CSS classes on a particular element, you can do so with the allowedClasses option. Any other CSS classes are discarded.

This implies that the class attribute is allowed on that element.

// Allow only a restricted set of CSS classes and only on the p tag
const clean = sanitizeHtml(dirty, {
  allowedTags: [ 'p', 'em', 'strong' ],
  allowedClasses: {
    'p': [ 'fancy', 'simple' ]
  }
});

Similar to allowedAttributes, you can use * to allow classes with a certain prefix, or use * as a tag name to allow listed classes to be valid for any tag:

allowedClasses: {
  'code': [ 'language-*', 'lang-*' ],
  '*': [ 'fancy', 'simple' ]
}

Furthermore, regular expressions are supported too:

allowedClasses: {
  p: [ /^regex\d{2}$/ ]
}

If allowedClasses for a certain tag is false, all the classes for this tag will be allowed.

Note: It is advised that your regular expressions always begin with ^ so that you are requiring a known prefix. A regular expression with neither ^ nor $ just requires that something appear in the middle.

Allowed CSS Styles

If you wish to allow specific CSS styles on a particular element, you can do that with the allowedStyles option. Simply declare your desired attributes as regular expression options within an array for the given attribute. Specific elements will inherit allowlisted attributes from the global (*) attribute. Any other CSS classes are discarded.

You must also use allowedAttributes to activate the style attribute for the relevant elements. Otherwise this feature will never come into play.

When constructing regular expressions, don't forget ^ and $. It's not enough to say "the string should contain this." It must also say "and only this."

URLs in inline styles are NOT filtered by any mechanism other than your regular expression.

const clean = sanitizeHtml(dirty, {
        allowedTags: ['p'],
        allowedAttributes: {
          'p': ["style"],
        },
        allowedStyles: {
          '*': {
            // Match HEX and RGB
            'color': [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/],
            'text-align': [/^left$/, /^right$/, /^center$/],
            // Match any number with px, em, or %
            'font-size': [/^\d+(?:px|em|%)$/]
          },
          'p': {
            'font-size': [/^\d+rem$/]
          }
        }
      });

Discarding text outside of <html></html> tags

Some text editing applications generate HTML to allow copying over to a web application. These can sometimes include undesirable control characters after terminating html tag. By default sanitize-html will not discard these characters, instead returning them in sanitized string. This behaviour can be modified using enforceHtmlBoundary option.

Setting this option to true will instruct sanitize-html to discard all characters outside of html tag boundaries -- before <html> and after </html> tags.

enforceHtmlBoundary: true

htmlparser2 Options

sanitize-html is built on htmlparser2. By default the only option passed down is decodeEntities: true. You can set the options to pass by using the parser option.

Security note: changing the parser settings can be risky. In particular, decodeEntities: false has known security concerns and a complete test suite does not exist for every possible combination of settings when used with sanitize-html. If security is your goal we recommend you use the defaults rather than changing parser, except for the lowerCaseTags option.

const clean = sanitizeHtml(dirty, {
  allowedTags: ['a'],
  parser: {
    lowerCaseTags: true
  }
});

See the htmlparser2 wiki for the full list of possible options.

Transformations

What if you want to add or change an attribute? What if you want to transform one tag to another? No problem, it's simple!

The easiest way (will change all ol tags to ul tags):

const clean = sanitizeHtml(dirty, {
  transformTags: {
    'ol': 'ul',
  }
});

The most advanced usage:

const clean = sanitizeHtml(dirty, {
  transformTags: {
    'ol': function(tagName, attribs) {
      // My own custom magic goes here
      return {
        tagName: 'ul',
        attribs: {
          class: 'foo'
        }
      };
    }
  }
});

You can specify the * wildcard instead of a tag name to transform all tags.

There is also a helper method which should be enough for simple cases in which you want to change the tag and/or add some attributes:

const clean = sanitizeHtml(dirty, {
  transformTags: {
    'ol': sanitizeHtml.simpleTransform('ul', {class: 'foo'}),
  }
});

The simpleTransform helper method has 3 parameters:

simpleTransform(newTag, newAttributes, shouldMerge)

The last parameter (shouldMerge) is set to true by default. When true, simpleTransform will merge the current attributes with the new ones (newAttributes). When false, all existing attributes are discarded.

You can also add or modify the text contents of a tag:

const clean = sanitizeHtml(dirty, {
  transformTags: {
    'a': function(tagName, attribs) {
      return {
        tagName: 'a',
        text: 'Some text'
      };
    }
  }
});

For example, you could transform a link element with missing anchor text:

<a href="http://somelink.com"></a>

To a link with anchor text:

<a href="http://somelink.com">Some text</a>

Filters

You can provide a filter function to remove unwanted tags. Let's suppose we need to remove empty a tags like:

<a href="page.html"></a>

We can do that with the following filter:

sanitizeHtml(
  '<p>This is <a href="http://www.linux.org"></a><br/>Linux</p>',
  {
    exclusiveFilter: function(frame) {
      return frame.tag === 'a' && !frame.text.trim();
    }
  }
);

The frame object supplied to the callback provides the following attributes:

  • tag: The tag name, i.e. 'img'.
  • attribs: The tag's attributes, i.e. { src: "/path/to/tux.png" }.
  • text: The text content of the tag.
  • mediaChildren: Immediate child tags that are likely to represent self-contained media (e.g., img, video, picture, iframe). See the mediaTags variable in src/index.js for the full list.
  • tagPosition: The index of the tag's position in the result string.

You can also process all text content with a provided filter function. Let's say we want an ellipsis instead of three dots.

<p>some text...</p>

We can do that with the following filter:

sanitizeHtml(
  '<p>some text...</p>',
  {
    textFilter: function(text, tagName) {
      if (['a'].indexOf(tagName) > -1) return //Skip anchor tags

      return text.replace(/\.\.\./, '&hellip;');
    }
  }
);

Note that the text passed to the textFilter method is already escaped for safe display as HTML. You may add markup and use entity escape sequences in your textFilter.

Iframe Filters

If you would like to allow iframe tags but want to control the domains that are allowed through, you can provide an array of hostnames and/or array of domains that you would like to allow as iframe sources. This hostname is a property in the options object passed as an argument to the sanitize-html function.

These arrays will be checked against the html that is passed to the function and return only src urls that include the allowed hostnames or domains in the object. The url in the html that is passed must be formatted correctly (valid hostname) as an embedded iframe otherwise the module will strip out the src from the iframe.

Make sure to pass a valid hostname along with the domain you wish to allow, i.e.:

allowedIframeHostnames: ['www.youtube.com', 'player.vimeo.com'],
allowedIframeDomains: ['zoom.us']

You may also specify whether or not to allow relative URLs as iframe sources.

allowIframeRelativeUrls: true

Note that if unspecified, relative URLs will be allowed by default if no hostname or domain filter is provided but removed by default if a hostname or domain filter is provided.

Remember that the iframe tag must be allowed as well as the src attribute.

For example:

const clean = sanitizeHtml('<p><iframe src="https://www.youtube.com/embed/nykIhs12345"></iframe><p>', {
  allowedTags: [ 'p', 'em', 'strong', 'iframe' ],
  allowedClasses: {
    'p': [ 'fancy', 'simple' ],
  },
  allowedAttributes: {
    'iframe': ['src']
  },
  allowedIframeHostnames: ['www.youtube.com', 'player.vimeo.com']
});

will pass through as safe whereas:

const clean = sanitizeHtml('<p><iframe src="https://www.youtube.net/embed/nykIhs12345"></iframe><p>', {
  allowedTags: [ 'p', 'em', 'strong', 'iframe' ],
  allowedClasses: {
    'p': [ 'fancy', 'simple' ],
  },
  allowedAttributes: {
    'iframe': ['src']
  },
  allowedIframeHostnames: ['www.youtube.com', 'player.vimeo.com']
});

or

const clean = sanitizeHtml('<p><iframe src="https://www.vimeo/video/12345"></iframe><p>', {
  allowedTags: [ 'p', 'em', 'strong', 'iframe' ],
  allowedClasses: {
    'p': [ 'fancy', 'simple' ],
  },
  allowedAttributes: {
    'iframe': ['src']
  },
  allowedIframeHostnames: ['www.youtube.com', 'player.vimeo.com']
});

will return an empty iframe tag.

If you want to allow any subdomain of any level you can provide the domain in allowedIframeDomains

// This iframe markup will pass through as safe.
const clean = sanitizeHtml('<p><iframe src="https://us02web.zoom.us/embed/12345"></iframe><p>', {
  allowedTags: [ 'p', 'em', 'strong', 'iframe' ],
  allowedClasses: {
    'p': [ 'fancy', 'simple' ],
  },
  allowedAttributes: {
    'iframe': ['src']
  },
  allowedIframeHostnames: ['www.youtube.com', 'player.vimeo.com'],
  allowedIframeDomains: ['zoom.us']
});

Script Filters

Similarly to iframes you can allow a script tag on a list of allowlisted domains

const clean = sanitizeHtml('<script src="https://www.safe.authorized.com/lib.js"></script>', {
    allowedTags: ['script'],
    allowedAttributes: {
        script: ['src']
    },
    allowedScriptDomains: ['authorized.com'],
})

You can allow a script tag on a list of allowlisted hostnames too

const clean = sanitizeHtml('<script src="https://www.authorized.com/lib.js"></script>', {
    allowedTags: ['script'],
    allowedAttributes: {
        script: ['src']
    },
    allowedScriptHostnames: [ 'www.authorized.com' ],
})

Allowed URL schemes

By default, we allow the following URL schemes in cases where href, src, etc. are allowed:

[ 'http', 'https', 'ftp', 'mailto' ]

You can override this if you want to:

sanitizeHtml(
  // teeny-tiny valid transparent GIF in a data URL
  '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />',
  {
    allowedTags: [ 'img', 'p' ],
    allowedSchemes: [ 'data', 'http' ]
  }
);

You can also allow a scheme for a particular tag only:

allowedSchemes: [ 'http', 'https' ],
allowedSchemesByTag: {
  img: [ 'data' ]
}

And you can forbid the use of protocol-relative URLs (starting with //) to access another site using the current protocol, which is allowed by default:

allowProtocolRelative: false

Discarding the entire contents of a disallowed tag

Normally, with a few exceptions, if a tag is not allowed, all of the text within it is preserved, and so are any allowed tags within it.

The exceptions are:

style, script, textarea, option

If you wish to replace this list, for instance to discard whatever is found inside a noscript tag, use the nonTextTags option:

nonTextTags: [ 'style', 'script', 'textarea', 'option', 'noscript' ]

Note that if you use this option you are responsible for stating the entire list. This gives you the power to retain the content of textarea, if you want to.

The content still gets escaped properly, with the exception of the script and style tags. Allowing either script or style leaves you open to XSS attacks. Don't do that unless you have good reason to trust their origin. sanitize-html will log a warning if these tags are allowed, which can be disabled with the allowVulnerableTags: true option.

Choose what to do with disallowed tags

Instead of discarding, or keeping text only, you may enable escaping of the entire content:

disallowedTagsMode: 'escape'

This will transform <disallowed>content</disallowed> to &lt;disallowed&gt;content&lt;/disallowed&gt;

Valid values are: 'discard' (default), 'completelyDiscard' (remove disallowed tag's content), 'escape' (escape the tag) and 'recursiveEscape' (to escape the tag and all its content).

Discard disallowed but but the inner content of disallowed tags is kept.

If you set disallowedTagsMode to discard, disallowed tags are discarded but but the inner content of disallowed tags is kept.

disallowedTagsMode: 'discard'

This will transform <disallowed>content</disallowed> to content

Discard entire content of a disallowed tag

If you set disallowedTagsMode to completelyDiscard, disallowed tags and any content they contain are discarded. Any subtags are still included, as long as those individual subtags are allowed.

disallowedTagsMode: 'completelyDiscard'

This will transform <disallowed>content <allowed>content</allowed> </disallowed> to <allowed>content</allowed>

Escape the disallowed tag and all its children even for allowed tags.

if you set disallowedTagsMode to recursiveEscape, disallowed tag and its children will be escaped even for allowed tags

disallowedTagsMode: `recursiveEscape`

This will transform <disallowed>hello<p>world</p></disallowed> to &lt;disallowed&gt;hello&lt;p&gt;world&lt;/p&gt;&lt;/disallowed&gt;

Ignore style attribute contents

Instead of discarding faulty style attributes, you can allow them by disabling the parsing of style attributes:

parseStyleAttributes: false

This will transform <div style="invalid-prop: non-existing-value">content</div> to <div style="invalid-prop: non-existing-value">content</div> instead of stripping it: <div>content</div>

By default the parseStyleAttributes option is true.

When you disable parsing of the style attribute (parseStyleAttributes: false) and you pass in options for the allowedStyles property, an error will be thrown. This combination is not permitted.

we recommend sanitizing content server-side in a Node.js environment, as you cannot trust a browser to sanitize things anyway. Consider what a malicious user could do via the network panel, the browser console, or just by writing scripts that submit content similar to what your JavaScript submits. But if you really need to run it on the client in the browser, you may find you need to disable parseStyleAttributes. This is subject to change as it is an upstream issue with postcss, not sanitize-html itself.

Restricting deep nesting

You can limit the depth of HTML tags in the document with the nestingLimit option:

nestingLimit: 6

This will prevent the user from nesting tags more than 6 levels deep. Tags deeper than that are stripped out exactly as if they were disallowed. Note that this means text is preserved in the usual ways where appropriate.

About ApostropheCMS

sanitize-html was created at P'unk Avenue for use in ApostropheCMS, an open-source content management system built on Node.js. If you like sanitize-html you should definitely check out ApostropheCMS.

Support

Feel free to open issues on github.

changelog

Changelog

2.14.0 (2024-12-18)

  • Fix adding text with transformTags in cases where it originally had no text child elements. Thanks to f0x.

2.13.1 (2024-10-03)

  • Fix to allow regex in allowedClasses wildcard whitelist. Thanks to anak-dev.

2.13.0 (2024-03-20)

  • Documentation update regarding minimum supported TypeScript version.

  • Added disallowedTagsMode: completelyDiscard option to remove the content also in HTML. Thanks to Gauav Kumar for this addition.

2.12.1 (2024-02-22)

  • Do not parse sourcemaps in post-css. This fixes a vulnerability in which information about the existence or non-existence of files on a server could be disclosed via properly crafted HTML input when the style attribute is allowed by the configuration. Thanks to the Snyk Security team for the disclosure and to Dylan Armstrong for the fix.

2.12.0 (2024-02-21)

  • Introduced the allowedEmptyAttributes option, enabling explicit specification of empty string values for select attributes, with the default attribute set to alt. Thanks to Na for the contribution.

  • Clarified the use of SVGs with a new test and changes to documentation. Thanks to Gauav Kumar for the contribution.

  • Do not process source maps when processing style tags with PostCSS.

2.11.0 (2023-06-21)

  • Fix to allow false in allowedClasses attributes. Thanks to Kevin Jiang for this fix!
  • Upgrade mocha version
  • Apply small linter fixes in tests
  • Add .idea temp files to .gitignore
  • Thanks to Vitalii Shpital for the updates!
  • Show parseStyleAttributes warning in browser only. Thanks to mog422 for this update!
  • Remove empty non-boolean attributes via an exhaustive, configurable list of known non-boolean attributes. Thanks to Dylan Armstrong for this update!

2.10.0 (2023-02-17)

  • Fix auto-adding escaped closing tags. In other words, do not add implied closing tags to disallowed tags when disallowedTagMode is set to any variant of escape -- just escape the disallowed tags that are present. This fixes issue #464. Thanks to Daniel Liebner
  • Add tagAllowed() helper function which takes a tag name and checks it against options.allowedTags and returns true if the tag is allowed and false if it is not.

2.9.0 (2023-01-27)

2.8.1 (2022-12-21)

  • If the argument is a number, convert it to a string, for backwards compatibility. Thanks to Alexander Schranz.

2.8.0 (2022-12-12)

  • Upgrades htmlparser2 to new major version ^8.0.0. Thanks to Kedar Chandrayan for this contribution.

2.7.3 (2022-10-24)

  • If allowedTags is falsy but not exactly false, then do not assume that all tags are allowed. Rather, allow no tags in this case, to be on the safe side. This matches the existing documentation and fixes issue #176. Thanks to Kedar Chandrayan for the fix.

2.7.2 (2022-09-15)

  • Closing tags must agree with opening tags. This fixes issue #549, in which closing tags not associated with any permitted opening tag could be passed through. No known exploit exists, but it's better not to permit this. Thanks to Kedar Chandrayan for the report and the fix.

2.7.1 (2022-07-20)

  • Protocol-relative URLs are properly supported for script tags. Thanks to paweljq.
  • A denial-of-service vulnerability has been fixed by replacing global regular expression replacement logic for comment removal with a new implementation. Thanks to Nariyoshi Chida of NTT Security Japan for pointing out the issue.

2.7.0 (2022-02-04)

  • Allows a more sensible set of default attributes on <img /> tags. Thanks to Zade Viggers.

2.6.1 (2021-12-08)

  • Fixes style filtering to retain !important when used.
  • Fixed trailing text bug on transformTags options that was reported on issue #506. Thanks to Alex Rantos.

2.6.0 (2021-11-23)

  • Support for regular expressions in the allowedClasses option. Thanks to Alex Rantos.

2.5.3 (2021-11-02):

  • Fixed bug introduced by klona 2.0.5, by removing klona entirely.

2.5.2 (2021-10-13):

  • Nullish HTML input now returns an empty string. Nullish value may be explicit null, undefined or implicit undefined when value is not provided. Thanks to Artem Kostiuk for the contribution.
  • Documented that all text content is escaped. Thanks to Siddharth Singh.

2.5.1 (2021-09-14):

  • The allowedScriptHostnames and allowedScriptDomains options now implicitly purge the inline content of all script tags, not just those with src attributes. This behavior was already strongly implied by the fact that they purged it in the case where a src attribute was actually present, and is necessary for the feature to provide any real security. Thanks to Grigorii Duca for pointing out the issue.

2.5.0 (2021-09-08):

  • New allowedScriptHostnames option, it enables you to specify which hostnames are allowed in a script tag.
  • New allowedScriptDomains option, it enables you to specify which domains are allowed in a script tag. Thank you to Yorick Girard for this and the allowedScriptHostnames contribution.
  • Updates whitelist to allowlist.

2.4.0 (2021-05-19):

  • Added support for class names with wildcards in allowedClasses. Thanks to zhangbenber for the contribution.

2.3.3 (2021-03-19):

  • Security fix: allowedSchemes and related options did not properly block schemes containing a hyphen, plus sign, period or digit, such as ms-calculator:. Thanks to Lukas Euler for pointing out the issue.
  • Added a security note about the known risks associated with using the parser option, especially decodeEntities: false. See the documentation.

2.3.2 (2021-01-26):

  • Additional fixes for iframe validation exploits. Prevent exploits based on browsers' tolerance of the use of "" rather than "/" and the presence of whitespace at this point in the URL. Thanks to Ron Masas of Checkmarx for pointing out the issue and writing unit tests.
  • Updates README yarn add syntax. Thanks to Tagir Khadshiev for the contribution.

2.3.1 (2021-01-22):

  • Uses the standard WHATWG URL parser to stop IDNA (Internationalized Domain Name) attacks on the iframe hostname validator. Thanks to Ron Masas of Checkmarx for pointing out the issue and suggesting the use of the WHATWG parser.

2.3.0 (2020-12-16):

  • Upgrades htmlparser2 to new major version ^6.0.0. Thanks to Bogdan Chadkin for the contribution.

2.2.0 (2020-12-02):

  • Adds a note to the README about Typescript support (or the lack-thereof).
  • Adds tel to the default allowedSchemes. Thanks to Arne Herbots for this contribution.

2.1.2 (2020-11-04):

  • Fixes typos and inconsistencies in the README. Thanks to Eric Lefevre-Ardant for this contribution.

2.1.1 (2020-10-21):

  • Fixes a bug when using allowedClasses with an '*' wildcard selector. Thanks to Clemens Damke for this contribution.
  • Updates mocha to 7.x to resolve security warnings.

2.1.0 (2020-10-07):

  • sup added to the default allowed tags list. Thanks to Julian Lam for the contribution.
  • Updates default allowedTags README documentation. Thanks to Marco Arduini for the contribution.

2.0.0 (2020-09-23):

  • nestingLimit option added.
  • Updates ESLint config package and fixes warnings.
  • Upgrade is-plain-object package with named export. Thanks to Bogdan Chadkin for the contribution.
  • Upgrade postcss package and drop Node 11 and Node 13 support (enforced by postcss).

Backwards compatibility breaks:

  • There is no build. You should no longer directly link to a sanitize-html file directly in the browser as it is using modern Javascript that is not fully supported by all major browsers (depending on your definition). You should now include sanitize-html in your project build for this purpose if you have one.
  • On the server side, Node.js 10 or higher is required.
  • The default allowedTags array was updated significantly. This mostly added HTML tags to be more comprehensive by default. You should review your projects and consider the allowedTags defaults if you are not already overriding them.

2.0.0-rc.2 (2020-09-09):

  • Always use existing has function rather than duplicating it.

2.0.0-rc.1 (2020-08-26):

  • Upgrade klona package. Thanks to Bogdan Chadkin for the contribution.

2.0.0-beta.2:

  • Add files to package.json to prevent publishing unnecessary files to npm #392. Thanks to styfle for the contribution.
  • Removes iframe and nl from default allowed tags. Adds most innocuous tags to the default allowedTags array.
  • Fixes a bug when using transformTags with out textFilter. Thanks to Andrzej Porebski for the help with a failing test.

2.0.0-beta:

  • Moves the index.js file to the project root and removes all build steps within the package. Going forward, it is up to the developer to include sanitize-html in their project builds as-needed. This removes major points of conflict with project code and frees this module to not worry about myriad build-related questions.
  • Replaces lodash with utility packages: klona, is-plain-object, deepmerge, escape-string-regexp.
  • Makes custom tag transformations less error-prone by escaping frame innerText. Thanks to Mike Samuel for the contribution. Prior to this patch, tag transformations which turned an attribute value into a text node could be vulnerable to code execution.
  • Updates code to use modern features including const/let variable assignment.
  • ESLint clean up.
  • Updates is-plain-object to the 4.x major version.
  • Updates srcset to the 3.x major version.

Thanks to Bogdan Chadkin for contributions to this major version update.

1.27.5 (2020-09-23):

  • Updates README to include ES modules syntax.

1.27.4 (2020-08-26):

  • Fixes an IE11 regression from using Array.prototype.includes, replacing it with Array.prototype.indexOf.

1.27.3 (2020-08-12):

  • Fixes a bug when using transformTags with out textFilter. Thanks to Andrzej Porebski for the help with a failing test.

1.27.2 (2020-07-29):

  • Fixes CHANGELOG links. Thanks to Alex Mayer for the contribution.
  • Replaces srcset with parse-srcset. Thanks to Massimiliano Mirra for the contribution.

1.27.1 (2020-07-15):

  • Removes the unused chalk dependency.
  • Adds configuration for a Github stale bot.
  • Replace xtend package with native Object.assign.

1.27.0:

  • Adds the allowedIframeDomains option. This works similar to allowedIframeHostnames, where you would set it to an array of web domains. It would then permit any hostname on those domains to be used in iframe src attributes. Thanks to Stanislav Kravchenko for the contribution.

1.26.0:

  • Adds the option element to the default nonTextTagsArray of tags with contents that aren't meant to be displayed visually as text. This can be overridden with the nonTextTags option.

1.25.0:

  • Adds enforceHtmlBoundary option to process code bounded by the html tag, discarding any code outside of those tags.
  • Migrates to the main lodash package from the per method packages since they are deprecated and cause code duplication. Thanks to Merceyz for the contribution.
  • Adds a warning when style and script tags are allowed, as they are inherently vulnerable to being used in XSS attacks. That warning can be disabled by including the option allowVulnerableTags: true so this choice is knowing and explicit.

1.24.0:

  • Fixes a bug where self-closing tags resulted in deletion with disallowedTagsMode: 'escape' set. Thanks to Thiago Negri for the contribution.
  • Adds abbr to the default allowedTags for better accessibility support. Thanks to Will Farrell for the contribution.
  • Adds a mediaChildren property to the frame object in custom filters. This allows you to check for links or other parent tags that contain self-contained media to prevent collapse, regardless of whether there is also text inside. Thanks to axdg for the initial implementation and Marco Arduini for a failing test contribution.

1.23.0:

  • Adds eslint configuration and adds eslint to test script.
  • Sets sideEffects: false on package.json to allow module bundlers like webpack tree-shake this module and all the dependencies from client build. Thanks to Egor Voronov for the contribution.
  • Adds the tagName (HTML element name) as a second parameter passed to textFilter. Thanks to Slava for the contribution.

1.22.1:

ncreases the patch version of lodash.mergewith to enforce an audit fix.

1.22.0:

bumped htmlparser2 dependency to the 4.x series. This fixes longstanding bugs and should cause no bc breaks for this module, since the only bc breaks upstream are in regard to features we don't expose in this module.

1.21.1:

fixed issue with bad main setting in package.json that broke 1.21.0.

1.21.0:

new disallowedTagsMode option can be set to escape to escape disallowed tags rather than discarding them. Any subtags are handled as usual. If you want to recursively escape them too, you can set disallowedTagsMode to recursiveEscape. Thanks to Yehonatan Zecharia for this contribution.

1.20.1:

Fix failing tests, add CircleCI config

1.20.0:

reduced size of npm package via the files key; we only need to publish what's in dist. Thanks to Steven. There should be zero impact on behavior, minor version bump is precautionary.

1.19.3:

reverted to postcss due to a reported issue with css-tree that might or might not have XSS implications.

1.19.2:

  • Switched out the heavy postcss dependency for the lightweight css-tree module. No API changes. Thanks to Justin Braithwaite.
  • Various doc updates. Thanks to Pulkit Aggarwal and Cody Robertson.

1.19.1:

  • " characters are now entity-escaped only when they appear in attribute values, reducing the verbosity of the resulting markup.

  • Fixed a regression introduced in version 1.18.5 in the handling of markup that looks similar to a valid entity, but isn't. The bogus entity was passed through intact, i.e. &0; did not become &amp;0; as it should have. This fix has been made for the default parser settings only. There is no fix yet for those who wish to enable decodeEntities: false. That will require improving the alternative encoder in the escapeHtml function to only pass 100% valid entities.

For those using the default parser settings this bug is fixed. Read on if you are using alternative parser settings.

When decodeEntities: true is in effect (the default), this is not a problem because we only have to encode & < > " and we always encode those things.

There is currently a commented-out test which verifies one example of the problem when decodeEntities is false. However a correct implementation would need to not only pass that simple example but correctly escape all invalid entities, and not escape those that are valid.

1.19.0:

  • New allowIframeRelativeUrls option. It defaults to true unless allowedIframeHostnames is present, in which case it defaults to false, for backwards compatibility with existing behavior in both cases; however you can now set the option explicitly to allow both certain hostnames and relative URLs. Thanks to Rick Martin.

1.18.5:

  • Stop double encoding ampersands on HTML entities. Thanks to Will Gibson.

1.18.4:

  • Removed incorrect browser key, restoring frontend build. Thanks to Felix Becker.

1.18.3:

  • iframe is an allowed tag by default, to better facilitate typical use cases and the use of the allowedIframeHostnames option.
  • Documentation improvements.
  • More browser packaging improvements.
  • Protocol-relative URLs are properly supported for iframe tags.

1.18.2:

  • Travis tests passing.
  • Fixed another case issue — and instituted Travis CI testing so this doesn't happen again. Sorry for the hassle.

1.18.1:

  • A file was required with incorrect case, breaking the library on case sensitive filesystems such as Linux. Fixed.

1.18.0:

  • The new allowedSchemesAppliedToAttributes option. This determines which attributes are validated as URLs, replacing the old hardcoded list of src and href only. The default list now includes cite. Thanks to ml-dublin for this contribution.
  • It is now easy to configure a specific list of allowed values for an attribute. When configuring allowedAttributes, rather than listing an attribute name, simply list an object with an attribute name property and an allowed values array property. You can also add multiple: true to allow multiple space-separated allowed values in the attribute, otherwise the attribute must match one and only one of the allowed values. Thanks again to ml-dublin for this contribution.
  • Fixed a bug in the npm test procedure.

1.17.0:

The new allowedIframeHostnames option. If present, this must be an array, and only iframe src URLs hostnames (complete hostnames; domain name matches are not enough) that appear on this list are allowed. You must also configure hostname as an allowed attribute for iframe. Thanks to Ryan Verys for this contribution.

1.16.3:

Don't throw away the browserified versions before publishing them. prepare is not a good place to make clean, it runs after prepublish.

1.16.2:

sanitize-html is now compiled with babel. An npm prepublish script takes care of this at npm publish time, so the latest code should always be compiled to operate all the way back to ES5 browsers and earlier versions of Node. Thanks to Ayushya Jaiswal.

Please note that running sanitize-html in the browser is usually a security hole. Are you trusting the browser? Anyone could bypass that using the network panel. Sanitization is almost always best done on servers and that is the primary use case for this module.

1.16.1:

changelog formatting only.

1.16.0:

support for sanitizing inline CSS styles, by specifying the allowed attributes and a regular expression for each. Thanks to Cameron Will and Michael Loschiavo.

1.15.0:

if configured as an allowed attribute (not the default), check for naughty URLs in srcset attributes. Thanks to Mike Samuel for the nudge to do this and to Sindre Sorhus for the srcset module.

1.14.3:

inadvertent removal of lodash regexp quote dependency in 1.14.2 has been corrected.

1.14.2:

protocol-relative URL detection must spot URLs starting with \\ rather than // due to ages-old tolerance features of web browsers, intended for sleepy Windows developers. Thanks to Martin Bajanik.

1.14.1:

documented allowProtocolRelative option. No code changes from 1.14.0, released a few moments ago.

1.14.0:

the new allowProtocolRelative option, which is set to true by default, allows you to decline to accept URLs that start with // and thus point to a different host using the current protocol. If you do not want to permit this, set this option to false. This is fully backwards compatible because the default behavior is to allow them. Thanks to Luke Bernard.

1.13.0:

transformTags can now add text to an element that initially had none. Thanks to Dushyant Singh.

1.12.0:

option to build for browser-side use. Thanks to Michael Blum.

1.11.4:

fixed crash when __proto__ is a tag name. Now using a safe check for the existence of properties in all cases. Thanks to Andrew Krasichkov.

Fixed XSS attack vector via textarea tags (when explicitly allowed). Decided that script (obviously) and style (due to its own XSS vectors) cannot realistically be afforded any XSS protection if allowed, unless we add a full CSS parser. Thanks again to Andrew Krasichkov.

1.11.3:

bumped htmlparser2 version to address crashing bug in older version. Thanks to e-jigsaw.

1.11.2:

fixed README typo that interfered with readability due to markdown issues. No code changes. Thanks to Mikael Korpela. Also improved code block highlighting in README. Thanks to Alex Siman.

1.11.1:

fixed a regression introduced in 1.11.0 which caused the closing tag of the parent of a textarea tag to be lost. Thanks to Stefano Sala, who contributed the missing test.

1.11.0:

added the nonTextTags option, with tests.

1.10.1:

documentation cleanup. No code changes. Thanks to Rex Schrader.

1.10.0:

allowedAttributes now allows you to allow attributes for all tags by specifying * as the tag name. Thanks to Zdravko Georgiev.

1.9.0:

parser option allows options to be passed directly to htmlparser. Thanks to Danny Scott.

1.8.0:

  • transformTags now accepts the * wildcard to transform all tags. Thanks to Jamy Timmermans.

  • Text that has been modified by transformTags is then passed through textFilter. Thanks to Pavlo Yurichuk.

  • Content inside textarea is discarded if textarea is not allowed. I don't know why it took me this long to see that this is just common sense. Thanks to David Frank.

1.7.2:

removed array-includes dependency in favor of indexOf, which is a little more verbose but slightly faster and doesn't require a shim. Thanks again to Joseph Dykstra.

1.7.1:

removed lodash dependency, adding lighter dependencies and polyfills in its place. Thanks to Joseph Dykstra.

1.7.0:

introduced allowedSchemesByTag option. Thanks to Cameron Will.

1.6.1:

the string 'undefined' (as opposed to undefined) is perfectly valid text and shouldn't be expressly converted to the empty string.

1.6.0:

added textFilter option. Thanks to Csaba Palfi.

1.5.3:

do not escape special characters inside a script or style element, if they are allowed. This is consistent with the way browsers parse them; nothing closes them except the appropriate closing tag for the entire element. Of course, this only comes into play if you actually choose to allow those tags. Thanks to aletorrado.

1.5.2:

guard checks for allowed attributes correctly to avoid an undefined property error. Thanks to Zeke.

1.5.1:

updated to htmlparser2 1.8.x. Started using the decodeEntities option, which allows us to pass our filter evasion tests without the need to recursively invoke the filter.

1.5.0:

support for * wildcards in allowedAttributes. With tests. Thanks to Calvin Montgomery.

1.4.3:

invokes itself recursively until the markup stops changing to guard against this issue. Bump to htmlparser2 version 3.7.x.

1.4.1, 1.4.2:

more tests.

1.4.0:

ability to allow all attributes or tags through by setting allowedAttributes and/or allowedTags to false. Thanks to Anand Thakker.

1.3.0:

attribs now available on frames passed to exclusive filter.

1.2.3:

fixed another possible XSS attack vector; no definitive exploit was found but it looks possible. See this issue. Thanks to Jim O'Brien.

1.2.2:

reject javascript: URLs when disguised with an internal comment. This is probably not respected by browsers anyway except when inside an XML data island element, which you almost certainly are not allowing in your allowedTags, but we aim to be thorough. Thanks to Jim O'Brien.

1.2.1:

fixed crashing bug when presented with bad markup. The bug was in the exclusiveFilter mechanism. Unit test added. Thanks to Ilya Kantor for catching it.

1.2.0:

  • The allowedClasses option now allows you to permit CSS classes in a fine-grained way.

  • Text passed to your exclusiveFilter function now includes the text of child elements, making it more useful for identifying elements that truly lack any inner text.

1.1.7:

use he for entity decoding, because it is more actively maintained.

1.1.6:

allowedSchemes option for those who want to permit data URLs and such.

1.1.5:

just a packaging thing.

1.1.4:

custom exclusion filter.

1.1.3:

moved to lodash. 1.1.2 pointed to the wrong version of lodash.

1.1.0:

the transformTags option was added. Thanks to kl3ryk.

1.0.3:

fixed several more javascript URL attack vectors after studying the XSS filter evasion cheat sheet to better understand my enemy. Whitespace characters (codes from 0 to 32), which browsers ignore in URLs in certain cases allowing the "javascript" scheme to be snuck in, are now stripped out when checking for naughty URLs. Thanks again to pinpickle.

1.0.2:

fixed a javascript URL attack vector. naughtyHref must entity-decode URLs and also check for mixed-case scheme names. Thanks to pinpickle.

1.0.1:

Doc tweaks.

1.0.0:

If the style tag is disallowed, then its content should be dumped, so that it doesn't appear as text. We were already doing this for script tags, however in both cases the content is now preserved if the tag is explicitly allowed.

We're rocking our tests and have been working great in production for months, so: declared 1.0.0 stable.

0.1.3:

do not double-escape entities in attributes or text. Turns out the "text" provided by htmlparser2 is already escaped.

0.1.2:

packaging error meant it wouldn't install properly.

0.1.1:

discard the text of script tags.

0.1.0:

initial release.