Secure web development: the OWASP Top 10, injection, XSS, secure coding and testing your own apps

Websites and apps are the front door of almost every organisation. This lesson goes deeper than the web security basics: how the most common flaws happen in code, and how developers prevent them.

The OWASP Top 10

OWASP (Open Worldwide Application Security Project) is a free, community-run foundation. Its Top 10 lists the most critical web application risks. The 2021 edition:

SQL injection: see why parameters matter (run it)

This lab uses a tiny local database in your browser. It shows how gluing user input into SQL changes the query's meaning, and how parameterised queries stop it.

import sqlite3

db = sqlite3.connect(":memory:")
db.execute("CREATE TABLE staff (username TEXT, salary INTEGER)")
db.executemany("INSERT INTO staff VALUES (?, ?)",
               [("wanjiku", 85000), ("otieno", 92000), ("akinyi", 78000)])

user_input = "nobody' OR '1'='1"

# UNSAFE: input glued into the SQL text
unsafe_sql = "SELECT username, salary FROM staff WHERE username = '" + user_input + "'"
print("Unsafe query:", unsafe_sql)
print("Rows returned:", len(db.execute(unsafe_sql).fetchall()))

# SAFE: a parameterised query treats the input only as data
safe_rows = db.execute("SELECT username, salary FROM staff WHERE username = ?",
                       (user_input,)).fetchall()
print("Rows returned with parameters:", len(safe_rows))

The unsafe version returns all 3 rows because OR '1'='1' is always true. The parameterised version returns 0 rows: the database looks for a user literally named nobody' OR '1'='1.

Prevention: parameterised queries or prepared statements (PDO in PHP, ? placeholders in Python), ORMs used correctly, least-privilege database accounts, and input validation.

Cross-site scripting (XSS)

XSS happens when a site shows user input as HTML, so an attacker's script runs in other users' browsers (stealing sessions, changing pages).

import html

comment = '<script>alert("hacked")</script>Nice article!'
print("Raw (dangerous if put into HTML):", comment)
print("Escaped (safe to display):       ", html.escape(comment))

Prevention:

• Output encoding/escaping for the context (HTML, attributes, JavaScript, URLs). Modern frameworks (React, Vue, Laravel Blade, Django templates) escape by default; avoid bypasses such as innerHTML or dangerouslySetInnerHTML with user data.
• A Content Security Policy (CSP) header to limit which scripts can run.
• HttpOnly cookies so scripts can't read session cookies.

Other common flaws

Secure development lifecycle

1. Plan: threat modelling ("what could go wrong?" STRIDE is a popular method: Spoofing, Tampering, Repudiation, Information disclosure, Denial of service, Elevation of privilege).
2. Code: secure coding guidelines, code review, frameworks with safe defaults.
3. Test: SAST (static analysis of code), DAST (scanning the running app), dependency scanning (Dependabot, npm audit, pip-audit).
4. Deploy: security headers, HTTPS, no debug mode, secrets management.
5. Operate: logging, monitoring, patching, a vulnerability disclosure contact (security.txt).

Security headers checklist

Summary

• The OWASP Top 10 lists the most critical web risks; broken access control tops the 2021 list.
• Parameterised queries stop SQL injection; output encoding and CSP stop XSS.
• Build security into every stage: threat modelling, secure code, SAST/DAST, dependency scanning, secure deployment.
• Test only your own or authorised apps.