Benchmark: dompurify vs js-xss vs nothing

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/gh/cure53/DOMPurify/dist/purify.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gbirke/Sanitize.js/lib/sanitize.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xss@1.0.6/dist/xss.js"></script>

Script Preparation code:

window.testcontent = `<table class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="2" data-paste-markdown-skip="" data-tagsearch-lang="JavaScript" data-tagsearch-path="packages/react-dom/client.js">
        <tbody><tr>
          <td id="L1" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="1"></td>
          <td id="LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-c">/**</span></td>
        </tr>
        <tr>
          <td id="L2" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="2"></td>
          <td id="LC2" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> * Copyright (c) Facebook, Inc. and its affiliates.</span></td>
        </tr>
        <tr>
          <td id="L3" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="3"></td>
          <td id="LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> *</span></td>
        </tr>
        <tr>
          <td id="L4" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="4"></td>
          <td id="LC4" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> * This source code is licensed under the MIT license found in the</span></td>
        </tr>
        <tr>
          <td id="L5" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="5"></td>
          <td id="LC5" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> * LICENSE file in the root directory of this source tree.</span></td>
        </tr>
        <tr>
          <td id="L6" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="6"></td>
          <td id="LC6" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> *</span></td>
        </tr>
        <tr>
          <td id="L7" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="7"></td>
          <td id="LC7" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> * <span class="pl-k">@flow</span></span></td>
        </tr>
        <tr>
          <td id="L8" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="8"></td>
          <td id="LC8" class="blob-code blob-code-inner js-file-line"><span class="pl-c"> */</span></td>
        </tr>
        <tr>
          <td id="L9" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="9"></td>
          <td id="LC9" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="L10" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="10"></td>
          <td id="LC10" class="blob-code blob-code-inner js-file-line"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L11" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="11"></td>
          <td id="LC11" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="L12" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="12"></td>
          <td id="LC12" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-s1">type</span> <span class="pl-kos">{</span><span class="pl-v">ReactNodeList</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'shared/ReactTypes'</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L13" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="13"></td>
          <td id="LC13" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-s1">type</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L14" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="14"></td>
          <td id="LC14" class="blob-code blob-code-inner js-file-line">  <span class="pl-v">RootType</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L15" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="15"></td>
          <td id="LC15" class="blob-code blob-code-inner js-file-line">  <span class="pl-v">HydrateRootOptions</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L16" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="16"></td>
          <td id="LC16" class="blob-code blob-code-inner js-file-line">  <span class="pl-v">CreateRootOptions</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L17" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="17"></td>
          <td id="LC17" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./src/client/ReactDOMRoot'</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L18" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="18"></td>
          <td id="LC18" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="L19" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="19"></td>
          <td id="LC19" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L20" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="20"></td>
          <td id="LC20" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">createRoot</span> <span class="pl-k">as</span> <span class="pl-s1">createRootImpl</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L21" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="21"></td>
          <td id="LC21" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">hydrateRoot</span> <span class="pl-k">as</span> <span class="pl-s1">hydrateRootImpl</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L22" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="22"></td>
          <td id="LC22" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED</span> <span class="pl-k">as</span> <span class="pl-v">Internals</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L23" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="23"></td>
          <td id="LC23" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./'</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L24" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="24"></td>
          <td id="LC24" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="L25" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="25"></td>
          <td id="LC25" class="blob-code blob-code-inner js-file-line">export <span class="pl-k">function</span> <span class="pl-s1">createRoot</span><span class="pl-kos">(</span></td>
        </tr>
        <tr>
          <td id="L26" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="26"></td>
          <td id="LC26" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">container</span>: <span class="pl-v">Element</span> <span class="pl-c1">|</span> <span class="pl-v">DocumentFragment</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L27" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="27"></td>
          <td id="LC27" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">options</span>?<span class="pl-s1"></span>: <span class="pl-v">CreateRootOptions</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L28" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="28"></td>
          <td id="LC28" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">)</span>: <span class="pl-v">RootType</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L29" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="29"></td>
          <td id="LC29" class="blob-code blob-code-inner js-file-line">  <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-c1">__DEV__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L30" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="30"></td>
          <td id="LC30" class="blob-code blob-code-inner js-file-line">    <span class="pl-v">Internals</span><span class="pl-kos">.</span><span class="pl-c1">usingClientEntryPoint</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L31" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="31"></td>
          <td id="LC31" class="blob-code blob-code-inner js-file-line">  <span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L32" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="32"></td>
          <td id="LC32" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">try</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L33" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="33"></td>
          <td id="LC33" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">return</span> <span class="pl-c1">createRootImpl</span><span class="pl-kos">(</span><span class="pl-s1">container</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L34" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="34"></td>
          <td id="LC34" class="blob-code blob-code-inner js-file-line">  <span class="pl-kos">}</span> <span class="pl-s1">finally</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L35" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="35"></td>
          <td id="LC35" class="blob-code blob-code-inner js-file-line">    <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-c1">__DEV__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L36" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="36"></td>
          <td id="LC36" class="blob-code blob-code-inner js-file-line">      <span class="pl-v">Internals</span><span class="pl-kos">.</span><span class="pl-c1">usingClientEntryPoint</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L37" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="37"></td>
          <td id="LC37" class="blob-code blob-code-inner js-file-line">    <span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L38" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="38"></td>
          <td id="LC38" class="blob-code blob-code-inner js-file-line">  <span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L39" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="39"></td>
          <td id="LC39" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L40" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="40"></td>
          <td id="LC40" class="blob-code blob-code-inner js-file-line">
</td>
        </tr>
        <tr>
          <td id="L41" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="41"></td>
          <td id="LC41" class="blob-code blob-code-inner js-file-line"><span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-en">hydrateRoot</span><span class="pl-kos">(</span></td>
        </tr>
        <tr>
          <td id="L42" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="42"></td>
          <td id="LC42" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">container</span>: <span class="pl-v">Document</span> <span class="pl-c1">|</span> <span class="pl-v">Element</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L43" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="43"></td>
          <td id="LC43" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">children</span>: <span class="pl-v">ReactNodeList</span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L44" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="44"></td>
          <td id="LC44" class="blob-code blob-code-inner js-file-line">  <span class="pl-s1">options</span>?: <span class="pl-v"><span class="pl-token" data-hydro-click="{&quot;event_type&quot;:&quot;code_navigation.click_on_symbol&quot;,&quot;payload&quot;:{&quot;action&quot;:&quot;click_on_symbol&quot;,&quot;repository_id&quot;:10270250,&quot;ref&quot;:&quot;main&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;backend&quot;:&quot;ALEPH_FUZZY&quot;,&quot;code_nav_context&quot;:&quot;BLOB_VIEW&quot;,&quot;retry_backend&quot;:&quot;&quot;,&quot;originating_url&quot;:&quot;https://github.com/facebook/react/find-definition?q=HydrateRootOptions&amp;blob_path=packages%2Freact-dom%2Fclient.js&amp;ref=main&amp;language=JavaScript&amp;row=43&amp;col=12&amp;code_nav_context=BLOB_VIEW&quot;,&quot;user_id&quot;:15931013}}" data-hydro-click-hmac="54bdb4cf47c4c54ca34e07515905109320a839ea9bd1ff79c235a5892b018992">HydrateRootOptions</span></span><span class="pl-kos">,</span></td>
        </tr>
        <tr>
          <td id="L45" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="45"></td>
          <td id="LC45" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">)</span>: <span class="pl-v">RootType</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L46" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="46"></td>
          <td id="LC46" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">__DEV__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L47" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="47"></td>
          <td id="LC47" class="blob-code blob-code-inner js-file-line">    <span class="pl-v">Internals</span><span class="pl-kos">.</span><span class="pl-c1">usingClientEntryPoint</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L48" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="48"></td>
          <td id="LC48" class="blob-code blob-code-inner js-file-line">  <span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L49" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="49"></td>
          <td id="LC49" class="blob-code blob-code-inner js-file-line">  <span class="pl-k">try</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L50" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="50"></td>
          <td id="LC50" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">return</span> <span class="pl-en">hydrateRootImpl</span><span class="pl-kos">(</span><span class="pl-s1">container</span><span class="pl-kos">,</span> <span class="pl-s1">children</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L51" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="51"></td>
          <td id="LC51" class="blob-code blob-code-inner js-file-line">  <span class="pl-kos">}</span> <span class="pl-k">finally</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L52" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="52"></td>
          <td id="LC52" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">__DEV__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></td>
        </tr>
        <tr>
          <td id="L53" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="53"></td>
          <td id="LC53" class="blob-code blob-code-inner js-file-line">      <span class="pl-v">Internals</span><span class="pl-kos">.</span><span class="pl-c1">usingClientEntryPoint</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span></td>
        </tr>
        <tr>
          <td id="L54" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="54"></td>
          <td id="LC54" class="blob-code blob-code-inner js-file-line">    <span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L55" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="55"></td>
          <td id="LC55" class="blob-code blob-code-inner js-file-line">  <span class="pl-kos">}</span></td>
        </tr>
        <tr>
          <td id="L56" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="56"></td>
          <td id="LC56" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">}</span></td>
        </tr>
  </tbody></table>`;

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);
no sanitization
var frag = document.createDocumentFragment(); frag.innerHTML = window.testcontent document.appendChild(frag);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
dompurify
js-xss
no sanitization

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
dompurify	203.9 Ops/sec
js-xss	1091.2 Ops/sec
no sanitization	1156268.0 Ops/sec

dompurify vs js-xss vs nothing (version: 0)

Comparing performance of: dompurify vs js-xss vs no sanitization

Created: 2 years ago by: Guest

Jump to the latest result

dompurify

js-xss

no sanitization

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A