Client-Side JavaScript Validation Bypass

If the website checks the user input and validates them using JavaScript, we may be able to bypass this validation by adding breakpoint and modify some variable with developer tools in web browser.

Investigation

For example, assume that website modifies user input then validation check when logged in as the following JavaScript (e.g. validation.js).

// validation.js
function validate() {
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;

    // Change the username input if it contains "admin" to confuse attackers.
    username = username.replace(/admin/g, "noob");

    // If the input value of the username/password are both "admin", we can bypass this validation.
    if (username === "admin" && password === "admin") {
        return true;
    }
    return false;
}

By the way, this example may not exist in real world because it’s too simple.

Exploitation

1. In web browser, open Developer tools.

2. Go to Sources tab and select target JavaScript file which checks user input.

3. Add a breakpoint at the line where the validation is executed e.g. at the line if (username === "admin"... in the above validation.js example.

4. Back to the web login page, and input username/password in login form. Then submit.

5. Browser stops at the breakpoint we've added.

6. Go to Console tab in developer tool.

7. Assign the desired value to the target variable e.g. username = "admin"(reassign "admin" to undo what was modified by JavaScript).