Client-Side Path Traversal

What Is Client-Side Path Traversal?

Client-Side Path Traversal (CSPT) is a newer attack vector (2024-2025) where JavaScript in the browser constructs API request paths using user-controllable input without sanitization. Since the malicious path is built client-side, no WAF can inspect or block it.

How It Works

Vulnerable code pattern:

// URL: https://app.com/profile/../../admin/users
const userId = window.location.pathname.split('/')[2];
fetch(`/api/users/${userId}/profile`)

The attacker visits:

https://app.com/profile/../../admin/users

The browser resolves the fetch to:

GET /api/admin/users HTTP/1.1

The request hits an admin endpoint using the victim's session cookies.

Template Literal Injection

const id = new URLSearchParams(window.location.search).get('id');
axios.get(`/api/items/${id}/details`);

Attacker URL: ?id=../../../admin/config

Resolved request: GET /api/admin/config

Real-World Impact

• Unauthorized data access — read other users' profiles, orders, or settings
• Admin API access — traverse to admin endpoints using a regular user's session
• WAF bypass — the traversal happens in the browser, not in the HTTP request
• CSRF amplification — trigger admin actions via crafted URLs

How to Fix

Sanitize all user input before building API paths:

const safeId = encodeURIComponent(id).replace(/\.\./g, '');
fetch(`/api/users/${safeId}/profile`);

Validate path segments on the server:

if '..' in request.path:
    return Response(status=400)

Use allowlists for expected parameter values.

What VibeWShield Detects

VibeWShield's CSPT scanner performs pure static analysis on JavaScript bundles — zero HTTP requests. It detects fetch(), axios, and XMLHttpRequest calls that build URLs from location.pathname, searchParams, route params, or string concatenation. Findings include the exact code location and context snippet.