website/index.html

<!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&amp;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&amp;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&amp;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>