Avatar

Labs / Hack the Login

  • Very Easy
  • Released 25 Mar 2025
The lab needs to be started first.
Need help to start?
Very Easy

Hack the Login - Walkthrough

A detailed step-by-step guide to solving the lab and capturing the flag.

Lab Overview

This lab introduces you to client-side authentication vulnerabilities and teaches you how to analyze JavaScript code to bypass login mechanisms.

  • Platform: HackerDna
  • Lab Name: Hack the Login
  • Target URL: https://hack-the-login.hdna.me
  • Objective: Bypass the login authentication to retrieve the flag

Step 1: Exploring the Login Page

When approaching a web authentication challenge, it's important to first understand what we're working with. Client-side authentication is often vulnerable because all the code runs in the user's browser where it can be examined.

Accessing the Login Page

Navigate to the target URL using your web browser:

https://hack-the-login.hdna.me

Upon visiting the site, you'll see a simple login form with fields for username and password. Rather than attempting to guess credentials or brute force the login, a more efficient approach is to examine how the authentication mechanism works behind the scenes.

In web applications, client-side code is typically stored in JavaScript files. These files contain the logic that runs in the user's browser and can often reveal how authentication is implemented.

Step 2: Examining the Source Code

When dealing with client-side authentication, examining the source code is crucial. Unlike server-side authentication where the logic is hidden from users, client-side code is fully accessible in the browser.

Viewing the Page Source

To view the HTML source code of the page:

  1. Right-click anywhere on the page
  2. Select "View Page Source" (or similar option depending on your browser)

In the HTML, you'll notice a reference to a JavaScript file called script.js:

<script src="script.js"></script>

This script tag tells us that the page is loading a JavaScript file that likely contains the authentication logic. Since the authentication happens on the client side, this file might contain valuable information about how the system validates credentials.

Examining the JavaScript

To view the JavaScript file:

  1. Right-click on the page
  2. Select "Inspect" or "Inspect Element"
  3. Navigate to the "Sources" or "Debugger" tab (depending on your browser)
  4. Look for script.js in the file tree

Alternatively, you can directly access the JavaScript file by appending "/script.js" to the URL:

https://hack-the-login.hdna.me/script.js

Examining JavaScript files is a common technique in web application security testing. It allows us to understand the application's behavior and potentially identify security vulnerabilities.

Step 3: Analyzing the Authentication Logic

After accessing the script.js file, we can analyze the authentication mechanism. Here's the content of the file:

document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const messageDiv = document.getElementById('message');

    // Simple authentication check
    if (username === "admin" && password === "SecretPassword123!") {
        messageDiv.textContent = "Authentication successful! Retrieving flag...";
        messageDiv.className = "success";

        // Read the flag from the random folder
        fetch('7d9f3b2e1c8a5f6d4e0/flag.txt')
            .then(response => response.text())
            .then(flag => {
                messageDiv.textContent = `Success! Flag: ${flag}`;
            })
            .catch(error => {
                messageDiv.textContent = "Error reading flag file";
                messageDiv.className = "";
            });
    } else {
        messageDiv.textContent = "Invalid username or password";
        messageDiv.className = "";
    }
});

Analyzing the Code:

Let's break down what this JavaScript code is doing:

  1. It adds an event listener to the login form that triggers when the form is submitted
  2. It prevents the default form submission behavior with e.preventDefault()
  3. It retrieves the values entered in the username and password fields
  4. It performs a simple authentication check by comparing the entered credentials with hardcoded values
  5. If the credentials match, it fetches a flag from a specific file path

Key Findings:

  • The authentication is performed entirely on the client-side, which is inherently insecure
  • The username and password are hardcoded directly in the JavaScript as admin and SecretPassword123!
  • Upon successful authentication, the script fetches the flag from a file located at 7d9f3b2e1c8a5f6d4e0/flag.txt
  • The script even includes a comment acknowledging that this is not a secure way to handle authentication

This is a classic example of insecure client-side authentication. The credentials are stored in plaintext within the JavaScript file that anyone can view. Additionally, the path to the flag file is also exposed in the code.

Step 4: Bypassing the Authentication

Based on our analysis of the JavaScript code, we've discovered both the login credentials and the location of the flag file. This gives us two different methods to retrieve the flag:

Method 1: Using the Login Form with the Discovered Credentials

Since we now know the correct credentials, we can simply use them to log in:

  1. Enter admin in the username field
  2. Enter SecretPassword123! in the password field
  3. Click the "Login" button
  4. The flag will be displayed in the message area below the form

 

 

This method follows the intended flow of the application but uses the credentials we discovered by examining the source code.

Method 2: Directly Accessing the Flag File

Since we know the exact path to the flag file from the JavaScript code, we can bypass the login process entirely and access the file directly:

https://hack-the-login.hdna.me/7d9f3b2e1c8a5f6d4e0/flag.txt

This method demonstrates that the "security" provided by the random-looking directory name (7d9f3b2e1c8a5f6d4e0) is ineffective when the path is exposed in client-side code.

By navigating directly to this URL, the browser will display the flag without requiring any authentication.

Both methods work because of fundamental security flaws in the application's design:

  • Client-side authentication can always be bypassed because the code runs in the user's browser
  • Hardcoded credentials in client-side code are never secure
  • "Security through obscurity" (using a complex directory name) is not effective when the path is exposed in the source code

Step 5: Capturing the Flag

After successfully bypassing the authentication using either method described above, you'll see the flag displayed. The flag will be in a UUID format, which looks something like this:

xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Make sure to copy the flag exactly as it appears - UUIDs are case-sensitive and include all dashes. This is the solution to the lab that you'll need to submit to complete the challenge.

Key Takeaways

This lab demonstrates several important security concepts:

  • Client-side authentication is inherently insecure: Any authentication logic that runs in the browser can be examined and bypassed by users.
  • Never store sensitive information in client-side code: Credentials, API keys, and other secrets should never be included in JavaScript or other client-side files.
  • Authentication should be server-side: Proper authentication should always be implemented on the server where users cannot view or modify the code.
  • Security through obscurity is not effective: Using complex or random names for directories or files doesn't provide security if the paths are exposed in accessible code.
  • Source code review is a powerful technique: Examining the source code of web applications can reveal security vulnerabilities and sensitive information.

Real-World Relevance: While this lab presents a simplified scenario, similar vulnerabilities exist in real-world applications. Developers sometimes implement authentication on the client side for convenience or due to lack of security awareness. Security professionals regularly examine client-side code to identify such vulnerabilities during security assessments.