Anti Forgery - better understanding how it works - html

Question

I am learning about protecting a website from unauthorized access and I have came across anti forgery. Here is my thought (and my problem I have with it). Please correct me if I am wrong.
Anti-forgery is in the ASP.NET MVC Applications handled (there might be many other ways, but this one is quite common) by inserting #Html.AntiForgeryToken() to the Form that is present on a webpage.
This token is afterwards used once user tries to POST the data to the system, where if we decorate our IActionResult or JsonResult method with [ValidateAntiForgeryToken] attribute, it checks whether the key matches the expected result. Here is an example of what I mean by decoration:
[Route("")]
[HttpPost("")]
[ValidateAntiForgeryToken]
public JsonResult UpdateRecords([FromBody]CustomRequest request)
{
if (ModelState.IsValid)
{
//...do some logic here
}
}
The reason why a webistes are using anti-forgery keys are, so that we do not want to allow unauthorized access to our business objects such as databases. The problem is, that if a website uses a cookie authentification, that is stored to a local cache, hackers can easily retrieve this stored value and use it when posting the data to our website. Due to that, we are implementing another level of protection, which is by inserting a special (unique) key to a webpage, which is being check upon posting the data. If the key is not matching, then the whole posting procedure fails.
Here is the thing I do not understand. Let's say that we have implemented our anti forgery on super simple form on our webpage like this:
<form method="post" ng-submit="addItem()" id="main-form">
#Html.AntiForgeryToken()
<input placeholder="Add New Item" ng-model="newItem" id="new-item" />
</form>
I know it does nothing, but let's imagine that by clicking the input button user tries to post some data to the database. If we inspect the webpage, we will suddenly see, that this is what the HTML generated code would look like:
<form class="ng-pristine ng-valid" method="post" ng-submit="addItem()" id="main-form">
<input name="__RequestVerificationToken" value="CfDJ8Ig8dRjRrw9FjKYv6kYaxVu7APOddjpVxQ3ZxGaamjVzV03eQEG7tgRe5q2uXJkKkbUf4RqzRCtJ1DGMK5C-ymroTBe_J9XQ-...(more text here )" type="hidden">
<input class="ng-pristine ng-valid ng-touched" placeholder="Add New Item" ng-model="newItem" id="new-item">
</form>
Now here, what I (and potential hacker) can see, is the special anti-forgery key we have just talked about. How come that this key is visible to anyone using the website? What I understand from this is, that we are basically serving our code to the hacker and he can now easily use it when posting to the database in order to authenticate himself; or am I wrong?
I am quite confused at the moment and therefore any help / info or recommendation regarding this matter would be more than appreciated.

Answer 1

The token is there to prevent people from falsifying form requests. It's also regenerated each time it's required - at least per-user and probably per-request (I am not sure on this last point). This means the attacker can't just copy their own token, or make it up; they would have to take it from the user's page and if they can do that then they probably have enough information to bypass the token anyway.
An attacker could craft a form on another website with some values and point it at a page on your website. If the admin submits this form (unwittingly through javascript, for example) then they have effectively just performed that action with their privileges and with the values specified by the attacker. This is bad, with sufficient knowledge you could trick someone into deleting an account, posting something obscene, etc.