Inject Laravel 4 CSRF Token into AngularJS

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.

 

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.

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.

Conclusion:

So these are the Inject Laravel 4 CSRF Token into AngularJS.If you like this tutorial script then share it with your community. If you have any suggestion Feel free to comment below.If you want to learn more about PHPCodeIgniterAngularJSLaraveljQuery  Web Development then daily visit PHPCodify. Sharing is Caring.

Inject Laravel 4 CSRF Token into AngularJS

Read previous post:
angularjs logo
AngularJS 2 Google Trends

AngularJS 2 Google Trends  I always keep my eye on Google trends, especially in “coding land”. Here is whats happening...

Close