How to Secure GraphQL in React Applications

Securing GraphQL in a React application requires a combination of frontend best practices and robust backend protections. This article explores essential strategies for securing your GraphQL APIs when building React applications, focusing on secure token management, client-side authorization, preventing injection attacks, and backend defenses like query depth limiting.

Secure Token Management in React

Authentication is the first line of defense. In a React application, you typically use JSON Web Tokens (JWT) or session cookies to authenticate users against a GraphQL server.

• Avoid Local Storage for Sensitive Tokens: Storing JWTs in localStorage or sessionStorage makes them vulnerable to Cross-Site Scripting (XSS) attacks.
• Use HttpOnly Cookies: The most secure way to store authentication tokens is in an HttpOnly, Secure, and SameSite=Strict cookie. This prevents client-side JavaScript from accessing the token.
• In-Memory Storage with Refresh Tokens: If you must use JWTs directly in React, store the access token in application memory (state) and use a silent refresh token stored in an HttpOnly cookie to fetch new access tokens when the application reloads.

Implementing Authorization

While authentication identifies who the user is, authorization determines what they can do.

• Client-Side Authorization (UI Only): In React, use conditional rendering to hide or show UI elements based on user roles. This improves user experience but does not secure the data itself.
• Server-Side Authorization (Crucial): Never rely solely on React for authorization. Every GraphQL query and mutation must validate the user’s permissions on the server before returning data or executing changes.

Configuring the GraphQL Client Securely

Whether you use Apollo Client, Relay, or Urql, you must configure your client to send credentials securely.

• Pass Tokens in Headers: Use middleware or links to automatically attach the authorization header to every request. For Apollo Client, this is done using setContext:

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'https://your-api.com/graphql',
});

const authLink = setContext((_, { headers }) => {
  const token = getAccessTokenFromMemory(); // Retrieve from memory, not localStorage
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

Preventing Injection and XSS in React

React inherently protects against XSS by escaping values, but developers can bypass these protections if they are not careful.

• Use GraphQL Variables: Never construct GraphQL query strings by concatenating user input directly into the query template. Always use GraphQL variables, which treat inputs strictly as arguments rather than executable code.
• Avoid dangerouslySetInnerHTML: Avoid rendering data returned from GraphQL queries using dangerouslySetInnerHTML unless it has been thoroughly sanitized with a library like DOMPurify.

Essential Backend Protections for React Clients

A React application is entirely public; anyone can open the browser’s developer tools, inspect the GraphQL schema, or send custom queries. Therefore, you must secure the GraphQL server itself to protect the client.

• Disable Introspection in Production: Introspection allows users to query your entire schema. Disable it in production environments to prevent malicious actors from mapping out your API structure.
• Implement Query Depth Limiting: Malicious users can write deeply nested queries (e.g., user -> posts -> author -> posts) that can crash your server. Limit the maximum depth of queries allowed by the server.
• Apply Rate Limiting: Prevent Denial of Service (DoS) attacks by limiting the number of GraphQL requests a single IP address or authenticated user can make within a specific timeframe.