Adding CSRFToken to Ajax request

Question

I need to pass CSRFToken with Ajax based post request but not sure how this can done in a best way. Using a platform which internally checking CSRFToken in request (POST request only)

initially I was thinking to add it to header like

$(function() {
    $.ajaxSetup({
        headers : {
            'CSRFToken' : getCSRFTokenValue()
        }
    });
});

Which will make it available to each Ajax request, but it will not work for my case, since in request CSRFToken is still coming as null.

Is there any way I can set CSRFToken for all Ajax call dealing with POST type

Edit If I do something like this in my Ajax call

data: {"newsletter-subscription-email" : "XXX" , 'CSRFToken': getCSRFTokenValue()},

Everything is working fine.

My Issue is, I want to pass CSRFToken value as a request parameter and not as a request header

So the header is passed but the token is null? What does `getCSRFTokenValue()` do exactly? — Robin Jonsson, Feb 27 '14 at 09:05
I am facing the same issue (need to pass CSRF token on Ajax based post but using JS only. I am not familiar with JQuery :( — shahz, Feb 17 '17 at 05:59

Krish R · Accepted Answer · 2014-02-27T09:59:16.140

39

How about this,

$("body").bind("ajaxSend", function(elm, xhr, s){
   if (s.type == "POST") {
      xhr.setRequestHeader('X-CSRF-Token', getCSRFTokenValue());
   }
});

Ref: http://erlend.oftedal.no/blog/?blogid=118

To pass CSRF as parameter,

        $.ajax({
            type: "POST",
            url: "file",
            data: { CSRF: getCSRFTokenValue()}
        })
        .done(function( msg ) {
            alert( "Data: " + msg );
        });

edited Feb 27 '14 at 09:59

answered Feb 27 '14 at 09:10

Krish R

22,583
7
50
59

Thanks, though value is getting passed, but it is not available in request, this is how it is being fetched from request at server side `request.getParameter(CSRF_PARAM_NAME)` – Umesh Awasthi Feb 27 '14 at 09:23
`request.getParameter(CSRF)` in your server side. Please check my updated answer – Krish R Feb 27 '14 at 09:59
Thanks!!, I know this way, but in that case, it means I need to add this to every Ajax call I am going to do in my application – Umesh Awasthi Feb 27 '14 at 10:15
Yeah! you can use to get the header response csrf token – Krish R Feb 27 '14 at 10:34
This gives an error on s.type – Sprachprofi Jan 20 '22 at 11:16

score 17 · Answer 2 · answered Feb 27 '14 at 09:13

17

You can use this:

var token = "SOME_TOKEN";

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
  jqXHR.setRequestHeader('X-CSRF-Token', token);
});

From documentation:

jQuery.ajaxPrefilter( [dataTypes ], handler(options, originalOptions, jqXHR) )

Description: Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

Read

answered Feb 27 '14 at 09:13

Farkhat Mikhalko

3,565
3
23
37

Thanks, though value is getting passed, but it is not available in request, this is how it is being fetched from request at server side `request.getParameter(CSRF_PARAM_NAME)` – Umesh Awasthi Feb 27 '14 at 09:23
@UmeshAwasthi you use node.js? – Farkhat Mikhalko Feb 27 '14 at 09:27
No, I am using Jquery for this – Umesh Awasthi Feb 27 '14 at 09:32
Thanks! I used to use `$ .ajaxSetup` config, and I had API problems with other servers that refused the request because of the unrecognized X-CSRF-TOKEN header. Now it will work perfectly. – Ennio Sousa Jan 10 '20 at 00:35

score 10 · Answer 3 · answered Apr 16 '15 at 06:20

Here is code that I used to prevent CSRF token problem when sending POST request with ajax

$(document).ready(function(){
    function getCookie(c_name) {
        if(document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if(c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if(c_end == -1) c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return "";
    }

    $(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRFToken": getCookie("csrftoken")
            }
        });
    });

});

