Great work!

XP to next level

BugEater

UI vs. Backend Validation

Intermediate Manual QA 44 XP 49 min

Updated: 05/07/2026

Start Module

There's a field on the form. It only accepts numbers — the UI literally blocks you from typing letters. You try it, it works, you move on.

But what if someone bypasses the UI entirely?

Every form on the web is just an HTTP request. The browser's JavaScript validation is a convenience for the user, not a security control. Anyone with basic tooling — or even just a slightly different browser — can send whatever they want to your server.

The Two Layers of Validation

Layer Who Controls It Can Be Bypassed By
UI (Frontend) JavaScript, HTML attributes Browser devtools, curl, Postman, browser extensions
Backend (Server) Server-side code Nothing — it's the real gate

A field that validates on the frontend only is protected by a paper fence. The backend validation is the stone wall.

What You'll Learn

  • The concept of defense-in-depth: why both layers matter, but backend is mandatory
  • How UI validation creates a false sense of security in testing
  • Techniques to send data directly to the server, bypassing the frontend entirely
  • How to verify that the backend returns a proper error (not a crash) when invalid data arrives

Your Practice Challenge

The Strict ID Input field accepts only digits — the frontend blocks letters from being typed. Your mission: bypass the frontend restriction and send a non-numeric value directly. The backend should return a clean error. If it crashes instead, you've found a bug.

Module content