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

User · Answer

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")
            }
        });
    });

});

User · Answer

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

User · Answer

This worked for me  using jQuery 2 1     document  ajaxSend function elm  xhr  s       if  s type     POST             s data    s data   amp               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

User · Answer

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             lt form method  POST  gt               lt button id     post- gt id    class  btn btn-danger btn-sm pull-right destroy  type  button   gt eliminar lt  button gt             lt  form gt         endforeach

User · Answer

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

User · Answer

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

User · Answer

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  amp  amp  document cookie                              var cookies   document cookie split                           for  var i   0  i  lt  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   amp  amp   this crossDomain                            xhr setRequestHeader  X-CSRFToken   csrftoken                                                                          ajax                        type   POST                        url    url

User · Answer

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

User · Answer

From JSP    lt form method  post  id  myForm  action  someURL  gt       lt input name  csrfToken  value  5965f0d244b7d32b334eff840   etc  type  hidden  gt       lt  form gt    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

[javascript] Adding CSRFToken to Ajax request

Examples related to javascript

Examples related to jquery

Examples related to ajax