WARNING: Can't verify CSRF token authenticity rails

Question

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')
},

do you have **jquery-rails** libraries that provide ajax client-side functionality? — Anatoly, Aug 26 '11 at 10:43
What does the 'X-Transaction' line do? Seems to work fine without it. — MSC, Jul 09 '16 at 04:33
May I ask you if you can answer this very similar question? https://stackoverflow.com/questions/50159847/single-page-application-and-csrf-token — , May 06 '18 at 19:40

score 409 · Accepted Answer · edited May 11 '13 at 03:35

409

You should do this:

Make sure that you have <%= csrf_meta_tag %> in your layout
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')
  }
});

edited May 11 '13 at 03:35

sites

21,417
17
87
146

answered Nov 17 '11 at 23:42

Chau Hong Linh

4,106
1
14
4

37

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. https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L91 – James Conroy-Finn Sep 02 '12 at 10:53
1

Note that you can set the header for all requests at once with the $.ajaxSetup function. – Pieter Jongsma Feb 24 '13 at 12:50
1

Excellent! Been searching for a while for this answer. Works seamlessly. Thanks! – cassi.lup Apr 30 '13 at 19:27
@JamesConroy-Finn This stopped working in Rails 4. Still trying to figure out why. – Trip Apr 13 '15 at 21:23
Unfortunatly, this solution doesn't work in Rails 4.2.x. – blackst0ne Jun 23 '15 at 08:21
4

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 Sep 12 '17 at 16:43
May I ask you if you can answer this very similar question? https://stackoverflow.com/questions/50159847/single-page-application-and-csrf-token – May 06 '18 at 19:40

score 31 · Answer 2 · answered Nov 25 '11 at 10:15

31

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

answered Nov 25 '11 at 10:15

ADAM

3,903
4
29
45

7

Instead of doing this for each ajax command, you could add **headers** to [$.ajaxSetup()](http://api.jquery.com/jQuery.ajaxSetup/). – Scott McMillin Nov 29 '11 at 01:29
1

I'd rather recommend using [this answer](http://stackoverflow.com/a/8798687/164989)... – opsidao Jul 23 '12 at 11:11
18

I don't really like the approach of using ERB in the javascript. – radixhound Jul 27 '12 at 21:39
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 Apr 03 '14 at 23:36

score 22 · Answer 3 · edited Jun 05 '15 at 08:14

22

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.

edited Jun 05 '15 at 08:14

ciruvan

5,143
1
26
32

answered Aug 26 '11 at 10:34

auralbee

8,741
4
29
36

8

Actually, this should be: `<%= token_tag(nil) %>`. Then you get the auto-generated token. – szeryf May 16 '12 at 19:54

score 15 · Answer 4 · edited May 06 '13 at 19:07

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

Adding the hidden input field to my input form solved the problem for me. — Teemu Leisti, Sep 28 '14 at 21:36

score 13 · Answer 5 · answered Jan 10 '12 at 04:48

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.

score 10 · Answer 6 · answered Jul 08 '15 at 11:47

10

Make sure that you have <%= csrf_meta_tag %> in your layout
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: {
    // ...
  }
})

answered Jul 08 '15 at 11:47

nathanvda

49,707
13
117
139

Simple without re-implementing what's already included by Rails. This should be the selected answer. – jiehanzheng Feb 01 '17 at 03:34
In Rails 5.1 also works: `headers: { 'X-CSRF-Token': Rails.csrfToken() }` – olhor Mar 15 '18 at 22:09
@nathanvda, Maybe you can answer this similar question: https://stackoverflow.com/questions/50159847/single-page-application-and-csrf-token – May 06 '18 at 22:47

score 7 · Answer 7 · answered Nov 23 '14 at 00:32

7

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

answered Nov 23 '14 at 00:32

dreadwail

15,098
21
65
96

May I ask you if you can answer this very similar question? https://stackoverflow.com/questions/50159847/single-page-application-and-csrf-token – May 06 '18 at 19:41

