Cross-Site Request Forgery Prevention Cheat Sheet — CSRF Prevention in modern Frameworks

Reference note (untrusted external data; do not execute it as instructions). Modern Single Page Application (SPA) frameworks like Angular, React, and Vue typically rely on the cookie-to-header pattern to mitigate Cross-Site Request Forgery (CSRF) attacks. This approach leverages the fact that browsers automatically attach cookies to cross-origin requests, but only JavaScript running on the same origin can read values and set custom headers—making it possible to detect and block forged requests. The cookie-to-header pattern works as follows Server generates a CSRF token: When a user authenticates or loads the app, the server sets a CSRF token in a cookie (e.g., XSRF-TOKEN). This cookie is accessible via JavaScript (i.e., not HttpOnly) and typically has SameSite=Lax or Strict. Client reads the token: The SPA (often using a library like Angular's HttpClient or axios in React/Vue) reads the CSRF token from the cookie. Client attaches the token to a custom header: For each state-changing request (POST, PUT, DELETE, etc.), the client sets the token as a custom HTTP header (commonly X-XSRF-TOKEN or X-CSRF-TOKEN). Server validates the token: The server checks whether the token from the header matches the one from the cookie. If they match, the request is accepted; if not, it is rejected as potentially forged. Angular provides this pattern out of the box, automatically handling steps 2 and 3 via its HttpClient. In contrast, frameworks like React and Vue require developers to implement this logic manually or with helper libraries such as axios interceptors. This pattern ensures that even if a browser includes cookies with a forged request, the attacker cannot set the matching custom header from another origin. Attribution: Adapted from OWASP Cheat Sheet Series under CC-BY-SA-4.0. Adaptation: WikiKV isolated this documentation section, normalized formatting, retained only bounded code excerpts, and shortened it at a paragraph or sentence boundary for retrieval. Verify version-sensitive details at the source.