WARNING: Can't verify CSRF token authenticity

Question

I'm having trouble making a cross-domain request from my shopify site to my rails app, which is installed as a shopify app. The problem, as stated in the title, is that my server warns me that it Can't verify CSRF token authenticity I'm making the request from a form returned by my rails app, which includes the relevant CSRF token. The request is done with jQuery's ajax method, and the preflight OPTIONS request is being handled by rack-cors.

I've included the X-CSRF-Token in my headers as was suggested in this answer. My post request is being made from a form, so my question is not answered here. The options request (mentioned in this question) is indeed being handled, as I just confirmed by asking this question. I've been stuck on this for a while, and have done a bit of reading.

I'm going to try walking through the process code-snippet by code-snippet, and maybe by the time I finish writing this post I will have discovered the answer to my problem (if that happens, then you won't ever get a chance to read this paragraph).

Here are the new and create methods from my controller.

class AustraliaPostApiConnectionsController < ApplicationController

  # GET /australia_post_api_connections/new
  # GET /australia_post_api_connections/new.json
  def new
    # initializing variables

    respond_to do |format|
      puts "---------------About to format--------------------"
      format.html { render layout: false } # new.html.erb 
      format.json { render json: @australia_post_api_connection }
    end
  end

  # POST /australia_post_api_connections
  # POST /australia_post_api_connections.json
  def create

    @australia_post_api_connection = AustraliaPostApiConnection.new(params[:australia_post_api_connection])

    respond_to do |format|
      if @australia_post_api_connection.save

        format.js { render layout: false }
      else

        format.js { render layout: false }
      end
    end
  end
end

