From OWASP (https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
)
Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they're currently authenticated. CSRF attacks specifically target state-changing requests, not theft of data, since the attacker has no way to see the response to the forged request. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker's choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.
The CSRF attack vector, by definition, is not on the same server as the server being attacked, so it doesn't have access to that information.
A rudimentary example:
Victim - Bob
Site - foo.com
Attacker - John
John has no access to foo.com, but he has access to Bob, either through a website or an email. He knows how foo.com works, so he can bind a request to either an email or a malicious website that is not on the foo.com domain. This will send the request and piggy-back off Bob's credentials.
The same-origin policy prevents John from seeing or intercepting anything of Bob's version of foo.com, which is why the CSRF key can be stored on the page Bob receives from foo.com without ever being seen by John.
If John were able to use JS to actually see the token, that would imply that John has access to requests from foo.com, in which case this would be either person-in-the-middle attack or an inside attack.
Basically, the goal of a CSRF key is to only stop a CSRF attack. If the CSRF key itself is being intercepted, then another attack has occurred.