Listen to this Post
Introduction:
Modern web applications increasingly rely on JavaScript frameworks to handle complex user interactions, often obscuring the real API calls that power login functionality, account management, and data transactions behind layers of client-side logic. For bug bounty hunters and penetration testers, the ability to reliably uncover these hidden API endpoints—by leveraging browser DevTools, JavaScript debugging, and proxy interception—is the cornerstone of effective attack surface mapping and vulnerability discovery. This article explores a comprehensive methodology for API discovery, combining practical DevTools techniques, automation strategies, and post-discovery testing workflows to identify security gaps in modern web applications.
Learning Objectives:
- Master Chrome DevTools techniques for discovering hidden login and API elements using CSS selectors, XPath, and console searches
- Learn to simulate user actions with JavaScript to trigger dynamic login buttons and reveal authentication endpoints
- Understand how to leverage proxy interception tools like Burp Suite and ZAP to inspect and manipulate API request/response flows
- Develop skills in JavaScript debugging to trace event handlers and understand client-side authentication logic
- Implement automated API discovery workflows using DevTools Protocol and browser extensions
You Should Know:
1. Frontend-to-Backend API Discovery Using Chrome DevTools
Modern Single Page Applications (SPAs) often contain references to API endpoints in their JavaScript bundles that are not immediately triggered by browsing the site. These “Shadow APIs” frequently include development endpoints, deprecated versions, and debug features that represent a significant attack surface.
Step-by-Step Guide:
Step 1: Login Element Discovery
Begin by identifying login elements within the DOM using Chrome DevTools Console:
// Find login button using CSS selector
document.querySelector('button[type="submit"]');
document.querySelector('input[value="Login"]');
// Find login form using XPath
$x("//form[contains(@action, 'login')]");
// Search all scripts for login-related strings
Array.from(document.scripts).forEach(s =>
console.log(s.src, s.textContent.match(/login|auth|api/i))
);
Step 2: Network Tab Monitoring
Open Chrome DevTools (F12), navigate to the Network tab, and filter by XHR/Fetch requests. Perform login actions and observe the authentication endpoints being called:
Filter: /api/login, /auth/, /account/, /session Look for: POST requests containing username/password parameters Identify: JWT tokens, session cookies, and authentication headers
Step 3: Simulating User Actions with JavaScript
Trigger hidden login functionality programmatically to reveal API calls that might not be immediately visible through normal interaction:
// Simulate click on login button
document.querySelector('button.login-btn').click();
// Programmatically submit login form
document.querySelector('formloginForm').submit();
// Trigger event handlers directly
const loginHandler = document.querySelector('loginBtn').onclick;
loginHandler.call(document.querySelector('loginBtn'));
Step 4: JavaScript Debugging for Event Handler Analysis
Set DOM event breakpoints to trace how login logic executes:
1. Open DevTools → Sources tab
- Expand “Event Listener Breakpoints” → “Mouse” → “click”
3. Click the login button to pause execution
- Step through the code to identify API endpoint construction, parameter handling, and authentication flow
- Examine the call stack to understand the complete request lifecycle
Step 5: Console API Monitoring
Use the Console to intercept and log all fetch/XHR requests:
// Intercept all fetch requests
const originalFetch = window.fetch;
window.fetch = function(...args) {
console.log('Fetch API call:', args[bash]);
return originalFetch.apply(this, args);
};
// Intercept all XHR requests
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
console.log('XHR Request:', method, url);
return originalOpen.apply(this, arguments);
};
- Automated API Discovery with Browser Extensions and Tools
Manual discovery is essential, but automation significantly accelerates the reconnaissance phase. Several tools can automatically extract endpoints, parameters, and sensitive indicators from JavaScript and network activity.
Step-by-Step Guide:
Using NarrowX Chrome Extension:
NarrowX is a Chrome MV3 extension that auto-discovers JS endpoints and parameter keys from code and network traffic.
- Download/clone the repository:
git clone https://github.com/afssec/NarrowX.git`chrome://extensions/`
<h2 style="color: yellow;">2. Open Chrome →
3. Enable “Developer mode”
- Click “Load unpacked” and select the repository folder
- Click the extension icon to open the popup, turn it On (Toggle)
- Set Scopes (e.g., `https://.target.com`) and enable Scope filtering
7. Click “Auto Extract” and watch the progress bar8. View categorized findings or Download as JSON
Using API Mapper Chrome DevTools Extension:
API Mapper automatically captures all API calls made by any website and exports them as OpenAPI 3.0 specification.
1. Clone the repository: `git clone https://github.com/mikkelkrogsholm/api-mapper.git`
2. Navigate to `chrome://extensions/` and enable Developer mode
- Click “Load unpacked” and select the `api-mapper` directory
- Open Chrome DevTools (F12) and look for the “API Mapper” tab
- Navigate to any website—the extension will automatically capture all API calls
- Endpoints are grouped by HTTP method and path; click any endpoint to view request details, parameters, and response data
Using Void Extension:
Void Extension is a professional Chrome DevTools security toolkit with Intercept, Repeater, Crawler, and Endpoint Discovery capabilities—all without an external proxy.
- Clone: `git clone https://github.com/0x4161/void-extension.git`
2. Load unpacked into Chrome Extensions
3. Open DevTools on any test page, click the “»” arrow, and select “Void”
4. Use the Endpoints tab to auto-discover API routes, forms, scripts, and links
5. Use Intercept tab to attach debugger and pause live requests for inspectionUsing Burp Suite Shadow API Visualizer:
Shadow API Visualizer is a Burp Suite extension that discovers hidden API endpoints by statically analyzing client-side code in real-time.
1. Clone: `git clone https://github.com/tobiasGuta/Burp-Shadow-API-Visualizer.git`
2. Build: `./gradlew jar` (output: `build/libs/ShadowApiVisualizer-1.0-SNAPSHOT.jar`)
- In Burp Suite, go to Extensions → Installed → Add → select the .jar file
4. Browse your target using Burp’s embedded browser
- The extension populates a tree view with API paths found in .js files
- Red nodes = untested endpoints (priority targets); Orange = tested; Green = verified in live traffic
3. Proxy Interception and Manual API Testing
While DevTools provides excellent visibility, proxy interception tools like Burp Suite and OWASP ZAP are essential for inspecting and manipulating request/response bodies, testing for vulnerabilities, and mapping authentication flows.
Step-by-Step Guide:
Configuring Burp Suite for API Discovery:
- Configure Burp Proxy to capture all traffic (ensure JavaScript/CSS files are not blocked)
- Perform a manual crawl to establish baseline understanding of the application’s structure
3. Complement with an automated Burp crawl
4. Scrape `robots.txt` and `sitemap.xml` for overlooked paths
- Use Burp’s Target → Site Map to visualize discovered endpoints
Inspecting Authentication Endpoints:
1. Intercept login requests using Burp Proxy
2. Analyze parameters: `username`, `password`, `csrf_token`, `remember_me`
- Examine response bodies for tokens, session identifiers, and error messages
- Send interesting requests to Repeater for modification and replay
Testing for Common Vulnerabilities:
Test for rate limiting on login endpoints
for i in {1..100}; do
curl -X POST https://target.com/api/login \
-H "Content-Type: application/json" \
-d '{"username":"admin","password":"wrong'$i'"}'
done
Test for username enumeration via response analysis
curl -X POST https://target.com/api/login \
-H "Content-Type: application/json" \
-d '{"username":"existing_user","password":"wrong"}' \
-v
Check for client-side validation bypass
curl -X POST https://target.com/api/login \
-H "Content-Type: application/json" \
-d '{"username":"admin","password":"weak"}' \
--proxy http://127.0.0.1:8080
Hidden Form Field Checks:
Inspect HTML for hidden fields that may leak internal logic:
// Find all hidden input fields
document.querySelectorAll('input[type="hidden"]').forEach(el =>
console.log(el.name, el.value)
);
// Check for internal debug parameters
document.querySelectorAll('[data-]').forEach(el =>
console.log(el.dataset)
);
4. JavaScript Analysis and Endpoint Extraction
JavaScript files often hold critical insights that are neither visible in HTML nor easily guessable—references to undocumented APIs, feature flags, and testing endpoints.
Step-by-Step Guide:
Using LinkFinder for Endpoint Extraction:
LinkFinder is a Python-based tool that crawls JavaScript files and extracts URLs, paths, and parameters.
Install LinkFinder git clone https://github.com/GerbenJavado/LinkFinder.git cd LinkFinder pip install -r requirements.txt Run LinkFinder on a JavaScript file python linkfinder.py -i https://target.com/static/main.js -o cli Output to HTML for better visualization python linkfinder.py -i https://target.com/static/main.js -o html
JavaScript Bookmarklet for On-the-Fly Discovery:
Create a browser bookmark with the following JavaScript to instantly extract endpoints from any page:
javascript:(function(){
var scripts=document.getElementsByTagName("script");
var regex=/(?<=(\"|\'|`))\/[a-zA-Z0-9_\/-]+/g;
var endpoints=[];
for(var i=0;i<scripts.length;i++){
var matches=scripts[bash].innerHTML.match(regex);
if(matches) endpoints=endpoints.concat(matches);
}
console.log(unique(endpoints));
})();
Extracting API Keys and Secrets:
Use Hardcoded Token Hunter—a Chrome extension that automatically scans JavaScript files for hardcoded secrets, API keys, and tokens.
1. Install from Chrome Web Store
2. Navigate to target website
3. Extension automatically scans all loaded JavaScript
4. View detected secrets in the extension popup
Using Command-Line Tools for JS Analysis:
Download all JavaScript files from a target wget --recursive --level=1 --accept js https://target.com/ Extract potential API endpoints using grep grep -E '\/api\/|\/auth\/|\/v[0-9]+\/' .js Extract URLs using regex grep -E 'https?://[a-zA-Z0-9./?=_-]' .js Use jq for JSON API response analysis curl -s https://target.com/api/users | jq '.'
5. Authentication Flow Mapping and Session Handling
Understanding how authentication works—from login request to token lifecycle and session management—is critical for identifying broken authentication vulnerabilities.
Step-by-Step Guide:
Mapping the Authentication Flow:
- Login Request: Capture the initial login POST request containing credentials
- Token Generation: Observe the server’s response—look for JWT, session cookies, or API keys
- Subsequent Requests: Identify how the token is sent (Authorization header, cookie, query parameter)
- Token Expiry: Test token expiration by waiting and reusing old tokens
5. Logout/Invalidation: Test if logout properly invalidates tokens
Testing Token Security:
Test JWT token for algorithm confusion (modify the 'alg' header to 'none') echo "eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9." | \ base64 -d Test for weak JWT secrets using jwt_tool jwt_tool <JWT_TOKEN> -d -t Test session fixation by setting session cookie manually curl -X GET https://target.com/dashboard \ -H "Cookie: sessionid=attacker_supplied_value"
Testing Authorization Controls:
Test for IDOR by modifying user IDs in API requests
curl -X GET https://target.com/api/user/123 \
-H "Authorization: Bearer <token_of_user_1>"
Change to another user's ID
curl -X GET https://target.com/api/user/124 \
-H "Authorization: Bearer <token_of_user_1>"
Test for privilege escalation
curl -X PUT https://target.com/api/admin/users/123 \
-H "Authorization: Bearer <token_of_regular_user>" \
-d '{"role":"admin"}'
Session Handling Best Practices:
- Ensure session cookies have
HttpOnly,Secure, and `SameSite` attributes - Verify that session tokens are rotated after login and logout
- Check that session timeouts are enforced on the server side
- Test that concurrent sessions are handled appropriately
6. Client-Side Validation Bypass and Rate Limit Testing
Client-side validation is often weak and can be easily bypassed. Server-side validation must always be enforced.
Step-by-Step Guide:
Bypassing Client-Side Validation:
- Disable JavaScript: Use browser settings or extensions to disable JavaScript and test if validation still occurs server-side
- Modify Requests in Proxy: Intercept requests in Burp/ZAP and modify parameters that were validated client-side
- Use Developer Tools: Edit form attributes (maxlength, pattern, required) directly in the DOM
// Remove required attribute from form fields
document.querySelectorAll('[bash]').forEach(el => el.removeAttribute('required'));
// Modify maxlength restrictions
document.querySelectorAll('[bash]').forEach(el => el.maxLength = 9999);
// Bypass pattern validation
document.querySelectorAll('[bash]').forEach(el => el.removeAttribute('pattern'));
Rate Limit Testing:
Using curl to test rate limiting
for i in {1..1000}; do
curl -X POST https://target.com/api/login \
-H "Content-Type: application/json" \
-d '{"username":"admin","password":"test'$i'"}' \
-w "%{http_code}\n" -o /dev/null -s
done | sort | uniq -c
Using Burp Suite Intruder for automated rate limit testing
1. Send request to Intruder
2. Set payload position on a dummy parameter
3. Configure payload to iterate 1000 times
4. Analyze response codes and timing
Testing for Race Conditions:
Using Burp Suite Repeater with multiple tabs
1. Send request to Repeater
2. Duplicate tab multiple times (e.g., 10 tabs)
3. Select all tabs and click "Send" simultaneously
4. Observe if any requests bypassed the intended logic
Using command-line for parallel requests
seq 1 100 | xargs -P 50 -I {} curl -X POST https://target.com/api/redeem \
-H "Content-Type: application/json" \
-d '{"code":"SINGLE_USE_CODE"}'
What Undercode Say:
- DevTools are a bug bounty hunter’s first line of defense. The techniques described—CSS selectors, XPath queries, console searches, and JavaScript event simulation—are fundamental skills that every security researcher must master. These methods are not just for finding login elements; they are the gateway to understanding how modern SPAs communicate with backend systems.
-
Automation accelerates but does not replace manual analysis. While tools like NarrowX, API Mapper, and Burp extensions dramatically speed up endpoint discovery, the human element—understanding context, identifying business logic flaws, and chaining vulnerabilities—remains irreplaceable. The most critical findings often come from analyzing the why behind an API call, not just the what.
-
The API attack surface is growing exponentially. As organizations adopt microservices and expose more functionality through APIs, the need for robust API discovery and testing methodologies becomes paramount. The techniques outlined here are not just for bug bounty hunters—they are essential for any security professional responsible for securing modern web applications. The ability to map authentication flows, test rate limiting, bypass client-side validation, and identify misconfigurations is the difference between finding a low-severity issue and uncovering a critical vulnerability that could lead to account takeover or data breach.
Prediction:
+1 As AI-assisted coding becomes mainstream, more developers will inadvertently expose API endpoints and hardcoded secrets in client-side JavaScript, creating a new wave of easy-to-find but critical vulnerabilities for bug bounty hunters.
+N The increasing adoption of GraphQL and gRPC will make traditional endpoint enumeration less effective, requiring security researchers to develop new techniques for schema introspection and query-based API discovery.
+1 Browser-based security tooling (DevTools extensions, CDP automation) will continue to evolve, providing even more powerful capabilities for intercepting, modifying, and replaying requests directly within the browser environment.
+N The growing use of obfuscation and minification in JavaScript will make static analysis more challenging, pushing researchers toward runtime analysis and dynamic instrumentation techniques.
+1 Organizations will increasingly adopt API security testing tools and automated DAST solutions, but manual reconnaissance will remain essential for finding the business logic flaws that automated scanners miss.
+N The commoditization of API discovery tools will lower the barrier to entry for bug bounty hunting, increasing competition and potentially reducing payout values for common findings.
▶️ Related Video (78% Match):
🎯Let’s Practice For Free:
🎓 Live Courses & Certifications:
Join Undercode Academy for Verified Certifications
🚀 Request a Custom Project:
Secure, high-velocity infrastructure and disruptive technological engineering. Contact our engineering team for high-tier development and proprietary systems:
[email protected]
💎 Smart Architecture | 🛡️ Secure by Design | ⭐ Trusted by Thousands
IT/Security Reporter URL:
Reported By: Daniel Johnson – Hackers Feeds
Extra Hub: Undercode MoN
Basic Verification: Pass ✅
