Avatar

Labs / Button Activator

  • Challenge
  • Released 15 Sep 2025

🔘 Can you activate what was meant to stay disabled?

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
1
Points
Challenge
Solution Available
Pro Exclusive
Start Lab Environment
~1-2 min setup
AWS dedicated
Private instance
Industry standard
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 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.