(I wonder about the respond_to block in the create method, but I don't think that would cause the CSRF token to fail verification.)

Within my app, at /AUSController/index, I have an ajaxified GET request that brings back the form from /AUSController/new. My goal is to be able to make all the same calls from a cross-domain origin as I can from within my app. Right now the GET request works for both, and so I will neglect to include the 'new' form. When the HTML is finally rendered, the form element has the following:

<form method="post" id="new_australia_post_api_connection" data-remote="true" class="new_australia_post_api_connection" action="http://localhost:3000/australia_post_api_connections" accept-charset="UTF-8">

<!-- a bunch more fields here -->

    <div class="field hidden">
      <input type="hidden" value="the_csrf_token" name="authenticity_token" id="tokentag">
    </div>
  </div>
</div>
</form>

The CSRF token is generated by a call to form_authenticity_token as detailed in one of the references mentioned above.

The next step is done differently in the two cases:

My app successfully returns the new form to the shop upon an ajax request. I've tested this within the app, that is by making an ajax call to /controller/new from /controller/index, and then submitting the form. This works like a charm. The js that is returned from a successful POST within my app is as follows:

/ this is rendered when someone hits "calculate" and whenever the country select changes
:plain
  $("#shipping-prices").html("#{escape_javascript(render(:partial => 'calculations', :object => @australia_post_api_connection))}")

Which renders the following partial,

= form_tag "/shipping_calculations", :method => "get" do

  = label_tag :shipping_type
  %br
  - @service_list.each_with_index do |service, index|
    - checked = true if index == 0
    = radio_button_tag(:shipping_type, service[:code], checked)
    = label_tag(:"shipping_type_#{service[:code]}", service[:name])
    = " -- $#{service[:price]}"
    %br

When I call it from the same domain, request.header contains the following:

HTTP_X_CSRF_TOKEN
the_token_I_expect=

rack.session
{
  "session_id"=>"db90f199f65554c70a6922d3bd2b7e61", 
  "return_to"=>"/", 
  "_csrf_token"=>"the_token_I_expect=", 
  "shopify"=>#<ShopifyAPI::Session:0x000000063083c8 @url="some-shop.myshopify.com", @token="some_token">
}

And the HTML is rendered and displayed nicely.

From the cross domain source, however, things are understandibly more complicated. This is where CORS and CSRF tokens and routes and all these little details start creeping in. In particular, when I make the ajax call I use the following script (which does not live in my rails app, it lives on the cross-domain server). The action of this ajax request is attached to the submit button by the callback function from the GET request, and I've included the GET request for the sake of completion.

<script>

  var host = "http://localhost:3000/"
  var action = "australia_post_api_connections"

  console.log("start")
  $.ajax({
    url: host + action,
    type: "GET",
    data: { weight: 20 },
    crossDomain: true,
    xhrFields: {
      withCredentials: true
    },
    success: function(data) {
      console.log("success");
      $('#shipping-calculator').html(data);

      $('#new_australia_post_api_connection')
      .attr("action", host + action);

    $('.error').hide();

    $(".actions > input").click(function() {
      console.log("click")
      // validate and process form here
      $('.error').hide();

      var to_postcode = $("input#australia_post_api_connection_to_postcode").val();

      // client side validation
      if (to_postcode === "") {
        $("#postcode > .error").show();
        $("input#australia_post_api_connection_to_postcode").focus();
        return false;
      }

      tokentag = $('#tokentag').val()

      var dataHash = {
        to_postcode: to_postcode,
        authenticity_token: tokentag // included based on an SO answer
      }

      // included based on an SO answer
      $.ajaxSetup({
        beforeSend: function(xhr) {
          xhr.setRequestHeader('X-CSRF-TOKEN', tokentag);
        }
      });

      $.ajax({
        type: "POST",
        url: host + action,
        data: dataHash,
        success: function(data) {
          $('#shipping-prices').html(data);
        }
      }).fail(function() { console.log("fail") })
        .always(function() { console.log("always") })
        .complete(function() { console.log("complete") });
      return false;

    });

    }
  }).fail(function() { console.log("fail") })
  .always(function() { console.log("always") })
  .complete(function() { console.log("complete") });

  $(function() {
  });

</script>

However, when I call it from this remote location (the distant slopes of Shopify), I find the following in my request headers,

HTTP_X_CSRF_TOKEN
the_token_I_expect=

rack.session
{ }

And I receive a very unpleasant NetworkError: 500 Internal Server Error rather than the 200 OK! that I would like... On the server side we find the logs complaining that,

Started POST "/australia_post_api_connections" for 127.0.0.1 at 2013-01-08 19:20:25 -0800
Processing by AustraliaPostApiConnectionsController#create as */*
  Parameters: {"weight"=>"20", "to_postcode"=>"3000", "from_postcode"=>"3000", "country_code"=>"AUS", "height"=>"16", "width"=>"16", "length"=>"16", "authenticity_token"=>"the_token_I_expect="}
WARNING: Can't verify CSRF token authenticity
Completed 500 Internal Server Error in 6350ms

AustraliaPostApiConnection::InvalidError (["From postcode can't be blank", "The following errors were returned by the Australia Post API", "Please enter Country code.", "Length can't be blank", "Length is not a number", "Height can't be blank", "Height is not a number", "Width can't be blank", "Width is not a number", "Weight can't be blank", "Weight is not a number"]):
  app/models/australia_post_api_connection.rb:78:in `save'

The lack of a rack.session seems suspicious like the cause of my misery... but I haven't been able to find a satisfying answer.

Finally I have seen fit to include my rack-cors setup, in case it is useful.

# configuration for allowing some servers to access the aus api connection
config.middleware.use Rack::Cors do
  allow do
    origins 'some-shop.myshopify.com'
    resource '/australia_post_api_connections',
      :headers => ['Origin', 'Accept', 'Content-Type', 'X-CSRF-Token'],
      :methods => [:get, :post]
  end
end

Thank you so much for even reading all of this. I hope the answer has to do with that empty rack.session. That would be satisfying, at least.

Answer 1

Well one of my coworkers figured it out. The problem was, the has I was sending didn't have the same structure as the hash I was expecting in my controller.

In my controller I instantiate a new API connection as follows,

AustraliaPostApiConnection.new(params[:australia_post_api_connection])

I am looking for params[:australia_post_api_connection], but there is no such index in my data hash, which looks like,

var dataHash = {
  to_postcode: to_postcode,
  authenticity_token: tokentag // included based on an SO answer
}

To fix this I changed the JS file to contain,

var dataHash = {
  to_postcode: to_postcode,
}

var params = {
  australia_post_api_connection: dataHash,
  authenticity_token: tokentag // included based on an SO answer
}

And now it works! Thanks co-worker!