I am sending data from view to controller with AJAXand I got this error:

WARNING: Can't verify CSRF token authenticity

I think I have to send this token with data.

Does anyone know how can I do this ?

Edit: My solution

I did this by putting the following code inside the AJAX post:

headers: {
  'X-Transaction': 'POST Example',
  'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
6 upvote
  flag
do you have <%= csrf_meta_tag %> in your layout header? – Anatoly
upvote
  flag
yes like this : <%= csrf_meta_tags %> – kbaccouche
6 upvote
  flag
do you have jquery-rails libraries that provide ajax client-side functionality? – Anatoly
2 upvote
  flag
And the HAML way is to add "= csrf_meta_tags" – Ege Akpinar
upvote
  flag
nice question, thanks for asking – AMIC MING
upvote
  flag
What does the 'X-Transaction' line do? Seems to work fine without it. – MSC

16 Answers 11

If I remember correctly, you have to add the following code to your form, to get rid of this problem:

<%= token_tag(nil) %>

Don't forget the parameter.

upvote
  flag
I have this error : wrong number of arguments (0 for 1) – kbaccouche
8 upvote
  flag
Actually, this should be: <%= token_tag(nil) %>. Then you get the auto-generated token. – szeryf
upvote
  flag
Thank you szeryf. – datnt
up vote 326 down vote accepted

You should do this:

  1. Make sure that you have <%= csrf_meta_tag %> in your layout

  2. Add beforeSend to all the ajax request to set the header like below:


$.ajax({ url: 'YOUR URL HERE',
  type: 'POST',
  beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
  data: 'someData=' + someData,
  success: function(response) {
    $('#someDiv').html(response);
  }
});

To send token in all requests you can use:

$.ajaxSetup({
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
});
4 upvote
  flag
Thanks! Worked for me like a charm! – Misha Moroshko
30 upvote
  flag
The jQuery UJS library provided by the Rails team adds the CSRF token to jQuery AJAX request automatically. The README contains instructions on how to get setup. github.com/rails/jquery-ujs/blob/master/src/rails.js#L91 – James Conroy-Finn
1 upvote
  flag
Note that you can set the header for all requests at once with the $.ajaxSetup function. – Pieter Jongsma
upvote
  flag
Excellent! Been searching for a while for this answer. Works seamlessly. Thanks! – cassi.lup
upvote
  flag
@JamesConroy-Finn This stopped working in Rails 4. Still trying to figure out why. – Trip
upvote
  flag
Unfortunatly, this solution doesn't work in Rails 4.2.x. – blackst0ne
upvote
  flag
As a note, if you are using jQuery UJS as suggested above, you need to ensure that the rails-ujs include comes after the jquery include or it will fail with the same error as the op. – Topher Fangio

I just thought I'd link this here as the article has most of the answer you're looking for and it's also very interesting

http://www.kalzumeus.com/2011/11/17/i-saw-an-extremely-subtle-bug-today-and-i-just-have-to-tell-someone/

The best way to do this is actually just use <%= form_authenticity_token.to_s %> to print out the token directly in your rails code. You dont need to use javascript to search the dom for the csrf token as other posts mention. just add the headers option as below;

$.ajax({
  type: 'post',
  data: $(this).sortable('serialize'),
  headers: {
    'X-CSRF-Token': '<%= form_authenticity_token.to_s %>'
  },
  complete: function(request){},
  url: "<%= sort_widget_images_path(@widget) %>"
})
7 upvote
  flag
Instead of doing this for each ajax command, you could add headers to $.ajaxSetup(). – Scott McMillin
upvote
  flag
use $.ajaxPrefilter instead. – jeef3
1 upvote
  flag
I'd rather recommend using this answer... – opsidao
13 upvote
  flag
I don't really like the approach of using ERB in the javascript. – radixhound
upvote
  flag
This forces you to generate your javascript with ERB, which is very limiting. Even if there are places where ERB might be a good fit, there are others where it's not, and adding it just to get the token would be a waste. – sockmonk

Ugrading from an older app to rails 3.1, including the csrf meta tag is still not solving it. On the rubyonrails.org blog, they give some upgrade tips, and specifically this line of jquery which should go in the head section of your layout:

$(document).ajaxSend(function(e, xhr, options) {
 var token = $("meta[name='csrf-token']").attr("content");
  xhr.setRequestHeader("X-CSRF-Token", token);
});

taken from this blog post: http://weblog.rubyonrails.org/2011/2/8/csrf-protection-bypass-in-ruby-on-rails.

In my case, the session was being reset upon each ajax request. Adding the above code solved that issue.

If you're using javascript with jQuery to generate the token in your form, this works:

<input name="authenticity_token" 
       type="hidden" 
       value="<%= $('meta[name=csrf-token]').attr('content') %>" />

Obviously, you need to have the <%= csrf_meta_tag %> in your Ruby layout.

if someone needs help related with Uploadify and Rails 3.2 (like me when I googled this post), this sample app may be helpful: https://github.com/n0ne/Uploadify-Carrierwave-Rails-3.2.3/blob/master/app/views/pictures/index.html.erb

also check the controller solution in this app

Indeed simplest way. Don't bother with changing the headers.

Make sure you have:

<%= csrf_meta_tag %> in your layouts/application.html.erb

Just do a hidden input field like so:

<input name="authenticity_token" 
               type="hidden" 
               value="<%= form_authenticity_token %>"/>

Or if you want a jQuery ajax post:

$.ajax({     
    type: 'POST',
    url: "<%= someregistration_path %>",
    data: { "firstname": "text_data_1", "last_name": "text_data2", "authenticity_token": "<%= form_authenticity_token %>" },                                                                                  
    error: function( xhr ){ 
      alert("ERROR ON SUBMIT");
    },
    success: function( data ){ 
      //data response can contain what we want here...
      console.log("SUCCESS, data="+data);
    }
});
upvote
  flag
Adding the hidden input field to my input form solved the problem for me. – Teemu Leisti

For those of you that do need a non jQuery answer you can simple add the following:

xmlhttp.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));