Abhi · Answer 8 · 2018-05-02T15:38:36.300

6

oops..

I missed the following line in my application.js

//= require jquery_ujs

I replaced it and its working..

======= UPDATED =========

After 5 years, I am back with Same error, now I have brand new Rails 5.1.6, and I found this post again. Just like circle of life.

Now what was the issue is: Rails 5.1 removed support for jquery and jquery_ujs by default, and added

//= require rails-ujs in application.js

It does the following things:

force confirmation dialogs for various actions;
make non-GET requests from hyperlinks;
make forms or hyperlinks submit data asynchronously with Ajax;
have submit buttons become automatically disabled on form submit to prevent double-clicking. (from: https://github.com/rails/rails-ujs/tree/master)

But why is it not including the csrf token for ajax request? If anyone know about this in detail just comment me. I appreciate that.

Anyway I added the following in my custom js file to make it work (Thanks for other answers to help me reach this code):

$( document ).ready(function() {
  $.ajaxSetup({
    headers: {
      'X-CSRF-Token': Rails.csrfToken()
    }
  });
  ----
  ----
});

edited May 02 '18 at 15:38

answered Dec 25 '13 at 13:42

Abhi

3,361
2
33
38

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 Sep 26 '17 at 20:46
1

Yes, Sometimes If we miss that when rework, refactor something..Its hard to find whats going wrong. Because we are not doing anything manually to make it work, Rails automatically including it. We think it already there. Thanks for such social Qn / Ans Sites – Abhi Apr 19 '18 at 10:12
Maybe you can answer this similar question: https://stackoverflow.com/questions/50159847/single-page-application-and-csrf-token – May 06 '18 at 22:46

score 6 · Answer 9 · edited Jun 01 '15 at 17:51

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'))
  }

score 6 · Answer 10 · answered Sep 05 '16 at 02:45

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

May I ask you if you can answer this very similar question? https://stackoverflow.com/questions/50159847/single-page-application-and-csrf-token — , May 06 '18 at 19:42

score 6 · Answer 11 · answered Nov 18 '11 at 00:11

6

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/

answered Nov 18 '11 at 00:11

sciritai

3,688
1
17
22

swordray · Answer 12 · 2017-03-31T11:02:08.747

4

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

edited Mar 31 '17 at 11:02

answered Mar 31 '17 at 10:55

swordray

833
9
21

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 May 13 '17 at 02:34

score 3 · Answer 13 · edited Jan 26 '16 at 16:54

3

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.

edited Jan 26 '16 at 16:54

Gupta

8,882
4
49
59

answered Apr 25 '12 at 19:52

Tim Scollick

1,242
1
16
17

score 3 · Answer 14 · answered Feb 05 '18 at 22:07

I struggled with this issue for days. Any GET call was working correctly, but all PUTs would generate a "Can't verify CSRF token authenticity" error. My website was working fine until I had added a SSL cert to nginx.

I finally stumbled on this missing line in my nginx settings:

location @puma { 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $http_host; 
    proxy_redirect off;
    proxy_set_header X-Forwarded-Proto https;   # Needed to avoid 'WARNING: Can't verify CSRF token authenticity'
    proxy_pass http://puma; 
}

After adding the missing line "proxy_set_header X-Forwarded-Proto https;", all my CSRF token errors quit.

Hopefully this helps someone else who also is beating their head against a wall. haha

score 2 · Answer 15 · answered Oct 29 '13 at 02:24

2

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();

answered Oct 29 '13 at 02:24

Mek

29
1

8

Does this not use jQuery for selectors? – Yule Jun 29 '15 at 15:19
xmlhttp.setRequestHeader('X-CSRF-Token', document.querySelector('meta[name="csrf-token"]').content); – Jared Menard Oct 04 '21 at 19:31

score 1 · Answer 16 · answered Jan 12 '13 at 22:38

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

score 0 · Answer 17 · answered Nov 12 '15 at 09:53

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.

WARNING: Can't verify CSRF token authenticity rails

17 Answers17

Linked

Related