An Intro to XSS

Today we will be exploring Building, Breaking and fixing a website with Cross Site Scripting (XSS).

An Intro to XSS

Building the website

We are going to be building a website using HTML, python and the flask framework

Step 1

Create a new folder for your website in a folder (directory) that makes sense.

Step 2

Set up a python virtual environment:

Run the command to create your environment:

python -m venv xss-environment

Activate the environment run only one of the below: macOS/Linux:

source myenv/bin/activate

Windows (command prompt):

myenv\Scripts\activate.bat

Windows (powershell):

.\myenv\Scripts\Activate.ps1

Install Flask:

pip install flask

An Intro to XSS

Building the website

Step 3

Create a file named basic.html and then code this:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <p>Hi there!</p>
    </body>
</html>

Right click on it on the right to open in file explorer. Double click on it to view in the browser. You should now see your coded webpage.

Step 4

Adding style:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: aqua;
                font: bold;
                font-size: 14px;
            }   body {
                background-color: black;
            }
        </style>
    </head>
    <body>
       <p>Hi there!</p>
    </body>
</html>

Feel free to play with the style, check out https://www.w3schools.com/html/html_styles.asp for more info.

Remember to test it: Right click on it on the right to open in file explorer. Double click on it to view in the browser. You should now see your coded webpage.

Step 5

Adding a script into the header.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: aqua;
                font: bold;
                font-size: 14px;
            }   body {
                background-color: black;
            }
        </style>
        <script>
            alert('hello I am an alert script')
        </script>
    </head>
    <body>
       <p>Hi there!</p>
    </body>
</html>

Test what this looks like: Right click on it on the right to open in file explorer. Double click on it to view in the browser. You should now see your coded webpage.

An Intro to XSS

Building the website

Step 6

Create a file named basic.py and then code this:

import flask

app = flask.Flask(__name__)

@app.route('/')
def hello_world():
    return 'hello world'

if __name__ == '__main__':
    app.run()

Run in your terminal:

./basic.py

Then click on the localhost address to see a new webpage.

Step 7

Create a new Route and copy the your basic.html into the return f’‘’ ‘’’.

Here’s the file without the basic.html entered:

import flask

app = flask.Flask(__name__)

@app.route('/')
def hello_world():
    return 'hello world'

@app.route('/hello')
def hello_user():
    user = flask.request.args.get('user', default='Callum')
    return f'''
'''

if __name__ == '__main__':
    app.run()

Change default=Callum to your username.

Here is mine with my basic.html code between the f’‘’ ‘’’:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {{
                color: aqua;
                font: bold;
                font-size: 14px;
            }}   body {{
                background-color: black;
            }}
        </style>
    </head>
    <body>
       <p><span>Hi there! {user}</p>
    </body>
</html>

Note that I changed each “{” and “}” to “{{” and “}}” and added the {user} variable, you should do this with your code too. I have also removed my alert script.

Now we can go to our localhost to view the webpage at:

http://127.0.0.1:5000/hello/

An Intro to XSS

Breaking the website

Step 8

What happens when we put in our own user name in?

http://127.0.0.1:5000/hello?user=anonymous

Do you think you can do anything else with this?

An Intro to XSS

Breaking the website

Step 9

What happens when we put in our own script in?

http://127.0.0.1:5000/hello?user=<script>alert('Hi I am an alert')</script>

Play around with scripts, try googling and see what the wildest thing you can do is.

An Intro to XSS

Fixing the website

There are 3 common ways of fixing XSS:

Escaping HTML for user inputed variables. This is general and can be applied to most different technologies.
In Flask (and most web app frameworks) you can use template render functions that have in built XSS prevention and are the standard way of making websites.
Implementing Content Security Policies (search engine what that is if you are interested).

For the purposes of this exercise we will keep it simple and just use the escape funtion:

Step 10

Create a new line below your line:

user = flask.request.args.get('user', default='Callum')

New line to add below:

user = html.escape(user)

Now try your payload, you should see that it is rendered safely.

What Now?

Check out:

XSS labs - https://hacky.uk/

PortSwigger Web Security Academy - https://portswigger.net/web-security

Juice Shop - https://owasp.org/www-project-juice-shop/

Keyboard shortcuts

An Intro to XSS