Run results for: DOMPurify vs JSXSS

Run details:

User agent: Mozilla/5.0 (Linux; Android 8.0.0; G3121) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.5359.215 Mobile Safari/537.36 OPR/73.2.3844.69974

Browser: Opera Mobile 73

Operating system: Android 8.0.0

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
DOMPurify	90.9 Ops/sec
js-xss	1031.9 Ops/sec

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);

Run results for: DOMPurify vs JSXSS

DOMPurify

js-xss