Building a SQL Injection Game

Overview

As part of expanding my cloud resume portfolio, I wanted a quick, fun project to demonstrate security awareness without adding backend complexity. The result: a SQL Injection Game! It's a simple chat box where users try SQL injection attempts (e.g., "DROP TABLE users;"), and a bot detects them with regex, roasts the user snarkily (with emojis for extra fun), and logs attempts to the console. Everything runs client-side on my static S3-hosted site—no real database, just string matching for common attacks. Time spent: about 20 minutes, as planned.

What I Built

• HTML structure: A chat container with input, submit button, and scrollable message area, integrated as a separate page (/sql-game.html) linked from the "Projects" section.
• JavaScript logic: Regex patterns to detect attacks like DROP, SELECT *, UNION, etc. The bot responds with tailored roasts (e.g., "Whoa, trying to DROP TABLE? That's so 90s! 😂😜") or a default nudge for non-malicious input.
• Logging: Timestamped console logs for each attempt (e.g., "[2025-09-08T13:59:00.000Z] User input: DROP TABLE users;").
• Styling: Matches the site's retro matrix theme using VT323 font, green text, and black backgrounds.

Deployment: Added files to GitHub Actions for S3 upload and CloudFront invalidation—no Terraform changes needed.

What I Learned

• Regex mastery: Crafting patterns for SQL injections (e.g., /(drop\s+(table|database))/i) taught me efficient string matching without overcomplicating for false positives.
• Frontend interactivity: DOM manipulation for dynamic chat updates and scrolling enhanced my JS skills for static sites.
• Security simulation: It reinforced why parameterized queries matter in real apps, even in a fun demo.
• Integration: Keeping it lightweight ensured seamless fit with S3/CloudFront, aligning with serverless principles.

Hiccups and Troubleshooting

Minimal issues since it was frontend-only:

• Styling alignment: Tweaked CSS to match the matrix theme—ensuring the chat box didn't clash with the rain effect.
• Regex tuning: Initially, simple patterns missed variations (e.g., case-insensitivity), so added /i flags and tested common attacks locally.
• Emojis: Added them for fun, but confirmed they rendered consistently across browsers.

No major deployment snags, but as always, double-checked YAML indentation in deploy.yml (use spaces!), GitHub Secrets for AWS keys, and IAM permissions (e.g., s3:PutObject, cloudfront:CreateInvalidation) to prevent past errors like failed uploads.

Why It's Cool for a Cloud Resume

This project adds a playful, interactive element to my portfolio, showcasing quick prototyping and security concepts without heavy lifting. It highlights my ability to build engaging frontend features on a static site, ties into cloud security (simulating SQLi defense), and demonstrates CI/CD integration via GitHub Actions. Plus, it's a conversation starter for interviews—proving I can blend humor with tech skills!