Inject Laravel 4 CSRF Token into AngularJS

At some point you might want to add some basic security to your AngularJS web application. Assuming your reading this because your using Laravel 4 for your back-end. So, you can use the built in CSRF protection which Laravel provides out of the box! When your web application starts you can bootstrap your main AngularJS module with a CSRF token as a constant and send it with every AJAX/HTTP request you make to your back-end to authenticate the client.

I have seen a whole heap of different methods to do this, and it all depends on your preference and what web technologies your using. For example, you could like using cookies or could be using AMD/Require.js with Angular. You may not even be using Laravel, you could be using something different PHP or even node.js. I also cover below different ways to create and Handling CSRF Tokens in Laravel 4.

Note: If your using LinemanJS see this post on how to direct the CSRF token using apiProxy in Lineman.

Example 1 – Inject using a META tag and ng-init

One way to inject server side values into AngularJS is to use ng-init (binds to the scope in which it is declared, in our case it’s the root scope) So when we load our application it will put the csrf_token on our root scope (ng-app=”app”). Doing it this way we can avoid making an extra HTTP request for the token when our application loads.

The meta tag goes into the head of your index file.

We can then access it using the following (usually into our ng authentication service where we can ask for it with our login credentials): $scope.csrf_token;

Alternatively.

Instead of using ng-init you read the value directly into your app. For example, store the token in a meta tag then adds it to the headers of every request. You can do this by setting the $http provider to include the token in the request header:

Then to load into the header requests:

Example 2 – Inject using Angular constant

Another way to inject the CSRF token is to use a script to set a constant on your AngularJS app module.

As you may know constants are injectable dependencies in AngularJS so you can then reference the token like this:

Example 3 – Inject using a HTTP Request

This example could be useful if your front-end is entirely seperate from your back-end and you wish to inject the CSRF token into your AngularJS application on load.

Then you can inject the CSRF_TOKEN as a constant in your authentication service just as shown in example 2. Credit to David Mosher’s Gist for this one thanks mate.

Creating and Handling CSRF Tokens in Laravel 4

So the front-end is done, here is a bunch of different ways to create and handle CSRF tokens in Laravel 4. They use Laravel 4 filters and apply those filters to specific routes to secure your application.

Example 1 – Extract CSRF token from JSON

Laravel 4 - app/filters.php

Laravel 4 - app/routes.php

Source

Example 2 – Extract CSRF token from Request Header

Laravel 4 - app/filters.php

Laravel 4 - app/routes.php

Source.

Others solutions

Include in Laravel router example 1

Source

Include in Laravel router example 2

Source

Notes:

You will also need to set an Encryption key in your app/config/app.php file. This key is used to create unique csrf tokens with a session (it essentially uses the key as hash). You can generate this key by running this command: php artisan key:generate.

further reading

Sam is a passionate web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and reading.

5 thoughts on “Inject Laravel 4 CSRF Token into AngularJS

  1. Hello, you can inject te csrf token on every request, create a CSRF_TOKEN constant and…

    angular.module(‘miApp’)

    .factory(‘RequestInterceptor’, [‘CSRF_TOKEN’, function(CSRF_TOKEN) {

    var requestInterceptor = {

    request: function(config) {

    config.headers[‘x-session-token’] = CSRF_TOKEN._token;

    return config;

    }

    };

    return requestInterceptor;

    }])

    .config([‘$httpProvider’, function($httpProvider) {

    $httpProvider.defaults.useXDomain = true;

    $httpProvider.interceptors.push(‘RequestInterceptor’);

    }]);

Leave a Reply

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