A very simple example can be sen here:

xmlhttp.open("POST","example.html",true);
xmlhttp.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
xmlhttp.send();
5 upvote
  flag
Does this not use jQuery for selectors? – Yule

nop

I missed the following line in my application.js

//= require jquery_ujs

I replaced it and its working..

upvote
  flag
This was what I needed to do as well. The reason this came up is because I'm building a React App to slowly replace an existing Rails App. Since there's a bunch of javascript noise going on in the existing app, I created a different layout that accesses a different javascript file, but I failed to include jquery_ujs. That was the trick. – Wylliam Judd

You can write it globally like below.

Normal JS:

$(function(){

    $('#loader').hide()
    $(document).ajaxStart(function() {
        $('#loader').show();
    })
    $(document).ajaxError(function() {
        alert("Something went wrong...")
        $('#loader').hide();
    })
    $(document).ajaxStop(function() {
        $('#loader').hide();
    });
    $.ajaxSetup({
        beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}
    });
});

Coffee Script:

  $('#loader').hide()
  $(document).ajaxStart ->
    $('#loader').show()

  $(document).ajaxError ->
    alert("Something went wrong...")
    $('#loader').hide()

  $(document).ajaxStop ->
    $('#loader').hide()

  $.ajaxSetup {
    beforeSend: (xhr) ->
      xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
  }

The top voted answers here are correct but will not work if you are performing cross-domain requests because the session will not be available unless you explicitly tell jQuery to pass the session cookie. Here's how to do that:

$.ajax({ 
  url: url,
  type: 'POST',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
  },
  xhrFields: {
    withCredentials: true
  }
});
  1. Make sure that you have <%= csrf_meta_tag %> in your layout
  2. Add a beforeSend to include the csrf-token in the ajax request to set the header. This is only required for post requests.

The code to read the csrf-token is available in the rails/jquery-ujs, so imho it is easiest to just use that, as follows:

$.ajax({
  url: url,
  method: 'post',
  beforeSend: $.rails.CSRFProtection,
  data: {
    // ...
  }
})
upvote
  flag
Simple without re-implementing what's already included by Rails. This should be the selected answer. – jiehanzheng

I'm using Rails 4.2.4 and couldn't work out why I was getting:

Can't verify CSRF token authenticity

I have in the layout:

<%= csrf_meta_tags %>

In the controller:

protect_from_forgery with: :exception

Invoking tcpdump -A -s 999 -i lo port 3000 was showing the header being set ( despite not needing to set the headers with ajaxSetup - it was done already):

X-CSRF-Token: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
DNT: 1
Content-Length: 125
authenticity_token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

In the end it was failing because I had cookies switched off. CSRF doesn't work without cookies being enabled, so this is another possible cause if you're seeing this error.

If you are not using jQuery and using something like fetch API for requests you can use the following to get the csrf-token:

document.querySelector('meta[name="csrf-token"]').getAttribute('content')

fetch('/users', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')},
    credentials: 'same-origin',
    body: JSON.stringify( { id: 1, name: 'some user' } )
    })
    .then(function(data) {
      console.log('request succeeded with JSON response', data)
    }).catch(function(error) {
      console.log('request failed', error)
    })

Use jquery.csrf (https://github.com/swordray/jquery.csrf).

  • Rails 5.1 or later

    $ yarn add jquery.csrf
    
    //= require jquery.csrf
    
  • Rails 5.0 or before

    source 'https://rails-assets.org' do
      gem 'rails-assets-jquery.csrf'
    end
    
    //= require jquery.csrf
    
  • Source code

    (function($) {
      $(document).ajaxSend(function(e, xhr, options) {
        var token = $('meta[name="csrf-token"]').attr('content');
        if (token) xhr.setRequestHeader('X-CSRF-Token', token);
      });
    })(jQuery);
    

upvote
  flag
In 5.1 using webpack, //= require jquery.csrf isn't going to work, right?. Instead I used pack js file with import 'jquery.csrf' in it. Note you do not need to include this with a pack tag in your views. – Damien Justin Šutevski

Not the answer you're looking for? Browse other questions tagged or ask your own question.