Lab Icon

Button Activator

🔘 Can you activate what was meant to stay disabled?

Challenge 23 Nov 2025 Pro Exclusive Solution Available

This web application has a mysterious button that holds the key to success, but there's just one problem - it's completely deactivated! 🚫 The developers thought they were clever by disabling it, but client-side restrictions are rarely as secure as they appear. 💡 Put your browser manipulation skills to the test and discover how to breathe life back into this dormant button! 🔓

1
Flags
5
Points
76%
Success Rate
Start Your Challenge
~1-2 min setup
Dedicated server
Private instance
Industry standard
This solution is for Flags Mode

This walkthrough explains how to hack the lab and capture the flags. For help with Learning Mode questions, use the Request Hint button next to each question.

Challenge

🔘 Button Activator - Complete Solution

Objective: Enable the disabled button using browser developer tools to call a backend service that returns the flag.
🔍 Step 1: Access the Challenge

Navigate to <target-ip> in your web browser. You'll see a simple web page with a large button labeled "Click me to get the flag!" that appears grayed out and unresponsive.

🔍 Step 2: Inspect the Button Element

Right-click on the disabled button and select "Inspect" or "Inspect Element" to open the browser's Developer Tools. This will highlight the button element in the HTML source code.

<button id="flagButton" class="flag-button" disabled onclick="retrieveFlag()">
  Click me to get the flag!
</button>

Notice the disabled attribute that prevents the button from being clicked and the retrieveFlag() function it calls.

🔍 Step 3: Remove the Disabled Attribute

There are several methods to enable the button:

Method 1: Edit HTML Directly

In the Elements/Inspector tab of Developer Tools:

  1. Right-click on the disabled attribute in the HTML
  2. Select "Delete attribute" or simply delete the word "disabled"
  3. The button should immediately become clickable and change color
Method 2: Use Browser Console

Switch to the Console tab in Developer Tools and execute:

document.getElementById('flagButton').disabled = false;

Or alternatively:

document.getElementById('flagButton').removeAttribute('disabled');
🔍 Step 4: Analyze the Obfuscated JavaScript

The retrieveFlag() function is obfuscated, making it harder to understand directly. You can:

  1. View Page Source: Look at the JavaScript code in the HTML source
  2. Use Console: Examine the obfuscated arrays and functions
  3. Debugger: Set breakpoints to step through the execution
  4. Network Tab: Monitor network requests when the button is clicked
🔍 Step 5: Click the Activated Button

Once you've removed the disabled attribute, click the button to trigger the retrieveFlag() function. Monitor the Network tab to see the API call being made.

🔍 Step 6: Observe the API Call

When the button is clicked, the obfuscated JavaScript function makes a POST request to /api/v2/secure/flag-service with specific headers and payload:

Headers:
- Content-Type: application/json
- X-Request-Token: [base64 encoded timestamp]
- X-Button-Activated: true

Body:
{
  "action": "retrieve_flag",
  "timestamp": [current timestamp],
  "source": "button_activation"
}
🔍 Step 7: Retrieve the Flag

After clicking the activated button, the service responds with the flag in JSON format. The page will display a success message with the flag.

🔍 Alternative Methods

Advanced users might also try:

Method 1: Direct Function Call
// Call the function directly after enabling the button
document.getElementById('flagButton').disabled = false;
retrieveFlag();
Method 2: Deobfuscate and Analyze
// Examine the obfuscated arrays to understand the API call
console.log(_0xa2b4); // View the string array
// Look for API endpoint and required headers
Method 3: Manual API Call
// Make the API call manually with proper headers
fetch('/api/v2/secure/flag-service', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Request-Token': btoa('flag_request_' + Math.floor(Date.now()/1000)),
    'X-Button-Activated': 'true'
  },
  body: JSON.stringify({
    action: 'retrieve_flag',
    timestamp: Math.floor(Date.now()/1000),
    source: 'button_activation'
  })
}).then(r => r.json()).then(console.log);
Method 4: Network Tab Analysis

Monitor the Network tab in Developer Tools to see the API endpoint and request structure when the button is clicked, bypassing the need to deobfuscate the code.

📚 Key Learning Points
  • Client-Side Controls Are Not Security: Any restriction implemented purely in JavaScript can be bypassed
  • Browser Developer Tools: Essential for web security testing and debugging
  • Code Obfuscation: Understanding how to analyze obfuscated JavaScript code
  • API Endpoint Discovery: Multiple methods to discover backend service endpoints
  • Request Analysis: Understanding how frontend communicates with backend services
  • Network Monitoring: Using browser tools to intercept and analyze API calls
🛡️ Security Implications
  • Never Trust Client-Side Validation: Always implement server-side checks
  • Obfuscation Is Not Security: Code obfuscation only slows down analysis, doesn't prevent it
  • API Security: Ensure proper authentication and authorization on backend endpoints
  • Request Validation: Validate all request parameters and headers on the server side
  • Endpoint Exposure: Be careful about exposing sensitive API endpoints in client-side code
Real-World Application: This technique demonstrates how attackers can bypass client-side restrictions and analyze obfuscated code to directly interact with backend APIs. Code obfuscation provides minimal security benefit.