All of them are for cross site request forgery protection and you need to use just one of them when sending a request to backend. Different names come from different frameworks.
It’s all about sending a csrf value to backend. Then backend will compare it with the csrf value stored in database for that specific user and if it matches, it will allow processing the request.
csrf :
- Is used in html forms (not ajax)
- Produced in backend while rendering html form.
- we can not set request header in html forms directly, so an easy way is to send it via form input as a hidden field.
- you can name this hidden input whatever you want. e.g.
<input name="my_csrf_input" value="a_hashed_string_the_csrf_value"
x-csrf-token:
- It is added to the request header for ajax requests.
- To use it, we can put the
csrf valuein a meta tag while rendering the html, then in front end we can get the value from that meta tag and send it to backend.
Laravel specific:
- When using
laravelas backend. Laravel checks this header automatically and compares it to the validcsrf valuein database.(laravel has a middleware for this)
x-xsrf-token:
- It is added to the request header for ajax requests.
- Popular libraries like angular and
axios, automatically get value of this header fromxsrf-tokencookie and put it in every request header. - To use it, we should create a cookie named
xsrf-tokenin backend, then our front end framework that uses angular or axios will use it automatically.
Laravel specific:
- Because it’s popular, laravel creates this cookie in each response.
- so when you’re using for example
axiosorangularwithlaravel, you don’t need to do anything. just log user in and ‘auth’ middleware will do the job. - In laravel, its a bigger string compared to
x-csrf-tokenbecause cookies are encrypted in laravel.