CSRF token in angular is different of Laravel 5

Question

I have a project split up in backend and frontend, the backend (API rest) is built in Laravel 5 and frontend in AngularJS. Both project are independent and they are supposed to be hosted on different servers.

In the first request I obtain the CSRF token from Laravel with this code:

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "http://laravel.local/api/token", false);
xhReq.send(null);
angular.module('mytodoApp').constant('CSRF_TOKEN',xhReq.responseText);

So the CSRF_TOKEN is sent each time that I make a request to API, like this:

    $scope.deleteTodo = function(index) {
    $scope.loading = true;
    var todo = $scope.tours[index];
    $http.defaults.headers.common['XSRF-TOKEN'] = CSRF_TOKEN;
    console.log($http.defaults.headers.common['XSRF-TOKEN']);
    $http.delete('http://laravel.local/api/deleteTodo/' + todo.id, {headers : {'XSRF-TOKEN': CSRF_TOKEN}})
        .success(function() {
            $scope.todos.splice(index, 1);
            $scope.loading = false;

        });

The API always return:

TokenMismatchException in compiled.php line 2440:

Is it right that Laravel changes the CSRF Token with every request from Angular? On every request, Laravel creates a new file on storage/framework/sessions. Do you recommend any other solution to validate that requests to API come from a safe origin?

angular has built in token handling for $http..read the docs — charlietfl

Omkar Gokhale Omkar Gokhale · Accepted Answer · 2015-05-21T10:54:07

In token-based authentication, cookies and sessions will not be used. A token will be used for authenticating a user for each request to the server. It will use the following flow of control:

The user provides a username and password in the login form and clicks Log In.
After a request is made, validate the user on the backend by querying in the database. If the request is valid, create a token by using the user information fetched from the database, and then return that information in the response header so that we can store the token browser in local storage.
Provide token information in every request header for accessing restricted endpoints in the applications.

4.request header information is valid, let the user access the specified end point, and respond with JSON or XML.

This Can be Achieved by Jwt (Json web Token).got this information from This link.

So, what is this JWT?

JWT

JWT stands for JSON Web Token and is a token format used in authorization headers. This token helps you to design communication between two systems in a secure way. Let's rephrase JWT as the "bearer token" for the purposes of this tutorial. A bearer token consists of three parts: header, payload, and signature.

The header is the part of the token that keeps the token type and encryption method, which is also encrypted with base-64
The payload includes the information. You can put any kind of data like user info, product info and so on, all of which is stored with base-64 encryption.
The signature consists of combinations of the header, payload, and secret key. The secret key must be kept securely on the server-side.

The tutorial with example can be Found here Token-Based Authentication With AngularJS & NodeJS.

Hope that this will solve your problem,All the Best!!

CSRF token in angular is different of Laravel 5

1 Answers