CSRF token error on json update

Ruby on Rails
1

I’m trying to save a content through ajax by sending PATCH request to content/:id through ajax call like below.

   $.ajax '/contents/' + $('#main-editable-content').data('editable-id'),
            data:
              content:
                title: $('.editable[data-editable=title]').text()
                body: $('.editable[data-editable=body]').html()
            type: 'PATCH'
            dataType: 'json'
            error: (jqXHR, textStatus, errorThrown) ->
              alert('failed')
            success: (data, textStatus, jqXHR) ->
              alert('success')

and I get this error in my dev log.

Started PATCH "/contents/55" for 127.0.0.1 at 2013-08-23 17:03:26 +0530
Processing by ContentsController#update as JSON
  Parameters: {"content"=>{"title"=>"Hello worldHello worldHello worldHello worldHello world jhj", "body"=>"\n    <h1 class=\"editable\" data-editable=\"title\" style=\"border-style: solid; border-color: rgb(255, 255, 255);\" contenteditable=\"false\">Hello world<span style=\"line-height: 1.1;\">Hello world jhj</span></h1>\n    \n  \n  ", "authenticity_token"=>"2B1l1clm+L99t9JvCUrxZflydR8IOFx3wAkHC82pwn4="}, "id"=>"55"}
Can't verify CSRF token authenticity
Completed 422 Unprocessable Entity in 1ms

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

I tried this jquery - WARNING: Can't verify CSRF token authenticity rails - Stack Overflow but no luck. Also, interestingly, this error started appearing today while I was able to update the content through this code yesterday. Not sure what changed.

2

@shankard, the best way to handle this is to use Rails’ form_authenticity_token helper to insert a hidden input into your form, and then include an authenticity_token field in your form submission.

You can also embed a CSRF token in your form with this tag in your tag:

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

Then modify your jQuery above to include authenticity_token in your form. Note that the authenticity token should be part of data, and not a child of content. (If you inspect the params hash for a standard Rails form submission, the token is not part of the submitted record, it’s a top-level parameter).

Hope this helps.

3

Would you mind checking that this line is in your app/assets/javascripts/application.js?

//= require jquery_ujs

Basically, that file will set jQuery’s AJAX default to automatically include the authenticity token, so you don’t have to do it yourself.

Also, I notice that you are trying to construct the content of the request there. Do you think you can actually grouped that up into a form? There’s an awesome helper .serialize() from jQuery that should serialize the form for AJAX request for you.

4

@sikachu thanks for your reply. I just learned about what jqueryujs does after reading your post. Infact my application included jqueryujs but I had added a few other js after that line (timelinejs and its stuff) which seemed to have broken this. I disabled these libraries and I was able to it working.

I’m not using forms for editing the content, rather using contenteditable for it. So I cannot use serialize here.