-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathhtml.html
More file actions
227 lines (186 loc) · 11.7 KB
/
Copy pathhtml.html
File metadata and controls
227 lines (186 loc) · 11.7 KB
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<title>CS 4440</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons/css/academicons.min.css">
<link rel="stylesheet" href="css/main.css"/>
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://kit.fontawesome.com/982c2a20d7.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<div id="navbar-placeholder" data-wiki-root="" data-site-root="../"></div>
<script src="js/navbar.js"></script>
<!-- ################################################################################### -->
<div class="container main-container" role="main" id="main-content">
<div class="row">
<div class="col-lg-9">
<h1>CS 4440 Wiki: <br class="on-narrow"><strong style="color:var(--color-blue)">HTML Cheat Sheet</strong></h1><br>
<!-- ################################################################################### -->
<p>In Project 3, you will use HTML pages as a mechanism for performing XSS (cross-site scripting) attacks. To help guide you, the following offers a brief introduction to HTML basics. As you follow along, we recommend that you <strong>save the code examples locally</strong> (e.g., as <code>test.html</code>) and open them in your web browser.</p>
<p><strong>This page is by no means comprehensive—we encourage you to bookmark and familiarize yourself with one of the many in-depth HTML tutorials on the web.</strong> Some great examples are:</p>
<ul>
<li><a href="https://www.w3schools.com/html/">W3 Schools' HTML Introduction</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet">Mozilla's HTML Cheat Sheet</a></li>
</ul>
<!-- ################################################################################### -->
<hr><h2 id=basics>HTML Basics</h2>
<p>In Project 3, we provide you with an attack template (<code>bsf.html</code>) containing much of the attack setup code pre-filled. The following dives into some of the fundamentals of HTML code and how it's rendered by your browser.</p>
<h3 id=basics#structure>Core Structure</h3>
<p>All HTML code must be wrapped by <code><html></code> tags. As shown below, all <strong>open</strong> tags (e.g., <code><html></code>) must be matched with a corresponding <strong>close</strong> tag (e.g., <code></html></code>):</p>
<pre><code class="language-html"><html>
<!-- HTML code goes here! -->
</html>
</code></pre>
<h3 id=basics#tags>Object Tags</h3>
<p>In HTML, the same tagging mechanism is used for all HTML objects, such as:</p>
<pre><code class="language-html"><html>
<b> Text that will be bolded here! </b>
<p> Paragraph will be printed here! </p>
<img> Image that will be shown here! </img>
</html>
</code></pre>
<h3 id=basics#comments>Commenting-out Code</h3>
<p>Like other languages, HTML supports code comments, which can be helpful to isolate specific code snippets of interest. As shown below, HTML comment blocks have corresponding <strong>open</strong> (<code><--</code>) and <strong>close</strong> tags (<code>--></code>):</p>
<pre><code class="language-html"><html>
<!--
<img> This image is now commented-out! </img>
-->
</html>
</code></pre>
<!--<h3 id=basics#rendering>How HTML is Rendered</h3>
<p>Todo.</p>-->
<!-- <h3 id=dbg#console>Developer Console</h3>
<p>Virtually all modern web browsers have <strong>developer consoles</strong> for debugging HTML code errors. In Firefox, you can access the console by right-clicking on the currently-loaded page and selecting <code>Inspect</code>.</p>
<pre><code class="language-html"><html>
<b> This code lacks a correct closing tag! </p>
</html>
</code></pre>-->
<!-- ################################################################################### -->
<hr><h2 id=forms>Sending Data via Forms</h2>
<p>Web applications commonly handle user input via <strong>forms</strong>. Think of these as analogous to "filling out a form"—but for a web application! Below covers some basics of setting up, configuring inputs to, and submitting HTML forms.</p>
<h3 id=forms#setup>Setting up a Form</h3>
<p>Creating a form is easy—just use HTML's own <code><form></code> tag! Below shows an example form for preparing a form that will eventually contain a search query for Google's search engine.</p>
<pre><code class="language-html"><html>
<form action="http://google.com/search?" method="GET">
<!-- Configure form parameters here! -->
</form>
</html>
</code></pre>
<p>Notice the <code>method=</code> parameter, which dictates whether the form is to be submitted via <code>GET</code> or <code>POST</code> requests. Depending on how the web application is designed, you need to adjust your form's <code>method</code> accordingly. In this example, Google's search engine expects user input via <code>GET</code> requests.
<h3 id=forms#inputs>Form Inputs</h3>
<p>Although forms <em>initialize</em> our user-to-server data submission, setting up the application's expected <em>parameters</em> requires <code><input></code> objects. Building from our above example, Google's search engine processes queries via the <code>q=</code> parameter. You can test this out yourself by entering a search for the word <code>"test"</code> on Google—the resulting URL will look something like <code>https://www.google.com/search?q=test...</code>!</p>
<p>Likewise, we want to send a search query for string <code>CS 4440 UofU</code>, our form will need to look like this:</p>
<pre><code class="language-html"><html>
<form action="http://google.com/search?" method="GET">
<input name="q" value="CS 4440 UofU">
</form>
</html>
</code></pre>
<h3 id=forms#submit>Submitting a Form</h3>
<p>While the above two steps take care of initializing the form and its necessary application-defined parameters, we still need to <em>submit</em> the form! To do this, you'll need to use JavaScript (more on JavaScript <a href="#javascript">below</a>).</p>
<p>In our running example, we can just use the following JavaScript code to submit the form:</p>
<pre><code class="language-html"><html>
<script>
document.[NameOfForm].submit()
</script>
</html>
</code></pre>
<p>Putting it all together, we need to give our previously-defined form a <code>name</code>. Let's just call it <code>"SearchQuery"</code>!</p>
<pre><code class="language-html"><html>
<form action="http://google.com/search?" method="GET" name="SearchQuery">
<input name="q" value="CS 4440 UofU">
</form>
<script>
document.SearchQuery.submit()
</script>
</html>
</code></pre>
<p>After opening this HTML up in your web browser, you should be redirected to the search results page with URL:</p>
<pre><code class="language-html">https://www.google.com/search?q=CS+4440+UofU
</code></pre>
<p>Voila! Our form-submitted search query worked.</p>
<!-- ################################################################################### -->
<hr><h2 id=javascript>Calling JavaScript Code</h2>
<p>Much of HTML relies on JavaScript for automating various tasks (e.g., <a href="#forms#submission">submitting a form</a>). Below covers some basic usage of JavaScript code within HTML documents. For a more detailed look at JavaScript programming syntax, we highly recommend reviewing the Wiki's <a href="../wiki/javascript">JavaScript Cheat Sheet</a>.</p>
<h3 id=javascript#scripts>Via Script Tags</h3>
<p>Within <code><html></code> tags, you can directly call JavaScript code embedded within <code><script></code> tags as follows:</p>
<pre><code class="language-html"><html>
<script>
<!-- JavaScript code goes here! -->
</script>
</html>
</code></pre>
<h3 id=javascript#events>Via Event Handlers</h3>
<p>Another way of invoking JavaScript code is via an <strong>event handler</strong>. HTML supports <a href="https://www.w3schools.com/tags/ref_eventattributes.asp">many event handlers</a> that can be used to trigger JavaScript code execution for specific actions related to pages, objects, or user interactions.
Shown below is an example of JavaScript invocation via the <code>onload</code> event handler for a given <code>img</code> object:</p>
<pre><code class="language-html"><html>
<img src="image.png" width="100" height="100" onload="foo()">
<script>
function foo() {
alert("Runs after content is loaded!");
}
</script>
</html>
</code></pre>
<p>In Project 3, you will need to explore different ways of invoking your malicious JavaScript code. The beauty of XSS is that you have many different avenues of getting your attack to execute!</p>
</div>
<!-- ################################################################################### -->
<div class="col-lg-3">
<nav class="sidebar-toc" aria-label="Table of Contents">
<h3><strong>Table of Contents:</strong></h3>
<ul>
<li><a href="#basics">HTML Basics</a>
<ul>
<li><a href="#basics#structure">Structure</a></li>
<li><a href="#basics#tags">Tags</a></li>
<li><a href="#basics#comments">Comments</a></li>
</ul>
</li>
<li style="margin-top:1ex"><a href="#forms">Forms</a>
<ul>
<li><a href="#forms#setup">Setup</a></li>
<li><a href="#forms#inputs">Inputs</a></li>
<li><a href="#forms#submit">Submission</a></li>
</ul>
</li>
<li style="margin-top:1ex"><a href="#javascript">JavaScript</a>
<ul>
<li><a href="#javascript#scripts">Scripts</a></li>
<li><a href="#javascript#events">Events</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- ################################################################################### -->
<footer class="bg-light text-center text-lg-start" role="contentinfo">
<div class="text-center p-3">
Copyright © Stefan Nagy. All rights reserved.
</div>
</footer>
<!-- ################################################################################### -->
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pre').forEach(pre => {
pre.setAttribute('tabindex', '0');
pre.setAttribute('role', 'region');
pre.setAttribute('aria-label', 'Code block');
});
document.querySelectorAll('pre code').forEach(code => {
code.setAttribute('tabindex', '0');
code.setAttribute('role', 'region');
code.setAttribute('aria-label', 'Code block');
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>