Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
dompurify vs js-xss vs nothing
(version: 0)
Comparing performance of:
dompurify vs js-xss vs no sanitization
Created:
4 years ago
by:
Guest
Jump to the latest result
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="{"event_type":"code_navigation.click_on_symbol","payload":{"action":"click_on_symbol","repository_id":10270250,"ref":"main","language":"JavaScript","backend":"ALEPH_FUZZY","code_nav_context":"BLOB_VIEW","retry_backend":"","originating_url":"https://github.com/facebook/react/find-definition?q=HydrateRootOptions&blob_path=packages%2Freact-dom%2Fclient.js&ref=main&language=JavaScript&row=43&col=12&code_nav_context=BLOB_VIEW","user_id":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>
Run tests (3)
Previous results
Fork
Test case name
Result
dompurify
js-xss
no sanitization
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Based on the provided information, I will attempt to answer your question. It appears that you have three test cases for benchmarking different sanitization libraries: DOMPurify, js-xss, and no sanitization. To determine which library is the fastest, we can compare the `ExecutionsPerSecond` values from the latest benchmark result: * "dompurify": 203.8813018798828 * "js-xss": 1091.1612548828125 * "no sanitization": 1156267.5 The lower the value, the faster the execution. Based on this analysis, it appears that **"dompurify"` is the fastest among these three test cases.
Related benchmarks:
create append create element vs set inner html
querySelectorAll vs getElementsByTagName specific use case
querySelectorAll vs getElementsByTagName specific use case 2
replaceChildren vs removechild
innerHTML vs replaceChildrenxxx
Comments
Confirm delete:
Do you really want to delete benchmark?