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!):

You could simplify your readCookie function with this: `document.cookie.match("X-CSRF-Token=([^;]+)")[1]` — gabeodess, Jan 15 '19 at 15:41

score 6 · Answer 1 · answered Nov 09 '18 at 13:59

6

Tnx, I got your code working. I only needed to add decodeURIComponent()

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

I used this approach for a Progressive Web App with cached html. The default rails meta tag (<%= csrf_meta_tags %>) doesn't work with cached html.

This blog post also gives some other alternatives: https://www.fastly.com/blog/caching-uncacheable-csrf-security

answered Nov 09 '18 at 13:59

Barbara

116
1
4

Could you give some more details about how you reproduced this problem with cached html? I'm having the same issue (I believe) with my SPA. I'm setting the X-CSRF-Token in a header, but have recently received a huge spike of InvalidAuthenticityToken exceptions, I believe because some browser is caching HTML when the browser closes (and my cookie expires). – Matt Feb 23 '20 at 10:39

score 5 · Accepted Answer · answered May 08 '18 at 10:43

5

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.

answered May 08 '18 at 10:43

petkov.np

511
3
4

Are you sure about underscores in `X_CSRF_TOKEN`? – May 08 '18 at 10:48
It shouldn't matter too much as Rails most probably treats them the same - it's how I use it though so just to be on the safe side. Posting only when I know certainly it works :) – petkov.np May 08 '18 at 10:55
I think it is here in code: https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/request_forgery_protection.rb#L287 and I see hyphens... right? – May 08 '18 at 11:00
1

There is a lot going on under the hood, check https://github.com/rails/rails/blob/834be61e61a1ed55f056cdff12ffe4cdcaa7ca65/actionpack/lib/action_dispatch/http/request.rb#L47 as well - the headers in the request environment are all underscore, however they have already been processed.. I think it's safe to assume that 1. Using the header with hyphens is the preferred way and 2. Rails/rack seems to treat hyphens and underscores equally – petkov.np May 08 '18 at 11:41

score 1 · Answer 3 · answered Jul 02 '18 at 06:55

1

are you checkedreadCookie("X-CSRF-Token") value? the value probably is different when storing to cookie, probably the value escaped

answered Jul 02 '18 at 06:55

Agung Yuliaji

494
3
19

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

3 Answers3