Rails How to send an Authenticity Token in an Ajax Request without a form involved?

Question

For several reasons I need to send a post request to a controller via Ajax and I can't do it involving a form, it has to be a JS Ajax request written inside a file in assets > javascript or between tags.

I've written a function which seems to pass data correctly. However, it isn't passing a valid Authenticity Token, hence not allowing the request to go through.

Is there a way to comply with CSRF protection generating a token so the controller is happy with it?

So far my Ajax function is:

  var functionOne = function() {
  var $form = $('#'  + tinyMCE.activeEditor.formElement.id);
  var action = $form.attr('action')
  $.ajax({
    method: "POST",
    url: action,
    data: $form.serialize(),
    dataType: 'script',
  });
};

This form is passing the following params

{"utf8"=>"✓", "_method"=>"patch", "open_ender"=>
  {"answer_id"=>"4",
  "content"=>"<p>testing text</p>"},
  "id"=>"5"}

I've tried including the following line inside the Ajax object

authenticity_token: $('meta[name=csrf-token]').attr('content'),

and this in the application layout head without success

$(function(){
  $.ajaxSetup({
  headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') }
  });
});

UPDATE

Appart from Aniket's solution. Adding

authenticity_token: true

in the form options hash solved the issue as well

Aniket Rao · Accepted Answer · 2017-01-20T07:11:24.473

8

Just pass a hidden field with value of authenticity token inside of your form and that should work.

<%= f.hidden_field :authenticity_token, value: form_authenticity_token %>

OR

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

edited Jan 20 '17 at 07:11

answered Jan 20 '17 at 06:44

Aniket Rao

758
7
16

Hi Aniket, thanks it works. Although I'm using simple form I added the line above and Rails stopped complaining. However, now it's blaming about **ActionController::UnknownFormat**. This is strange since the form is set to remote: true and my controller is responding with JS and it works if I submit the form with the submit button. Any clues on what would be the issue. – alopez02 Jan 20 '17 at 07:08
1

By the way it seems that the issue CSRF issue is as well resolved by adding authenticity_token: true in the form's options hash. It may be something about the way tinyMCE works that is interfering with Rails default of creating an authenticity token. Clearly I'm too ignorant to know what the hell is happening! – alopez02 Jan 20 '17 at 07:10

score 0 · Answer 2 · answered Jan 20 '17 at 06:49

0

Use the below:

  var functionOne = function() {
  var $form = $('#'  + tinyMCE.activeEditor.formElement.id);
  $form = $form.append('<input type = hidden name = "authenticity_token" value = "<%= form_authenticity_token %>">')
  var action = $form.attr('action')
  $.ajax({
    method: "POST",
    url: action,
    data: $form.serialize(),
    dataType: 'script',
  });
};

answered Jan 20 '17 at 06:49

Chakreshwar Sharma

2,571
1
11
35

Chakreshwar, thanks a lot for your answer. I used previously Aniket's approach and it worked. I like the idea of appending the hidden field in the Ajax request to make it neater although it didn't work. Maybe I'm not appending exactly in the last filed or something. I tried to prepend as well without success. Fortunately is working now anyways. Thanks – alopez02 Jan 20 '17 at 07:13

Rails How to send an Authenticity Token in an Ajax Request without a form involved?

2 Answers2