Include CSRF Token into Angular App (LinemanJS)

Here is the token on a login request, we can see it's sent with the request as default.

If your using Lineman obviously the index page is index.us so it’s not PHP and you can’t simply echo the token out into the document head. And also Lineman runs on a port (default 9000) in development mode. So we need to somehow include our CSRF Token (Cross-site Request Forgery) both in development and in our production build. Also I discuss below if its a good idea to request the CSRF using a HTTP request.

Here is some config setup and a script to include the CSRF Token in your AngularJS app. This sets up the apiProxy to connect to our back-end which is running on localhost port 80 (on apache or such).

project/front-end/config/application.js

The front-end app.js file creates the main angular “app” module which injects our app resources etc … include this script which will setup our CSRF Token. It requests the token from the back-end and adds the token to the default headers of every AJAX request we make.

project/front-end/app/js/app.js

Laravel

To get the CSRF Token from Laravel we can add a function to our Auth controller which returns it in JSON.

project/back-end/app/js/controllers/AuthController.php

Then to check our token at the back-end we include a filter and apply it to specific routes.

project/back-end/app/filters.php

project/back-end/app/routes.php

Result.
Here is the token on a login request, we can see it’s sent with the request as default.

Here is the token on a login request, we can see it's sent with the request as default.

Requesting CSRF Token over HTTP (or not)

Ok so a few questions are floating around in my head:

1) Is a bad idea to request the token over http?
2) Is there additional overhead with having an extra http request on page load?

In development I don’t mind, but in production ideally I would like to to remove the need to have a HTTP request and simply include our CRSF Token in the document head on page load. So I have modified the script above to include a check for the token in the document head to negate the need to request the token.

project/front-end/app/js/app.js

However, you will need to create an index.php which replaces index.html so you can include the token. You will also need to tweak Laravel config to load this index file on load. I put it in the static folder so it gets build into the dist folder when you run ‘lineman build’.

project/front-end/app/static/index.php

To ensure all our requests are directed properly we will need to add a htaccess file to redirect requests to our front-end static assets and back-end api. The .htaccess used in my other post about Laravel 4 and AngularJS Architecture.

Result.
Inspecting the DOM you can see the token is now being inserted into the page.

Inspecting the DOM you can see the token is now being inserted into the page.

And in the development console we can see it’s being loaded from the meta tag (without the http request).

loaded from the meta tag (without the http request).

Conclusion

Hope this blog post helps you add some basic CSRF security into your web application.

refs:

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

2 thoughts on “Include CSRF Token into Angular App (LinemanJS)

Leave a Reply

Your email address will not be published. Required fields are marked *