TMG SECURITY
MODULE 11 NOTES
MODULE 11 JavaScript Recon & Client-Side Logic Bugs\
1. What is a Source Map (.map)
Modern web applications are built using frameworks like React, Angular, or Vue. During
production, the original source code is compiled and minified into bundled JavaScript files.
A source map file links the minified code back to the original source.
Original Source Code → Bundled JS (minified) → Source Map (.map)
The .map file often contains:
● Original file paths
● Full source code (in many cases)
● API calls
● Internal logic
● Developer comments
2. Why Source Maps are Critical
If a source map is publicly accessible, an attacker can:
● Reconstruct the entire frontend codebase
● Discover hidden API endpoints
● Identify authentication logic
● Find internal or undocumented features
● Extract sensitive configurations
This turns black-box testing into near white-box analysis.
RECON METHODOLOGY (STEP-BY-STEP)
Step 1 Collect JavaScript Files
● Open DevTools → Network → filter “JS”
● Look for:
[Link]
[Link]
[Link]
[Link]
Step 2 Extract Endpoints
Search inside JS:
/api/
/v1/
/graphql
/ws/
/internal/
Step 3 Identify Sensitive Patterns
Look for:
Authorization:
Bearer
apiKey
token
client_secret
Step 4 Map Application Logic
Find:
● roles
● flags
● endpoints
● conditions
Step 5 Test Backend Directly
Frontend blocks ≠ backend blocks
3. Step-by-Step Methodology to Find Source Maps
Step 1 Open the Target Application
● Navigate to the target web application in a browser.
Step 2 Open Developer Tools
● Press F12
● Go to the “Network” tab
● Filter by “JS”
Step 3 Identify JavaScript Files
● Look for files such as:
[Link]
[Link]
[Link]
[Link]
[Link]
Step 4 Check for Source Map Reference
● Open any JS file and scroll to the bottom.
● Look for: //# sourceMappingURL=[Link]
Step 5 Access the Source Map
● Open the .map file directly: [Link]
● If not visible, try guessing common paths:
/[Link]
/static/js/[Link]
/[Link]
4. Understanding the Source Map Structure
● A .map file is typically JSON:
{
"version": 3,
"sources": [
"src/api/[Link]",
"src/admin/[Link]"
],
"sourcesContent": [
"...original source code..."
]
}
Most Important Field
sourcesContent
This often contains the entire original codebase.
1. Hidden API Endpoint Disclosure via JS
Summary
JavaScript file exposes internal API endpoints not documented publicly.
Steps
● Step 1 Open JS file: /[Link]
● Step 2 Search: /api/internal/admin/users
● Step 3 Access endpoint directly
Observed Result
Endpoint accessible without restriction.
Impact
Unauthorized access to internal APIs.
2. Hardcoded API Key in JavaScript
Summary
Sensitive API key exposed in client-side code.
Steps
● Step 1 Search in JS: apiKey=
● Step 2 Extract key
● Step 3 Use key in API request
Impact
Unauthorized API usage / financial abuse.
3. Client-Side Role Enforcement Bypass
Summary
Role restrictions enforced only in JavaScript.
Steps
● Step 1 Find logic: if([Link] !== "admin") hideButton();
● Step 2 Call API manually
Impact
Privilege escalation.
4. Feature Flag Abuse via JS
Summary
Feature flags exposed in JavaScript allow unlocking premium features.
Steps
● Step 1 Find flags: isPremium: false
● Step 2 Modify locally
● Step 3 Trigger feature API
Impact
Unauthorized feature access.
5. Shadow API Discovery
Summary
Hidden APIs discovered via JS not exposed in UI.
Steps
● Step 1 Search JS for: /internal/, /beta/
● Step 2 Access endpoints
Impact
Access to hidden functionality.
6. GraphQL Endpoint Exposure via JS
Summary
GraphQL endpoint exposed without restrictions.
Steps
● Step 1 Find: /graphql
● Step 2 Send introspection query
Impact
Schema disclosure → data exposure.
7. JavaScript Endpoint Enumeration → Mass Data Exposure
Summary
JS reveals endpoints allowing enumeration.
Steps
● Step 1 Find endpoint: /api/users?id=
● Step 2 Iterate IDs
Impact
Mass data extraction.
8. Client-Side Payment Logic Bypass
Summary
Price validation handled in the front end.
Steps
● Step 1 Find JS logic: price = calculateTotal()
● Step 2 Modify request manually
Impact
Payment bypass.
9. Debug Endpoints Exposed via JS
Summary
Debug endpoints left in production.
Steps
● Step 1 Search: /debug, /test, /dev
● Step 2 Access endpoints
Impact
Sensitive data exposure.
10. JS-Based Access Token Exposure
Summary
Token stored in JS variables.
Steps
● Step 1 Search: token:
● Step 2 Extract token
● Step 3 Reuse in API
Impact
Session hijacking.
11. WebSocket Endpoint Discovery via JS
Summary
JS exposes WebSocket endpoints.
Steps
● Step 1 Search: wss://
● Step 2 Connect manually
Impact
Real-time data access.
12. How to Perform JavaScript Mapping Using Source Maps
Step 1 Extract and Read Source Code
● Open the .map file
● Copy content into a formatter or view directly
● Use search functionality
Step 2 Identify API Endpoints
Search for:
● /api/
● /v1/
● /admin/
● /internal/
● /graphql
Example: fetch("/api/internal/admin/export")
Step 3 Identify Parameters
Look for request structures:
userId,
role,
isAdmin,
orgId
}
This reveals backend expectations.
Step 4 Identify Authorization Logic
● Example:
if ([Link] === "admin") {
accessAdminPanel();
This indicates:
● Admin role exists
● Admin APIs likely exist
Step 5 Identify Hidden Features
Search for: featureFlag, beta, premium, internalTool
Step 6 Identify Shadow APIs
Example:
● "/api/internal/export"
● "/api/admin/deleteUser"
These endpoints may not be exposed in the UI but are functional.
Step 7 Test APIs Directly
Use tools like:
● Browser
● Postman
● curl
Important principle:
Frontend restrictions do not guarantee backend enforcement
13. Source Map Exposure Leading to Internal API Disclosure
Summary
A publicly accessible source map file exposes original application source code, including
internal API endpoints.
Steps to Reproduce
● Step 1 Access JavaScript file: [Link]
● Step 2 Identify source map reference: //# sourceMappingURL=[Link]
● Step 3 Access source map: [Link]
● Step 4 Search for internal endpoints: /api/internal/
● Step 5 Identify endpoint: GET /api/internal/admin/export
● Step 6 Send request to endpoint
Observed Result
Endpoint returns sensitive data without proper authorization.
Impact
● Exposure of internal APIs
● Potential data leakage
● Increased attack surface
14. Privilege Escalation via Role Logic Disclosure
Summary
Source map reveals role-based access logic, allowing attackers to identify and directly access
privileged endpoints.
Steps to Reproduce
● Step 1 Access .map file
● Step 2 Search for role checks: role === "admin"
● Step 3 Identify related API: POST /api/admin/deleteUser
● Step 4 Call API directly without admin role
Observed Result
Action succeeds without authorization enforcement.
Impact
Privilege escalation.
15. Feature Flag Abuse via Source Map Disclosure
Summary
Source map reveals feature flag configuration and related endpoints.
Steps to Reproduce
● Step 1 Search for: featureFlag, premiumAccess
● Step 2 Identify API: POST /api/feature/enable
● Step 3 Modify request:
"premiumAccess": true
● Step 4 Send request
Observed Result
Premium feature enabled without authorization.
Impact
Financial abuse and unauthorized feature access.