We covered and explained Javascript validation Bypass using OWASP WebGoat free lab.

What is JavaScript Validation?

JavaScript validation is a type of validation that happens directly in your web browser when you’re filling out online forms. It’s designed to provide immediate feedback, checking things like whether you’ve entered the correct number of characters or the right type of characters (e.g., only lowercase letters) in a form field.

Client-Side vs. Server-Side Validation

It’s crucial to understand the difference between two types of validation:

  • Client-side validation occurs in the user’s browser. It’s great for user experience because it gives instant feedback, preventing unnecessary trips to the server for invalid input.
  • Server-side validation happens on the web server after the form data has been submitted. This is the most important type of validation for security.

The video highlighted a critical vulnerability: the example web application (WebGoat) used client-side validation but lacked server-side validation. This is a major security flaw.

The Vulnerability: Why Client-Side Only Isn’t Enough

When validation is only performed on the client-side, it can be easily bypassed. A user with even a little technical knowledge can manipulate the requests sent to the server, completely circumventing the browser-based checks.

How I Bypassed Client-Side Validation (Demonstration)

To demonstrate the bypass, I used a tool (implied to be Burp Suite) to intercept the web traffic between my browser and the server.

  1. Intercepting the Response: The key step was to intercept the response from the server when the web page loaded. This allowed me to modify the page’s content before it was displayed in my browser.
  2. Modifying the JavaScript: My goal was to find and remove the specific JavaScript functions responsible for the validation. I looked for functions related to “on click validate” and also for regular expressions within the JavaScript that defined the validation rules for each form field. By removing these JavaScript validation functions and rules from the server’s response before the page loaded in my browser, I effectively disabled all client-side checks.
  3. Submitting Invalid Data: Once the client-side validation was removed, I could enter any data into the form fields, even if it completely violated the original criteria. For instance, the video showed me submitting random characters where only three lowercase characters were expected.
  4. The Outcome: The form submission was successful because the server itself wasn’t re-validating the input. The server accepted the manipulated data, and a message appeared indicating a “server-side validation violation.” Ironically, this message actually pointed out the lack of proper server-side validation, confirming the success of the bypass.

Key Takeaway: Validate on Both Sides!

The most important lesson from this video is that client-side validation alone is insufficient for security. While it’s helpful for improving user experience by providing immediate feedback, it must always be paired with robust server-side validation to prevent malicious input, ensure data integrity, and protect the application from attacks.

Video Walkthrough

About the Author

Mastermind Study Notes is a group of talented authors and writers who are experienced and well-versed across different fields. The group is led by, Motasem Hamdan, who is a Cybersecurity content creator and YouTuber.

View Articles