I used your getCookie function. It is useful. thanks – BAE Aug 04 '16 at 20:38 — BAE, Aug 04 '16 at 20:38

score 8 · Answer 4 · answered Aug 22 '18 at 09:47

From JSP

<form method="post" id="myForm" action="someURL">
    <input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">    
</form>

This is the simplest way that worked for me after struggling for 3hrs, just get the token from input hidden field like this and while doing the AJAX request to just need to pass this token in header as follows:-

From Jquery

var token =  $('input[name="csrfToken"]').attr('value');

From plain Javascript

var token = document.getElementsByName("csrfToken").value;

Final AJAX Request

$.ajax({
      url: route.url,
      data : JSON.stringify(data),
      method : 'POST',
      headers: {
                    'X-CSRF-Token': token 
               },
      success: function (data) { ...      },
      error: function (data) { ...  }

});

Now you don't need to disable crsf security in web config, and also this will not give you 405( Method Not Allowed) error on console.

Hope this will help people..!!

score 4 · Answer 5 · answered Jul 28 '17 at 20:40

4

If you are working in node.js with lusca try also this:

$.ajax({
url: "http://test.com",
type:"post"
headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
})

answered Jul 28 '17 at 20:40

Massimo Ivaldi

51
4

score 2 · Answer 6 · answered Aug 19 '15 at 21:17

This worked for me (using jQuery 2.1)

$(document).ajaxSend(function(elm, xhr, s){
    if (s.type == "POST") {
        s.data += s.data?"&":"";
        s.data += "_token=" + $('#csrf-token').val();
    }
});

or this:

$(document).ajaxSend(function(elm, xhr, s){
    if (s.type == "POST") {
        xhr.setRequestHeader('x-csrf-token', $('#csrf-token').val());
    }
});

(where #csrf-token is the element containing the token)

score 1 · Answer 7 · answered Feb 07 '16 at 13:25

I had this problem in a list of post in a blog, the post are in a view inside a foreach, then is difficult select it in javascript, and the problem of post method and token also exists.

This the code for javascript at the end of the view, I generate the token in javascript functión inside the view and not in a external js file, then is easy use php lavarel to generate it with csrf_token() function, and send the "delete" method directly in params. You can see that I don´t use in var route: {{ route('post.destroy', $post->id}} because I don´t know the id I want delete until someone click in destroy button, if you don´t have this problem you can use {{ route('post.destroy', $post->id}} or other like this.

  $(function(){
    $(".destroy").on("click", function(){
         var vid = $(this).attr("id");
         var v_token = "{{csrf_token()}}";
         var params = {_method: 'DELETE', _token: v_token};
         var route = "http://imagica.app/posts/" + vid + "";
    $.ajax({
         type: "POST",
         url: route,
         data: params
    });
   });
  });

and this the code of content in view (inside foreach there are more forms and the data of each post but is not inportant by this example), you can see I add a class "delete" to button and I call class in javascript.

      @foreach($posts as $post)
          <form method="POST">
            <button id="{{$post->id}}" class="btn btn-danger btn-sm pull-right destroy" type="button" >eliminar</button>
          </form>
      @endforeach

score 0 · Answer 8 · answered Feb 05 '16 at 11:24

The answer above didn't work for me.

I added the following code before my ajax request:

function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            var csrftoken = getCookie('csrftoken');

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                     type: 'POST',
                     url: '/url/',
            });

score -3 · Answer 9 · answered Jun 17 '19 at 14:03

-3

Everybody that using: var myVar = 'token', is probably the worst idea. I can print it dirrectly in the console. You need to encrypt on the client side, then decrypt on server side.

answered Jun 17 '19 at 14:03

AntoineWtrd

1
2

Could you translate that into English? – Laurenz Albe Jun 17 '19 at 14:23
6

You need to learn more about security because you have no idea what you're talking about – Alon Eitan Jun 17 '19 at 17:04

Adding CSRFToken to Ajax request

9 Answers9

Linked

Related