| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>DOMPurify 3.2.4 "Shipwreck"</title> |
| <script src="../dist/purify.min.js"></script> |
| <!-- we don't actually need it - just to demo and test the $(html) sanitation --> |
| <script src="//code.jquery.com/jquery-3.2.0.min.js"></script> |
| <script> |
| if(typeof console === 'undefined') {console={}; console.log=function(){}} |
| window.onload = function(){ |
| var xhr = new XMLHttpRequest(); |
| xhr.open('GET', 'https://cdn.rawgit.com/cure53/DOMPurify/main/test/fixtures/expect.mjs'); |
| xhr.onload = function(){ |
| var data=JSON.parse(xhr.responseText.slice(15, -2)); |
| x.value = '<!-- I am ready now, click one of the buttons! -->\r\n'; |
| for(var i in data) { |
| x.value+=data[i].payload+"\r\n\r\n"; |
| } |
| } |
| xhr.send(null); |
| } |
| </script> |
| </head> |
| <body> |
| <h4>DOMPurify 3.2.4 "Shipwreck"</h4> |
| <p> |
| <a href="http://badge.fury.io/js/dompurify" rel="nofollow"><img alt="npm version" src="https://badge.fury.io/js/dompurify.svg"></a> |
| <a target="_blank" rel="noopener noreferrer" href="https://github.com/cure53/DOMPurify/workflows/Build%20and%20Test/badge.svg?branch=main"><img src="https://github.com/cure53/DOMPurify/workflows/Build%20and%20Test/badge.svg?branch=main" alt="Build and Test"></a> |
| <a href="https://www.npmjs.com/package/dompurify" rel="nofollow"><img alt="Downloads" src="https://img.shields.io/npm/dm/dompurify.svg"></a> |
| <a href="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js" rel="nofollow"><img alt="minified size" src="https://badgen.net/bundlephobia/min/dompurify?color=green&label=minified"></a> |
| <a href="https://packagephobia.now.sh/result?p=dompurify" rel="nofollow"><img alt="gzip size" src="https://badgen.net/bundlephobia/minzip/dompurify?color=green&label=gzipped"></a> |
| <a href="https://github.com/cure53/DOMPurify/network/dependents"><img alt="dependents" src="https://badgen.net/github/dependents-repo/cure53/dompurify?color=green&label=dependents"></a></p> |
| <p> |
| <p> |
| This is the demo for <a href="https://github.com/cure53/DOMPurify">DOMPurify</a>, a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, SVG and MathML. |
| The textarea below contains sample-payload - you can also add your own. Watch it sanitize on the console or in the Iframe below. |
| </p> |
| <hr> |
| <button onclick=" |
| var tx1 = Date.now(); |
| var xss = DOMPurify.sanitize(x.value); |
| console.info('Operation took ' + (t=Date.now()-tx1) + ' milliseconds to complete.'); |
| console.log(xss.toString()); |
| y.value=xss; |
| timing.innerHTML=t+'ms '+timing.innerHTML |
| ">Sanitize textarea value, then write result to console</button> |
| <button onclick=" |
| var ifr = document.getElementById('ifr'); |
| var tx1 = Date.now(); |
| var xss = DOMPurify.sanitize(x.value); |
| console.info('Operation took ' + (t=Date.now()-tx1) + ' milliseconds to complete.'); |
| ifr.contentDocument.open(); |
| ifr.contentDocument.write(xss.toString()); |
| y.value=xss; |
| ifr.contentDocument.close(); |
| timing.innerHTML=t+'ms '+timing.innerHTML |
| ">Sanitize textarea value, then write result to DOM</button> |
| <label for="auto">Auto convert?</label><input type="checkbox" id="auto"> |
| <button title="This might not work with the large default payload. Better try with smaller, realistic values" onclick=" |
| var ifr = document.getElementById('ifr'); |
| var tx1 = Date.now(); |
| var xss = DOMPurify.sanitize(x.value); |
| console.info('Operation took ' + (t=Date.now()-tx1) + ' milliseconds to complete.'); |
| $(ifr.contentDocument.body).html(xss.toString()); |
| y.value=$(ifr.contentDocument.body).html(); |
| ifr.contentDocument.close(); |
| timing.innerHTML=t+'ms '+timing.innerHTML |
| ">Sanitize textarea value, then use $(elm).html()</button> |
| <hr> |
| <p> |
| Timings: <code id="timing"> </code> |
| </p> |
| <p><label for="x">Dirty HTML</label></p> |
| <textarea onkeyup=" |
| if(!document.getElementById('auto').checked) { |
| return; |
| } |
| var ifr = document.getElementById('ifr'); |
| var xss = DOMPurify.sanitize(x.value); |
| ifr.contentDocument.open(); |
| ifr.contentDocument.write(xss.toString()); |
| y.value=xss; |
| ifr.contentDocument.close(); |
| " placeholder="Payload goes here, test me, test me hard!" id="x" style="width:95%;height:100px"><!-- Loading Test-Vectors ... --></textarea> |
| <p><label for="y">Clean HTML</label></p> |
| <textarea placeholder="Here be the sanitized markup to inspect!" id="y" style="width:95%;height:100px"></textarea> |
| <p><label for="ifr">Clean DOM</label></p> |
| <iframe src="about:blank" id="ifr" style="width:95%;height:100px"></iframe> |
| </body> |
| </html> |
