npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jitbit/htmlsanitizer

v2.0.2

Published

Client-side (browser-based) HTML sanitizer for front end

Downloads

1,723

Readme

JS Html Sanitizer

Client-side HTML Sanitizer (front-end only, i.e. "needs a browser", won't work in Node) to prevent XSS and unwanted tags in UGC.

  • Very fast (8000 ops/sec)
  • Very small (1.7kb unminified!)
  • Zero dependency, vanilla JS, works even in IE (duh)

Please note: to prevent XSS attacks you should always sanitize input on the server too. Never trust the client!

Install

<script src="https://cdn.jsdelivr.net/gh/jitbit/HtmlSanitizer@master/HtmlSanitizer.js"></script>

or

<script src="https://unpkg.com/@jitbit/htmlsanitizer@latest/HtmlSanitizer.js"></script>

or

npm install @jitbit/htmlsanitizer

(simply puts the script into /node_modules)

Usage:

<script>
    var html = HtmlSanitizer.SanitizeHtml("<div> <script> Alert('xss!'); </sc" + "ript> </div>");
    //html == "<div>  </div>";
</script>

The sanitizer uses whitelisting approach (as opposed to "blacklisting") to clean out everything that's not allowed.

Speed & Benchmarks

It uses browser/DOM to parse the html by using DOMParser object (hence the browser "front-end only" requirement) which makes it much faster than "pure JavaScript" sanitizers.

Tested on https://www.bbc.co.uk homepage - the page is sanitized ~370 times per second on an i5 core CPU in Firefox Quantum (tested via benchmark.js)

Comparing HtmlSanitizer vs DOMPurify benchmark:

starting benchmark...
HtmlSanitizer x 8,048 ops/sec ±3.37% (44 runs sampled)
DOMPurify x 5,195 ops/sec ±3.30% (57 runs sampled)
Fastest is HtmlSanitizer

Tags allowed by default

a, abbr, b, blockquote, body, br, center, code, div, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, label, li, ol, p, pre, small, source, span, strong, table, tbody, tr, td, th, thead, ul, u, video

Attributes allowed by default

align, color, controls, height, href, src, style, target, title, type, width

CSS styles allowed by default

color, background-color, font-size, text-align, text-decoration, font-weight

Schemas allowed by default

http:, https:, data:, mailto:

(allowed in 'src', 'href' and similar "uri-attributes". To clean up stuff like <a href='javascript:alert()'></a>)

Configuring

Allowed tags, attributes and styles are listed in AllowedTags, AllowedAttributes and AllowedCssStyles public properties. To disallow a tag remove it from the dictionary like this:

delete HtmlSanitizer.AllowedTags['TABLE']; //mind the uppercase

To add an allowed tag globally:

HtmlSanitizer.AllowedTags['SCRIPT'] = true; //mind the uppercase

To allow an extra tag only once during invocation - specify extra selector to allow in the second parameter

var html = HtmlSanitizer.SanitizeHtml("<input type=checkbox>", "input[type=checkbox]");

Browser support

Supported by all major browsers, IE10 and higher.

BUT WHY?

Why create a front-end HTML sanitizer if the input has to be sanitized on the server anyway?

Users often copy-paste awful HTML generated by MS Word, MS Outlook or Apple Mail that needs a clean-up. Or you need to remove excessive formatting in an WYSIWYG editor. Or you need to display an (ugly) email message in a (beatuful) mobile app. Or (my favorite) you simply need to ease the load in the server-side sanitizer. And many many other use-cases.

© Jitbit