Vue Communicates with the Internet Chapter 14As you can see, the mail is not even about our application and the here hyperlink is hidden
in the HTML of the mail itself. In reality, it points to
the http://vuebank.com?give_all_my_money_to_account=754839534 address.
If we are logged in to VueBank, the link may work right away. It does not look good for our
finances.
To prevent these kinds of attacks, we should have our backend generate a CSRF (Cross Site
Request Forgery) token for us. We will take the token and send it along the request to
prove that the request originated from the user. The preceding link will become
http://vuebank.com?give_all_my_money_to_account=754839534&csrf=s83Rnj.
Since the token is generated randomly every time, the link in the mail cannot be forged
correctly because the attacker does not know the token that the server gave to the web
page.
In Vue, we use Axios to send the token. Usually, we won't send it as part of the link, but in
a header of the request; in fact, Axios does this for us and puts in the token in the next
request automatically.
You can change the name of the cookie that Axios will pick up by setting the
axios.defaults.xsrfCookieName variable, and you can edit the name of the header
that will return the token acting on the axios.defaults.xsrfHeaderName variable.