logo

Database

Typescript Manual Csrf Token Handling Fetch

Description

This vulnerability detector identifies TypeScript/JavaScript code that manually handles CSRF tokens in fetch API calls without proper validation or secure implementation. Manual CSRF token handling can lead to security vulnerabilities if tokens are not properly validated, stored insecurely, or implemented with flawed logic that bypasses CSRF protection mechanisms.

Weakness:

014 - Insecure functionality

Category: Functionality Abuse

Detection Strategy

    Scans TypeScript and JavaScript source code for fetch API calls that contain manual CSRF token handling patterns

    Identifies fetch requests where CSRF tokens are manually added to headers, request bodies, or URL parameters without following secure implementation practices

    Triggers when the check_fetch_csrf function detects insecure patterns in how CSRF tokens are obtained, stored, transmitted, or validated within fetch calls

    Reports vulnerabilities in code locations where fetch operations implement custom CSRF token logic that could be bypassed or exploited by attackers

Vulnerable code example

// VULNERABLE: CSRF token extracted from URL parameters
const params = new URLSearchParams(window.location.search);
const token = params.get('csrfToken'); // Attacker can control this via URL
fetch('/api/transfer-money', {
    method: 'POST',
    headers: {
        'X-CSRF-Token': token // User-controllable token bypasses CSRF protection
    }...

✅ Secure code example

// SECURE: CSRF token from meta tag (server-controlled source)
const metaTag = document.querySelector('meta[name="csrf-token"]');
const token = metaTag?.getAttribute('content'); // Server controls this value, not attacker
fetch('/api/transfer-money', {
    method: 'POST',
    headers: {
        'X-CSRF-Token': token // Safe token source prevents CSRF bypass
    }...