-
-
Notifications
You must be signed in to change notification settings - Fork 679
/
index.html
91 lines (91 loc) · 5.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMPurify 3.1.1 "For Workgroups"</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.1.1 "For Workgroups"</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>