Skip to content

Instantly share code, notes, and snippets.

@collectiveidea

collectiveidea/application.html.erb

Created August 21, 2009 19:59
Show Gist options
  • Save collectiveidea/172391 to your computer and use it in GitHub Desktop.
Save collectiveidea/172391 to your computer and use it in GitHub Desktop.
Download ZIP
How to get jQuery to work with Rail's Authenticity Token (protect_from_forgery)
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>My Rails App</title>
<%- if protect_against_forgery? -%>
<meta name="authenticity-token" id="authenticity-token" content="<%= form_authenticity_token %>" />
<%- end -%>
<%= javascript_include_tag 'jquery', 'rails' %>
</head>
<body>
<h1>Using jQuery with Rails' Authenticity Token</h1>
<p>
By putting the authenticity token in the head, we can easily grab it from JS.
</p>
</body>
</html>
Raw
rails.js
(function($) {
$.ajaxSettings.accepts.html = $.ajaxSettings.accepts.script;
$.authenticityToken = function() {
return $('#authenticity-token').attr('content');
};
$(document).ajaxSend(function(event, request, settings) {
if (settings.type == 'post') {
settings.data = (settings.data ? settings.data + "&" : "")
+ "authenticity_token=" + encodeURIComponent($.authenticityToken());
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
});
})(jQuery);
@benlieb
Copy link

benlieb commented Apr 5, 2020 •
edited
Loading

I had an awful time getting this to work, but ATM I'm on the "bleeding edge" and seeing the blood, using Rails 6, webpacker, React. The problem I was having was a combination of load order and the actual instance of jQuery being used inside of @rails/ujs (and also tried jquery-ujs). None of them worked for me.

I was trying to make $ available from inside my environment.js file... By the time the $ was made available inside my react components, it was no longer the same instance as what was used in the ujs files, so the config didn't "take".

My final "solution" that allowed my authenticity token to be sent properly from $.ajax in my react components was to import a "configured" $ manually like this:

utils/jquery.js:

import $ from 'jquery'

$(function(){
  // always pass csrf tokens on ajax calls
  $.ajaxSetup({
    headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') }
  });
});

export default $

And inside React component:

import $ from '../utils/jquery'

I'm far from convinced that this is the best way to do this, but after several wasted hours, I'm just happy to have ANY way that works. I'm leaving this up in case it's either helpful for someone else, or someone knows a better way to get this working...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment