Rails CSRF protection with Single Page Application (react, angular, ember)

Question

Ok. I officially lost my mind with this problem.

Let's take a default Rails application (5, but I tried also with a 4 default app).

I'm trying to use a simple javascript code to send an ajax POST request to one controller action.

In my ApplicationController I have this code:

class ApplicationController < ActionController::Base

  after_action :set_csrf_cookie

  protected

    def set_csrf_cookie
      cookies["X-CSRF-Token"] = form_authenticity_token
    end

end

which sets a cookie "X-CSRF-Token" with the value of form_authenticity_token.

After that I can read this cookie in my SPA (Single Page Application) using this code:

<script>
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === " ") c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

// var token = document.getElementsByName('csrf-token')[0].content; // this works!
const token = readCookie("X-CSRF-Token"); // this doesn't work!

fetch('/api/v1', {
  method: 'POST',
  body: {""},
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': token
  },
  credentials: 'include'
}).then(function(response) {
  return response.json();
});
</script>

When I use this line:

var token = document.getElementsByName('csrf-token')[0].content;

it works because it reads what Rails insert in html page with:

<%= csrf_meta_tags %>

<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="VXaKlO+/Gr/8pGhr5y0bThQ5L/0IDiznMR/9SpaoI6vOoF9KtmB5/9ka+Hz+zjyssNRi/Em/Ye27C+E5pl3odg==">

So the content of "csrf-token" works and my Rails application can validate CSRF.

This is the code from Rails source: https://github.com/rails/rails/blob/v5.2.0/actionpack/lib/action_controller/metal/request_forgery_protection.rb

When instead I use this line:

const token = readCookie("X-CSRF-Token");

it doesn't work and I get this error:

Started POST "/api/v1" for 172.18.0.1 at 2018-05-01 18:52:56 +0000
Processing by MyController#action as */*
  Parameters: {"body"=>{}}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms)
ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

Also if I use another page with another server (npm http-server or Microsoft IIS or others) with the same script the problem is the same.

If I copy the content of "csrf-token" from Rails html page and use this line in my Javascript script:

const token = "VXaKlO+/Gr/8pGhr5y0bThQ5L/0IDiznMR/9SpaoI6vOoF9KtmB5/9ka+Hz+zjyssNRi/Em/Ye27C+E5pl3odg==";

it WORKS!

So my question is: WHY?

---

What I have read (nut nothing!):

• https://github.com/equivalent/scrapbook2/blob/master/archive/blogs/2017-10-12-csrf-protection-on-single-page-app-api.md
• Invalid Auth Token with Rails, Graphql, Apollo Client
• https://www.bhalash.com/archives/13544808782
• Rails CSRF Protection + Angular.js: protect_from_forgery makes me to log out on POST
• https://technpol.wordpress.com/2014/04/17/rails4-angularjs-csrf-and-devise/
• Work with authenticity token? Or disable it?
• Rails API design without disabling CSRF protection

Answer 1

The name of the header Rails expects is X_CSRF_TOKEN (note the underscores). I don't see a problem with the rest of the code you've shared - except maybe that the token from the cookie must be URI decoded (decodeURIComponent), so check this as well if you still get the warning.