Most frameworks I’ve looked at will insert into forms a hidden input element with the value being a CSRF token. This is designed to prevent user Bob from logging in on my site and then going to http://badsite.com which embeds img tags or JS that tell my site to execute requests using Bob’s still logged in session.
What I’m not getting is what stops JS on badsite.com from AJAX requesting a URL with a form on my site, regex-ing the CSRF token from the hidden input element, and then AJAX posting to my site with that valid CSRF token?
It seems to me that you’d want to use JS to insert the CSRF token into the form at runtime, pulling the value from a cookie (which is inaccessible to badsite.com). However, I’ve not heard this approach mentioned and so many frameworks do the simple hidden input with the CSRF token, I’m wondering if my solution is over-engineered and I’m missing some part of what makes the hidden input method secure.
Can anyone provide some clarity? Thanks!
The Same Origin Policy (unless you subvert it with overly liberal CORS headers). JavaScript running on a site can’t read data from a site hosted on a different host without permission from that host.
There are workarounds to the SOP, but they all either require the co-operation of the host the data is being read from (JSON-P, CORS), or don’t pass any data that identifies a specific user (so can’t access anything that requires authorisation).