CS 4440 Wiki:
HTML Cheat Sheet


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 save the code examples locally (e.g., as test.html) and open them in your web browser.

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. Some great examples are:

HTML Basics

In Project 3, we provide you with an attack template (bsf.html) 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.

Core Structure

All HTML code must be wrapped by <html> tags. As shown below, all open tags (e.g., <html>) must be matched with a corresponding close tag (e.g., </html>):

<html>
    <!-- HTML code goes here! -->
</html>

Object Tags

In HTML, the same tagging mechanism is used for all HTML objects, such as:

<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>

Commenting-out Code

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 open (<--) and close tags (-->):

<html>
    <!--
    <img> This image is now commented-out! </img>
    -->
</html>

Sending Data via Forms

Web applications commonly handle user input via forms. 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.

Setting up a Form

Creating a form is easy—just use HTML's own <form> tag! Below shows an example form for preparing a form that will eventually contain a search query for Google's search engine.

<html>
    <form action="http://google.com/search?" method="GET">
        <!-- Configure form parameters here! -->
    </form>
</html>

Notice the method= parameter, which dictates whether the form is to be submitted via GET or POST requests. Depending on how the web application is designed, you need to adjust your form's method accordingly. In this example, Google's search engine expects user input via GET requests.

Form Inputs

Although forms initialize our user-to-server data submission, setting up the application's expected parameters requires <input> objects. Building from our above example, Google's search engine processes queries via the q= parameter. You can test this out yourself by entering a search for the word "test" on Google—the resulting URL will look something like https://www.google.com/search?q=test...!

Likewise, we want to send a search query for string CS 4440 UofU, our form will need to look like this:

<html>
    <form action="http://google.com/search?" method="GET">
        <input name="q" value="CS 4440 UofU">
    </form>
</html>

Submitting a Form

While the above two steps take care of initializing the form and its necessary application-defined parameters, we still need to submit the form! To do this, you'll need to use JavaScript (more on JavaScript below).

In our running example, we can just use the following JavaScript code to submit the form:

<html>
    <script>
        document.[NameOfForm].submit()
    </script>
</html>

Putting it all together, we need to give our previously-defined form a name. Let's just call it "SearchQuery"!

<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>

After opening this HTML up in your web browser, you should be redirected to the search results page with URL:

https://www.google.com/search?q=CS+4440+UofU

Voila! Our form-submitted search query worked.

Calling JavaScript Code

Much of HTML relies on JavaScript for automating various tasks (e.g., submitting a form). 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 JavaScript Cheat Sheet.

Via Script Tags

Within <html> tags, you can directly call JavaScript code embedded within <script> tags as follows:

<html>
    <script>
        <!-- JavaScript code goes here! -->
    </script>
</html>

Via Event Handlers

Another way of invoking JavaScript code is via an event handler. HTML supports many event handlers 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 onload event handler for a given img object:

<html>
    <img src="image.png"  width="100" height="100" onload="foo()">

    <script>
    function foo() {
        alert("Runs after content is loaded!");
    }
    </script>
</html>

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!

Table of Contents: