Obtaining CSRF Token

Question

As I have read about CSRF tokens, the server usually embeds the CSRF token in the form on a hidden tag. In that way, when submitting the form as a POST request, the CSRF token can be sent and received on the server side for authentication.

So, my idea is that a malicious script might request for the same form (with the CSRF token embedded) and use the CSRF token to perform an attack.

How can we protect the application if the case above is possible? Am I missing anything? Thanks in advance guys!

EDIT / UPDATE:

Ok let's say you have a banking website open on your browser with a form with CSRF token, then you open some malicious site in another tab. The malicious site loads and performs a request to the server to get the form (with the embedded CSRF token) then parses it and use the CSRF token to perform an attack. Is that possible?

Answer 1

This case is prevented by the Same-origin Policy.

"Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model."

---

In the context of your example, the malicious site is not permitted to perform a request on the banking website, and an attempt to do so will result in a message similar to the following in the browser console (taken from Chrome):

Failed to load XXX: Redirect from 'XXX' to 'XXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.