Benchmark: dompurify vs native vs none

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/gh/cure53/DOMPurify/dist/purify.js"></script>
<div id="foo">hello</div>

Script Preparation code:

window.testString = '<div id="hello">hello</div>';

Tests:

dompurify
document.getElementById("foo").innerHTML = DOMPurify.sanitize(window.testString);
native
document.getElementById("foo").setHTML(window.testString);
none
document.getElementById("foo").innerHTML = window.testString;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
dompurify
native
none

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Android 16; Mobile; rv:151.0) Gecko/151.0 Firefox/151.0

Browser/OS: Firefox Mobile 151 on Android

View result in a separate tab

none

140K/s

native

75K/s

dompurify

25K/s

View exact numbers

Test name	Executions per second
✓ none	139,747 Ops/sec
native	75,248 Ops/sec
dompurify	24,842 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of three approaches for sanitizing user-inputted HTML strings in a web browser:

1. **DOMPurify**: A library that sanitizes HTML by removing malicious attributes and tags.
2. **Native**: The built-in HTML parsing and rendering functionality of the web browser.
3. **None**: Using the original, unmodified user-inputted HTML string.

**Benchmark Test Cases**

There are three test cases:

1. **DOMPurify**
	* The benchmark uses DOMPurify to sanitize a sample HTML string (`window.testString = '<div id="hello">hello</div>'`) and then sets it as the innerHTML of an element with ID "foo".
2. **Native**
	* The benchmark uses the native HTML parsing and rendering functionality of the web browser (specifically, Chrome 128) to sanitize a sample HTML string (`window.testString = '<div id="hello">hello</div>'`) and then sets it as the innerHTML of an element with ID "foo". Note that this approach relies on the browser's built-in security features to prevent XSS attacks.
3. **None**
	* The benchmark uses the original, unmodified user-inputted HTML string (`window.testString = '<div id="hello">hello</div>'`) and sets it as the innerHTML of an element with ID "foo".

**Library: DOMPurify**

DOMPurify is a popular JavaScript library that sanitizes user-inputted HTML by removing malicious attributes, tags, and events. Its primary purpose is to prevent Cross-Site Scripting (XSS) attacks by ensuring only valid, safe content is executed within the web page.

In this benchmark, DOMPurify is used to sanitize the sample HTML string before setting it as the innerHTML of an element with ID "foo". This approach helps prevent XSS attacks, but it may also introduce performance overhead due to additional parsing and sanitization steps.

**Native vs None**

The native approach relies on the browser's built-in security features to prevent XSS attacks. While this approach provides excellent protection against malicious input, it can be slower than using DOMPurify or other sanitization libraries because:

* Additional parsing and validation occur before setting the innerHTML.
* Some attributes and tags might not be properly sanitized by default.

In contrast, the "None" approach allows unvalidated user-inputted HTML to be executed directly, which is highly vulnerable to XSS attacks. This approach should not be used in production environments due to security concerns.

**Other Considerations**

When choosing a sanitization approach, consider factors such as:

* Performance: DOMPurify and native approaches may introduce additional overhead compared to using unvalidated user input.
* Security: DOMPurify provides excellent protection against XSS attacks, while the native approach relies on browser security features. The "None" approach is highly vulnerable.

**Alternatives**

Other sanitization libraries or approaches you might consider include:

* HTMLSanitizer (another popular sanitization library)
* js-sanitize (a lightweight sanitization library)
* Custom implementation using web worker or web assembly for performance-critical applications

When selecting an alternative, evaluate factors such as performance, security requirements, and compatibility with your specific use case.

dompurify vs native vs none (version: 0) Benchmark.js

Comparing performance of: `dompurify vs native vs none`

Created: 4 years ago by: Guest

Go to the latest result

dompurify

native

none

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

dompurify vs native vs none (version: 0) Benchmark.js

Comparing performance of: dompurify vs native vs none

Created: 4 years ago by: Guest

Go to the latest result

dompurify

native

none

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `dompurify vs native vs none`