Securing Cookies with Axios HTTP Client

Sending cookies using the Axios HTTP client requires a comprehensive approach to client-side configuration and server-side coordination to prevent unauthorized data access, session hijacking, and Cross-Site Request Forgery (CSRF). This guide outlines the key security considerations you must evaluate when transmitting cookies with Axios, including credential management, CORS policies, secure cookie flags, and instance isolation.

1. Explicit Credential Handling (withCredentials)

By default, Axios does not send cross-origin cookies. To include cookies in cross-site requests, you must set the withCredentials option to true.

  • The Risk: Setting withCredentials: true globally allows cookies to be sent with every request, potentially exposing sensitive session tokens to external domains if your application makes third-party API calls.
  • Mitigation: Avoid setting axios.defaults.withCredentials = true. Instead, create dedicated Axios instances using axios.create() for your trusted internal APIs and leave third-party API clients unauthenticated.
// Recommended: Scoped instance for authenticated endpoints
const apiClient = axios.create({
  baseURL: 'https://api.yourdomain.com',
  withCredentials: true,
});

2. Cross-Site Request Forgery (CSRF / XSRF) Defense

When cookies are used for authentication, browsers automatically attach them to outbound requests matching the target origin, leaving the application vulnerable to CSRF attacks.

  • Axios Built-in Protection: Axios includes default settings to handle CSRF tokens via the xsrfCookieName and xsrfHeaderName properties.
  • Implementation: The server sends a non-sensitive anti-CSRF token in a readable cookie (e.g., XSRF-TOKEN). Axios reads this cookie and passes the token in a custom header (e.g., X-XSRF-TOKEN) with state-changing requests (POST, PUT, DELETE).
  • Evaluation: Ensure your server validates the header token against the session state to verify request authenticity.

The security of cookies transmitted via Axios largely depends on how those cookies are defined by the backend server via the Set-Cookie header.

  • HttpOnly: Ensures the cookie cannot be accessed via JavaScript (document.cookie). This mitigates the risk of session theft through Cross-Site Scripting (XSS). Axios does not need direct access to session cookies if the browser handles them automatically.
  • Secure: Enforces transmission exclusively over encrypted HTTPS connections, preventing man-in-the-middle (MITM) sniffing.
  • SameSite: Set to Strict or Lax to restrict when cookies are sent on cross-site requests, providing a strong baseline defense against CSRF. Use SameSite=None only when cross-domain cookie sharing is strictly required, and always pair it with the Secure attribute.

4. Cross-Origin Resource Sharing (CORS) Configuration

When sending authenticated requests with Axios across different origins, the server must be strictly configured to handle credentials.

  • Disallow Wildcard Origins: The server must not use Access-Control-Allow-Origin: * when credentials are supported. The backend must explicitly specify allowed origins in the header.
  • Validate Credentials Header: The server must respond with Access-Control-Allow-Credentials: true to permit the browser to expose the response to the Axios client.
  • Preflight Requests: Ensure OPTIONS requests are properly handled by the backend to prevent credential leakage during the preflight phase.

5. Preventing Cross-Site Scripting (XSS)

If an attacker executes malicious JavaScript within your application, they can make unauthorized requests through pre-configured Axios instances that automatically include credentials.

  • Sanitize and validate all user inputs and outputs.
  • Implement a robust Content Security Policy (CSP) to restrict untrusted script execution and limit the destinations to which Axios can dispatch network requests.