Benchmark: DOMPurify vs JSXSS

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/xss@1.0.6/dist/xss.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.0/purify.min.js"></script>

Script Preparation code:

window.testcontent = `<h4><span style="color: #808080;">WORK BY FUNCTION</span></h4>
<table style="border-collapse: collapse; width: 100%; height: 128px;" border="1">
<tbody>
<tr style="height: 11px;">
<td style="width: 20%; height: 11px; text-align: center; background: #000; color: white;">&nbsp;</td>
<td style="width: 20%; height: 11px; text-align: center; background: #ff1493; color: white;"><strong>PM</strong></td>
<td style="width: 20%; height: 11px; text-align: center; background: #228b22; color: white;"><strong>Design</strong></td>
<td style="width: 20%; height: 11px; text-align: center; background: #9400d3; color: white;"><strong>Dev</strong></td>
<td style="width: 20%; height: 11px; text-align: center; background: #ff4500; color: white;"><strong>QE</strong></td>
</tr>
<tr style="height: 13px;">
<td style="width: 20%; height: 13px; text-align: center; background: #000; color: white;"><strong>Is work needed?</strong> <br />YES | NO | ?</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
</tr>
<tr style="height: 26px;">
<td style="width: 20%; text-align: center; background: #000000; color: white; height: 26px;"><strong>Can work start?<br /></strong>YES | NO | - | ?</td>
<td style="width: 20%; text-align: center; background: #cccccc; color: #cccccc; height: 26px;">-</td>
<td style="width: 20%; text-align: center; height: 26px;">-</td>
<td style="width: 20%; text-align: center; height: 26px;">NO</td>
<td style="width: 20%; text-align: center; height: 26px;">-</td>
</tr>
<tr style="height: 13px;">
<td style="width: 20%; height: 13px; text-align: center; background: #000; color: white;"><strong>Is work complete?</strong><br />YES | NO | - | ?</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
<td style="width: 20%; height: 13px; text-align: center;">-</td>
</tr>
<tr style="height: 13px;">
<td style="width: 20%; text-align: center; background: #000000; color: white; height: 13px;"><strong>Who did the work?</strong><br />Name A | - | ?</td>
<td style="width: 20%; text-align: center; height: 13px;">-</td>
<td style="width: 20%; text-align: center; height: 13px;">-</td>
<td style="width: 20%; text-align: center; height: 13px;">-</td>
<td style="width: 20%; text-align: center; height: 13px;">-</td>
</tr>
<tr style="height: 26px;">
<td style="width: 20%; text-align: center; background: #000000; color: white; height: 26px;"><strong>Artifact Links<br /><br /></strong></td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
<td style="width: 20%; text-align: center; height: 26px;">
<p><a href="#">Test</a></p>
<p><a href="#">Test</a></p>
</td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
</tr>
<tr style="height: 26px;">
<td style="width: 20%; text-align: center; background: #000000; color: white; height: 26px;"><strong>Notes<br /><br /></strong></td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
<td style="width: 20%; text-align: center; height: 26px;">&nbsp;</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h4><span style="color: #808080;">PRODUCT REQUIREMENTS</span></h4>
<p>&nbsp;</p>
<h4><span style="color: #808080;">FUNCTIONAL REQUIREMENTS</span></h4>
<p>&nbsp;</p>
<p>&nbsp;</p>`

Tests:

DOMPurify
var frag = document.createDocumentFragment(); frag.innerHTML = DOMPurify.sanitize(window.testcontent); document.appendChild(frag);
js-xss
var frag = document.createDocumentFragment(); frag.innerHTML = filterXSS(window.testcontent); document.appendChild(frag);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOMPurify
js-xss

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
DOMPurify	1497.9 Ops/sec
js-xss	9676.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is tested?**

The provided JSON represents two individual test cases for benchmarking the performance of DOMPurify and JSXSS, two popular libraries for sanitizing user-inputted HTML strings.

**Options compared:**

1. **DOMPurify**: A library that uses a whitelist approach to remove malicious characters from user input.
2. **JSXSS**: A library that uses a combination of regular expressions and heuristics to detect and remove XSS vulnerabilities in user input.

The test cases measure the execution time for each library to sanitize a given HTML string using `document.createDocumentFragment()` as a temporary container.

**Benchmarking context:**

The benchmark is run on a desktop Windows 10 machine with Chrome 128 browser, and the results are reported in executions per second (ExecutionsPerSecond).

**Key findings:**

1. **DOMPurify**: The test case "DOMPurify" shows an execution time of approximately 1598.554443359375 executions per second.
2. **JSXSS**: The test case "js-xss" shows an execution time of approximately 10404.3388671875 executions per second.

**Interpretation:**

The results suggest that JSXSS is significantly faster than DOMPurify for this specific benchmark, likely due to its optimized regular expression engine and heuristics. However, it's essential to note that the performance difference may vary depending on the specific use case, input data, and system configuration.

**Other considerations:**

* The benchmark only measures the execution time of the sanitization process, not the overall security or effectiveness of each library.
* Other factors like memory usage, parsing complexity, and potential false positives/negatives should be considered when evaluating these libraries for real-world applications.

Please keep in mind that this analysis is based on a single test case, and more comprehensive testing may reveal different results.

Related benchmarks:

DOMPurify vs JSXSS (version: 0)

Comparing performance of: DOMPurify vs js-xss

Created: 3 years ago by: Guest

Jump to the latest result

DOMPurify

js-xss

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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