56

When use hidden field and when use header and why ?
X-XSRF_TOKEN when we use?
X-CSRF TOKEN when we use?

Dovydas Šopa
  • 2,282
  • 8
  • 26
  • 34
Kishori Ghorpade
  • 589
  • 1
  • 5
  • 6
  • 2
    Possible duplicate of [Difference between CSRF and X-CSRF-Token](https://stackoverflow.com/questions/34782493/difference-between-csrf-and-x-csrf-token) – Óscar Andreu May 15 '19 at 12:45

3 Answers3

41

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 value in 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 laravel as backend. Laravel checks this header automatically and compares it to the valid csrf value in 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 from xsrf-token cookie and put it in every request header.
  • To use it, we should create a cookie named xsrf-token in 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 axios or angular with laravel, 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-token because cookies are encrypted in laravel.
Ahmad Mobaraki
  • 7,426
  • 5
  • 48
  • 69
  • 2
    It is worth mentioning that the Laravel CSRF middleware (`\App\Http\Middleware\VerifyCsrfToken`) is enabled only for `web` applications. If you use laravel as `api` (REST API), Laravel **will not run this middleware** as you can see in the `App\Http\Kernel` class. – Wesley Gonçalves Aug 04 '20 at 18:21
17

when you are submitting your data using ajax you will need headers for CSRF token because ajax will not send the token along with the data.

You can use hidden field for ajax request with following code

$.ajaxSetup(
{
    headers:
    {
        'X-CSRF-Token': $('input[name="_token"]').val()
    }
});

but you will have to add hidden field for every ajax requests.

The difference between the X-CSRF-TOKEN and X-XSRF-TOKEN is that the first uses a plain text value and the latter uses an encrypted value, because cookies in Laravel are always encrypted. If you use the csrf_token() function to supply the token value, you probably want to use the X-CSRF-TOKEN header.

its removed in laravel 5.2 doc but you can find it in laravel 5.0 doc, link is here

Divyank
  • 740
  • 3
  • 20
1

To add to the great answers already provided, it's worth noting that the terms CSRF and XSRF are interchangeable.

It is believed that Cross-site request forgery was originally referred to as XSRF, where "X" stands for Cross (1), or that it follows the pattern used in Cross-Site Scripting (XSS), avoiding confusion with CSS (2).

Over time, some frameworks have used "XSRF" to refer to protections via XHR, while "CSRF" is used for protections via HTML forms (see other answers on this page).

However, "CSRF" has become the more commonly used term nowadays.

Advena
  • 1,664
  • 2
  • 24
  • 45