Web Security Lab -- Educational Demo

Open this file in your browser. This lab shows safe examples and comparisons (vulnerable vs secure patterns) -- for learning only.

Password Strength & Client-side Hash

Enter password

Strength: --

Salt (optional) Derived key (hex)

--

Note: Hashing on the client is just educational. Always hash + salt on server using strong parameters (bcrypt, argon2) and TLS in transit.

XSS Demo -- Vulnerable vs Safely Rendered

Comment input (try <script>alert('xss')</script>)

Vulnerable area (shows raw HTML -- do NOT do this on real sites):

Safe area (uses textContent / sanitizer):

Lesson: never directly inject untrusted HTML. Use proper escaping, Content Security Policy (CSP), and server-side input validation.

SQL Injection -- Simulation

Enter username to "search"

Server-side Query (simulated)

--

This is a client-side simulation showing how string concatenation could create a dangerous query. In real servers: always use parameterized queries / ORM / prepared statements.

CSRF Token Demo

This simulates a site issuing a CSRF token and checking it on form submit.

Issued CSRF token

Form token (will be submitted)

--

Server should tie CSRF token to user's session (cookie) and verify per-request. Use SameSite cookies and double-submit cookie/token patterns.

Quick Security Checklist

Use TLS (HTTPS) everywhere
Server-side validation + least privilege
Parameterized queries / prepared statements
Escape user content when rendering (no raw HTML)
Secure cookies (HttpOnly, Secure, SameSite)
Implement CSP & strong headers

How to extend

Convert to a two-tier app (Node/Express backend) to demo real hashing & DB queries.
Add CSP header example from the server side.
Integrate OWASP Juice Shop for deeper labs (in a contained environment).

Files & Notes

This is purely client-side for learning. Do not use any "vulnerable" patterns in production. Use secure server-side libraries for auth and storage.