-
Notifications
You must be signed in to change notification settings - Fork 0
/
combine.htmtl
157 lines (130 loc) · 4.09 KB
/
combine.htmtl
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Safe Web Page</title>
</head>
<body>
<h1>Safe Web Page Demonstration</h1>
<!-- Safe Display of User Input -->
<div>
<h2>Safe User Input Display</h2>
<form id="safeForm">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<button type="button" onclick="submitSafeForm()">Submit</button>
</form>
<p id="safeUserInput"></p>
<script>
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function submitSafeForm() {
var userInput = document.getElementById('name').value;
var safeUserInput = escapeHtml(userInput);
document.getElementById('safeUserInput').innerText = "Hello, " + safeUserInput;
}
</script>
</div>
<!-- Safe URL Display -->
<div>
<h2>Safe URL Display</h2>
<a href="https://www.example.com">Visit Example.com</a>
</div>
<!-- Safe Event Handler -->
<div>
<h2>Safe Event Handler</h2>
<button onclick="safeAlert()">Click me</button>
<script>
function safeAlert() {
alert('This is a safe action!');
}
</script>
</div>
<!-- Safe Image Display -->
<div>
<h2>Safe Image Display</h2>
<img src="valid.jpg" alt="Valid image">
</div>
<!-- Safe SVG Display -->
<div>
<h2>Safe SVG Display</h2>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
</body>
</html>
Clean
===========================================================================
Bad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS Examples</title>
</head>
<body>
<h1>XSS Demonstration</h1>
<!-- Simple XSS through user input -->
<div>
<h2>Simple XSS</h2>
<p id="simple-xss">Hello, <script>document.write("<b>world</b>");</script></p>
</div>
<!-- XSS through image error -->
<div>
<h2>Image Error XSS</h2>
<img src="invalid.jpg" onerror="alert('XSS through image error!');">
</div>
<!-- XSS in URL -->
<div>
<h2>URL Parameter XSS</h2>
<a href="javascript:alert('XSS in URL!')">Click me</a>
</div>
<!-- XSS through user-controlled input -->
<div>
<h2>User Input XSS</h2>
<form id="xssForm">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<button type="button" onclick="submitForm()">Submit</button>
</form>
<p id="userInput"></p>
<script>
function submitForm() {
var userInput = document.getElementById('name').value;
document.getElementById('userInput').innerHTML = "Hello, " + userInput;
}
</script>
</div>
<!-- XSS through CSS expressions -->
<div>
<h2>CSS Expression XSS (Deprecated in modern browsers)</h2>
<div style="width: expression(alert('XSS through CSS!'));">
Hover over this div
</div>
</div>
<!-- XSS through Event Handlers -->
<div>
<h2>Event Handler XSS</h2>
<button onclick="alert('XSS through event handler!')">Click me</button>
</div>
<!-- XSS through href attribute -->
<div>
<h2>Href Attribute XSS</h2>
<a href="javascript:alert('XSS through href!')">Click me</a>
</div>
<!-- XSS through SVG -->
<div>
<h2>SVG XSS</h2>
<svg onload="alert('XSS through SVG!')"></svg>
</div>
</body>
</html>