Browser QA

Browser QA

Summary

Interact with web applications as a user would — click, type, navigate — while monitoring network traffic, JavaScript execution, and DOM changes for security issues.

Domain: testing

Skill Identity

Purpose

Automated browser-based security testing using Playwright and browser devtools. Interact with web applications as a user would — click, type, navigate — while monitoring network traffic, JavaScript execution, and DOM changes for security issues.

Core Capabilities

1. Automated Navigation: Click links, fill forms, submit data
2. Network Monitoring: Capture HTTP requests/responses, detect API calls
3. JavaScript Execution: Run custom scripts in page context
4. DOM Inspection: Query selectors, extract data, detect XSS sinks
5. Screenshot/Video: Document findings visually

Use Cases

• Auth Flow Testing: Test login, logout, session handling, password reset
• CSRF Detection: Check for CSRF tokens in state-changing requests
• XSS Testing: Submit payloads via forms and monitor DOM
• Cookie Analysis: Check HttpOnly, Secure, SameSite flags
• Client-Side Security: CSP headers, SRI, HTTPS enforcement

Tools

• Playwright: Node.js/Python library for browser automation
• Puppeteer: Chrome-only automation (legacy)
• Browser DevTools Protocol: Direct CDP access for advanced use

Methodology

1. Baseline capture — record clean network traffic and console logs before injecting payloads.
2. Stateful navigation — drive multi-step flows (login → dashboard → settings) so client-side state mirrors real users.
3. Differential observation — diff request/response pairs across attacker vs. victim contexts to surface authorization gaps.
4. Evidence-first — capture screenshots, HAR files, and DOM snapshots before mutating state further.

Test Patterns

• Headed vs. headless — run smoke tests headless for speed, but switch to headed mode for tricky DOM races and anti-bot heuristics.
• Storage isolation — use Playwright's browserContext per test to avoid cookie/localStorage cross-contamination.
• Request interception — page.route() to mock responses, inject delays, or replay captured payloads deterministically.
• CDP escape hatch — drop to client.send('Network.setExtraHTTPHeaders', ...) for headers Playwright's API doesn't expose.

Anti-Detection Considerations

• Default Playwright fingerprints (navigator.webdriver, missing Chrome runtime fields) are trivially detected; use stealth patches for realistic testing.
• Mouse-movement simulation matters for CAPTCHA-protected flows — synthesize trajectories, not just instant clicks.
• TLS fingerprinting (JA3) leaks Playwright's Chromium signature; route through a customized proxy if testing anti-bot defenses.
• Respect target's anti-bot policy in authorized engagements — log every detection event for the report.

Common Pitfalls

• Flaky selectors — relying on auto-generated class names breaks across deployments; prefer data-testid or role-based selectors.
• Timing assumptions — waitForTimeout masks real race conditions; use waitForResponse/waitForLoadState instead.
• Cookie leakage — failing to clear storage between tests causes authenticated/unauthenticated flow confusion.
• Silent JS errors — without page.on('pageerror') listeners, CSP violations and client-side crashes go unnoticed.

Authentication Testing

• Drive full login/logout/password-reset cycles with page.fill() + page.click() — avoid shortcuts that skip client-side validation.
• After authentication, verify session cookies carry correct flags (HttpOnly, Secure, SameSite=Strict/Lax).
• Test account lockout by iterating wrong credentials and checking for rate-limiting responses (HTTP 429 or progressive delays).
• Validate "remember me" tokens — long-lived cookies should be rotated on server-side, not static across sessions.

Session and State Management

• Enumerate all client-side storage: localStorage, sessionStorage, IndexedDB, and cookies — each is a potential auth-data leak vector.
• Verify CSRF tokens are present in every state-changing request and are rotated per-request (not per-session).
• Test session fixation by injecting a known session ID before login and confirming the server issues a new one.
• Check logout invalidation: after logout, the old session cookie must not grant access (server-side revocation).

Network Traffic Analysis

• Capture full HAR files during testing: page.context().storageState() for cookies, page.route() for request/response logging.
• Identify all XHR/fetch calls the application makes — hidden API endpoints often lack the same authz checks as page routes.
• Monitor for credential leakage in URLs (tokens in query strings) and referrer headers (sensitive paths leaked to third-party origins).
• Check for mixed content: HTTP subresources on HTTPS pages downgrade security guarantees.

Detection Methods

Browser Automation Detection

• WebDriver flags: navigator.webdriver === true; legacy Selenium/Puppeteer signature.
• Headless indicators: --headless flag in Chrome process args; missing chrome.runtime API.
• Canvas fingerprint anomalies: WebGL renderer Mesa/SwiftShader; headless browser giveaway.
• Plugin enumeration: Missing expected plugins (Chrome PDF, native messaging).
• Mouse movement patterns: Linear mouse paths (no jitter) typical of automation.

SIEM Detection Rules

• Splunk SPL: index=web http.user_agent="*HeadlessChrome*" OR http.user_agent="*PhantomJS*"
• Sigma rule: sigma/rules/web/automated_browser_detection.yml
• Cloudflare Bot Management: ML-based bot detection catches most automation frameworks.
• Akamai Bot Manager: Behavioral fingerprinting.

Defense Evasion Techniques

Stealth Automation

• puppeteer-extra-plugin-stealth: Removes WebDriver signature; patches navigator APIs.
• undetected-chromedriver: Patches ChromeDriver to remove detection signatures.
• Playwright with stealth: Use playwright-extra with stealth plugin.
• Camoufox: Firefox fork with built-in fingerprint randomization.
• Real browser binaries: Use real Chrome/Firefox binaries (not headless); slower but stealthier.

Fingerprint Mimicry

• Use real user fingerprints: Capture legitimate user fingerprint (Canvas, WebGL, fonts); replay it.
• TLS fingerprint matching: curl-impersonate matches browser JA3/JA4 hashes.
• Realistic viewport: Match common viewport sizes (1920x1080, 1366x768); avoid 800x600.
• Realistic timing: Add jitter to mouse movements; random delays between actions.

Proxy / Network Stealth

• Residential proxies: Bright Data, Smartproxy; mimics real user IPs.
• IP rotation: Rotate per session; avoid single-IP burst patterns.
• Mobile carrier proxies: 4G/5G IPs; harder to block (legitimate user pattern).

Reporting and Evidence

• Use page.screenshot({ fullPage: true }) for every finding — full-page captures preserve context that viewport-only shots miss.
• Record video traces for complex multi-step exploits: browser.newContext({ recordVideo: { dir: 'evidence/' } }).
• Export console messages filtered by severity: page.on('console', msg => { if (msg.type() === 'error') log(msg) }).
• Generate HAR exports with page.context().tracing.start() and tracing.stop({ path }) for complete request-level evidence.

Advanced Techniques

• Combine Playwright with Burp Suite upstream proxy for passive traffic analysis while browser tests execute.
• Use page.addScriptTag() to inject custom monitoring hooks that log DOM mutations (MutationObserver) and network requests (PerformanceObserver).
• Parallelize independent test flows across multiple browser contexts for faster regression suites.

Integration

• Use with web-xss skill for payload delivery
• Use with api-security skill to analyze intercepted API calls
• Use with knowledge-ops to store findings