Concept
Same-Origin Policy
Before understanding CSRF, it is important to understand what the browser's Same-Origin Policy (SOP) actually doesβand, just as importantly, what it does not do.
An origin is defined by the combination of: Scheme + Host + Port
Scheme: The protocol used, such as http or https.
Host: The domain name or IP address, such as example.com.
Port: The network port, such as 80 or 443.
For example:
https://bank.comand:
https://evil.comare different origins.
The Same-Origin Policy generally prevents JavaScript running on one origin from freely reading sensitive data from another origin.
A script running on evil.com, for example, cannot normally make a request to bank.com and then read the response as though it belonged to evil.com.
JavaScript on:
evil.com
β
Attempts to access: bank.com
β
Request may be sent, depending on the mechanism
β
But JavaScript is normally prevented from freely reading the response
without explicit cross-origin permissionThis is the part of browser security that makes CSRF easy to misunderstand.
The Same-Origin Policy primarily protects the ability of one origin to access data belonging to another origin.
It does not mean that one website is incapable of causing a browser to send a request to another website.
For example, a page on evil.com can contain a form that submits to bank.com:
<form action="https://bank.com/change-email" method="POST">
<input type="hidden" name="email" value="attacker@example.com">
<button type="submit">Submit</button>
</form>If the victim submits that form or if the attacker's page causes the form to be submitted automatically the browser can send the request to bank.com.
Victim visits: evil.com
β
Attacker-controlled page creates a request
β
Browser sends request to: bank.com
β
The attacker cannot necessarily read bank.com's response
β
But the request may still cause bank.com to perform the actionThis is the gap CSRF exploits.
The attacker does not need to read the target application's response.
They only need the victim's browser to send a request that the target application interprets as legitimate.
If the victim is already authenticated to bank.com, the browser may automatically include the credentials associated with that site such as a session cookie subject to the cookie's scope and SameSite rules.
Victim is logged in to: bank.com
β
Browser holds valid bank.com session cookie
β
Victim visits: evil.com
β
evil.com causes browser to send a request to bank.com
β
Browser may attach the victim's bank.com credentials automatically
β
bank.com receives: Authenticated request
β
If no CSRF protection exists, the application may perform
an attacker-chosen actionThe attacker may never see the response.
They may not know whether the request succeeded.
If the action is predictable changing an email address, submitting a form, enabling a setting, or performing another state-changing operation the damage can occur simply because the server trusted the browser's automatically attached credentials as proof that the request was intentionally initiated by the user.
That is the central idea behind CSRF:
Authentication answers: "Whose session is this?"
CSRF protection answers: "Did this authenticated user intentionally cause this request?"
The Same-Origin Policy helps prevent evil.com from reading private data from bank.com.
But CSRF operates in a different space:
Same-Origin Policy
Can the attacker read the response?
β
Usually: No
CSRF
Can the attacker cause the victim's browser to send a state-changing request?
β
Potentially: YesCSRF exists in that gap.
The attacker does not need to steal the victim's session or read the target application's response. They only need to cause the victim's already-authenticated browser to send a request that the target site mistakes for an intentional action.