Sequence diagram of how the attacker will fail different attempts to access sensitive & secured data of the user.
sequenceDiagram
participant User
participant Browser
participant Evil as evil.com
participant App as your-app.com
%% Attempt 1: Cross-site request without CSRF token
Note over Evil,App: Attempt 1 – Cross-site write request without CSRF token
User ->> Evil: Visit evil.com
Evil ->> Browser: Render page with malicious button
User ->> Browser: Click button
Browser ->> App: POST /api/secure-action
Note right of Browser: Cookies auto-attached (browser behavior)
App ->> App: Validate CSRF token
App -->> Browser: 403 Forbidden (CSRF token missing)
Note over App,Evil: Attack fails – no CSRF token
%% Attempt 2: Attacker tries to fetch CSRF token
Note over Evil,App: Attempt 2 – Attacker tries to fetch CSRF token
Evil ->> Browser: Trigger GET /csrf
Browser ->> App: GET /csrf
Note right of Browser: Cookies sent automatically
App ->> Browser: Set-Cookie: csrf_token=xyz
Note right of Browser: Cookie stored for your-app.com only
Note over Evil: evil.com cannot read cookies or response
Note over App,Evil: Attack fails – token never exposed
%% Legitimate same-origin request
Note over User,App: Legitimate request from your-app.com
User ->> Browser: Interact with your-app.com UI
Browser ->> Browser: Read csrf_token cookie (same-origin JS)
Browser ->> App: POST /api/secure-action (X-CSRF-Token=xyz)
App ->> App: CSRF token valid
App -->> Browser: 200 OK