What stops someone from reading CSRF tokens in form inputs with JS

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

[To see links please register here]

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!

> what stops JS on badsite.com from AJAX requesting a URL with a form on my site

The [Same Origin Policy][1] (unless you subvert it with overly liberal [CORS](

[To see links please register here]

) 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).


[1]:

[To see links please register here]