Back
Web Fundamentals

Cross-Site Request Forgery (CSRF) Attacks

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumSecurity

Cross-Site Request Forgery (CSRF) Attacks

TL;DRCSRF tricks authenticated users into performing unwanted actions. Protect with CSRF tokens + SameSite cookies.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Cross-Site Request Forgery (CSRF) exploits a user's active session by tricking their browser into making unwanted requests to a trusted site. Prevention requires tokens, SameSite cookies, and protecting all state-changing endpoints.

The attacker tricks the victim's browser into signing a request (using the victim's valid session cookie) without their knowledge. The bank (server) accepts it because it looks legitimate.

1How CSRF Attacks Work

The attacker creates a malicious page that makes a request to the victim's authenticated site. The browser automatically includes cookies, making the request appear legitimate.

1. User logs into trusted site (bank.com) → Session cookie is set
2. User visits attacker's site (attacker.com)
3. Attacker's page auto-submits form or triggers request to bank.com
4. Browser sends request WITH cookies → Server processes it as valid

2CSRF Token Protection

Server generates a unique token per session, includes it in forms, and validates it on state-changing requests.

1. Server generates CSRF token and stores in session
2. Token is added as hidden field in forms
3. User submits form → Token sent with request
4. Server validates token matches session → Process request
5. Attacker cannot forge valid token

3SameSite Cookie Protection

Cookies with SameSite=Strict or Lax prevent them from being sent in cross-site requests.

1. Set cookie with SameSite=Strict
2. User visits attacker.com
3. Browser does NOT send bank.com cookies on cross-site request
4. Request fails authentication
PropertyCSRF TokenSameSite Cookies
SupportAll browsersModern browsers
SecurityHighestHigh
Use CaseMost reliable protectionEasy default protection
ComplexityMediumLow

CSRF Token

Support

All browsers

Security

Highest

Use Case

Most reliable protection

Complexity

Medium

SameSite Cookies

Support

Modern browsers

Security

High

Use Case

Easy default protection

Complexity

Low

Common questions

  • ›“What is CSRF and how does it work?”
  • ›“How do CSRF tokens prevent attacks?”
  • ›“Explain SameSite cookie attribute.”
  • ›“How do you protect a web app from CSRF?”

What interviewers look for

  • Clear attack flow explanation
  • Understanding of tokens and SameSite
  • Knowledge of protecting all state-changing endpoints
  • Defense-in-depth thinking

Short answer (60 sec)

CSRF tricks a logged-in user into performing unwanted actions. Prevent with CSRF tokens (unique per session) and SameSite=Strict cookies. Always protect POST/PUT/DELETE requests.

Detailed answer (senior level)

CSRF exploits automatic cookie sending. The attacker creates a page that submits requests to the target site. Protection methods: 1) CSRF tokens (unique value per session, validated on server), 2) SameSite cookies (prevents cross-site sending), 3) Framework middleware. Protect all state-changing endpoints and never use GET for mutations.

  • Only protecting some endpoints
  • Using GET requests for state changes
  • Storing tokens in localStorage
  • Not using SameSite cookies
  • Forgetting to validate tokens on every mutation
Key Takeaways
  • ✓CSRF exploits authenticated sessions via forged requests
  • ✓Always protect POST, PUT, DELETE, and PATCH endpoints
  • ✓CSRF tokens are the most reliable defense
  • ✓SameSite=Strict/Lax cookies provide strong additional protection
  • ✓Use framework CSRF middleware when available
  • ✓Never use GET for actions that change state
Previous TopicCross-Site Scripting (XSS) AttacksNext Topic CORS Explained: Cross-Origin Resource Sharing

On this page