protect_from_forgery & Unobtrusive Javascript protect_from_forgery & Unobtrusive Javascript ruby-on-rails ruby-on-rails

protect_from_forgery & Unobtrusive Javascript


In your layout, add this before any other JS runs:

<script>  function authToken() {    return '<%= form_authenticity_token if protect_against_forgery? -%>';  }</script>

authToken is coded as a function so that it's less likely you'll accidentally overwrite it with other JavaScript.

Alternatively, as of Rails 3, the auth token is embedded as a <meta> tag, which you can read with:

<script>  function authToken() {    return $('meta[name="csrf-token"]').attr('content');  }</script>

In your main JS, you can then call authToken(), and it'll return your authenticity token as a string to include in your Ajax calls. For example, using jQuery:

$.ajax({  type: 'PUT',  url:  url,  data: {    foo: bar,    authenticity_token: authToken()  },  complete: function(data) {}});

Note that if you use Rails' built-in form_for helper, it automatically adds the authenticity token in a hidden input. If you want to send all of the form's data, including the hidden auth token, you can simply use:

var $form = $('form');$.ajax({  url:      $form.attr('action'),  type:     $form.attr('method'),              // "get" or "post"; overridden by Rails' hidden "_method"              // input value, e.g., "put"  data:     $form.serialize(),              // Includes hidden "authenticity_token" and "_method" inputs  complete: function(data) {}});

This pattern is often useful when you've already written a form that works without JS, and you're adding an unobtrusive layer of JS that simply sends the form's data via Ajax.


Thanks for the above solution.
I am using some standard forms in my site that don't use the rails form_tag so instead I simply added it as a hidden form element.

<form action="...">    <%= hidden_field_tag 'authenticity_token', form_authenticity_token if protect_against_forgery? %>    ... rest of form...</form>

Works a treat.