-
Notifications
You must be signed in to change notification settings - Fork 37
/
jsanity-demo-pretty.htm
119 lines (98 loc) · 5.3 KB
/
jsanity-demo-pretty.htm
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>jSanity Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jsanity-0.3.js"></script>
</head>
<body onload="ol();">
<script type="text/javascript">
function ol() {
document.getElementById('badHtmlDiv').value = "<script>alert(/xss/);</" + "script>\r\n\r\n<img src=x onerror=alert('xss') />\r\n\r\nTesting script...";
document.getElementById('badHtmlData').value = "<p class=\"myClass\" \r\n data-foo=\"somedata\" \r\n name=\"foobar\" \r\n id=\"baz\">\r\n\r\nElement with a data attribute\r\n\r\n</p>";
document.getElementById('badHtmlCircle').value = "<b style=\"color:red;position:fixed;top:0;left:0;font-family:Arial,Helvetica,sans-serif;\">\r\n\r\nzzzzz<textarea>zzzz</textarea>\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"><circle cx=\"100\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"2\" fill=\"red\"/>\r\n</svg>\r\n\r\n</b>";
document.getElementById('badHtmlSpan').value = "<a href=\"http://www.microsoft.com\">\r\nlink to Microsoft\r\n</a><br>\r\n\r\n<a href=\"javascript:alert();\">\r\njavascript link\r\n</a><br>\r\n\r\n<a href=\"asdf.htm\">\r\nrelative link\r\n</a>";
}
function nosani1()
{
document.getElementById('targetDiv').innerHTML = document.getElementById('badHtmlDiv').value;
}
function sani1(isoDOM)
{
document.getElementById('targetDiv').innerHTML = '';
document.getElementById('targetDiv').appendChild(jSanity.sanitize({inputString: document.getElementById('badHtmlDiv').value, overflow: 'scroll', isolatedTargetDOM: isoDOM, allowLinks: true, customProtocols: { 'someProtocol://' : 1 } }));
}
function saniData(isoDOM)
{
document.getElementById('targetData').innerHTML = '';
document.getElementById('targetData').appendChild(jSanity.sanitize({inputString: document.getElementById('badHtmlData').value, overflow: 'scroll', allowLinks: true, dataAttributeCallback: function(name, value) { alert('[CALLBACK] Found a data-* attribute: ' + name + '=' + value); return "new value"; }, isolatedTargetDOM: isoDOM, customProtocols: { 'someProtocol://' : 1 }}));
}
function saniCircle(isoDOM)
{
document.getElementById('targetCircle').innerHTML = '';
document.getElementById('targetCircle').appendChild(jSanity.sanitize({inputString: document.getElementById('badHtmlCircle').value, overflow: 'scroll', allowLinks: true, isolatedTargetDOM: isoDOM, customProtocols: { 'someProtocol://' : 1 }}));
}
function sani2(isoDOM)
{
document.getElementById('targetSpan').innerHTML = '';
document.getElementById('targetSpan').appendChild(jSanity.sanitize({inputString: document.getElementById('badHtmlSpan').value, linkClickCallback: function () { alert('You clicked a link! Script will let it proceed...'); return true; }, allowLinks: true, isolatedTargetDOM: isoDOM, customProtocols: { 'someProtocol://' : 1 }}));
}
</script>
<div style="font-size:200%">
Simple markup with script, output to a DIV<br>
<textarea style="font-size:50%" ID="badHtmlDiv" rows="24" cols="59">
</textarea>
<br>
<!--
Note: Be sure to specify a unique ID for all sanitization targets. This allows jSanity to isolate markup sent to different targets.
It is also a smart idea to visually represent this content on the page as having come from a particular origin. For example,
consider using jQuery.UI to display a tooltip when the user hovers over this element. This will help users make valid
trust decisions about the contained content.
-->
<div ID="targetDiv" class="jSanitizeMe1" style="border-style: dotted; border-width: 1px">
[Output DIV #1]
</div>
<input type=button value="Inject without sanitization" onclick="nosani1();">
<input type=button value="Sanitize!" onclick="sani1(false);">
<input type=button value="Show output markup" onclick="alert(document.getElementById('targetDiv').innerHTML);">
<br>
<br>
Data attribute callback and NAME/ID prefixing example<br>
<textarea style="font-size:50%" ID="badHtmlData" rows="24" cols="59">
</textarea>
<br>
<div ID="targetData" class="jSanitizeMeData" style="border-style: dotted; border-width: 1px">
[Output DIV #2]
</div>
<code>
dataAttributeCallback: function(name, value) <br>{ <br> alert('[CALLBACK] Found a data-* attribute: ' + name + '=' + value);<br><br> return "new value"; <br>}<br>
</code>
<input type=button value="Sanitize with a data attribute handler" onclick="saniData(false);">
<input type=button value="Show output markup" onclick="alert(document.getElementById('targetData').innerHTML);">
<br>
<br>
SVG namespace support and overlay attack mitigation<br>
<textarea style="font-size:50%" ID="badHtmlCircle" rows="24" cols="59">
</textarea>
<br>
<div ID="targetCircle" class="jSanitizeMeCircle" style="border-style: dotted; border-width: 1px">
[Output DIV #3]
</div>
<input type=button value="Sanitize with .toStaticHTML()" onclick="document.getElementById('targetCircle').innerHTML = toStaticHTML(document.getElementById('badHtmlCircle').value);">
<input type=button value="Sanitize with jSanity" onclick="saniCircle(false);">
<br>
<br>
Link handling and link click callback:<br>
<textarea style="font-size:50%" ID="badHtmlSpan" rows="24" cols="59">
</textarea>
<br>
<span ID="targetSpan" class="jSanitizeMe2" style="border-style: dotted; border-width: 1px">
[Output SPAN]
</span>
<br>
<input type=button value="Sanitize!" onclick="sani2(false);">
<br>
<br>
</div>
</body>
</html>