How to send csrf_token() inside AngularJS form using Laravel API?

Question

I am trying to build an angular + laravel rest application. I can get the views of my database. When I try to add new items. I get 500 error telling me mismatch

Answer 1

the accepted solution by Rubens Mariuzzo works, however I think that I have found an alternative solution which I think is better.

This way you don't have to pass data from the html script into your angularjs app and there is a better separation of concerns. E.g. This allows you to have your Laravel APP as just an API.

My solution involves getting the CSRF token via an api request and setting this value as a constant.

Further, instead of injecting the CSRF token when needed, you set the token in a default header which would get checked by the server upon any API http request.

Example shows laravel, however any serious framework should be able to offer something similar.

CSRF Route in LARAVEL:

// Returns the csrf token for the current visitor's session.
Route::get('api/csrf', function() {
    return Session::token();
});

Protecting Routes with the before => 'api.csrf' Filter

// Before making the declared routes available, run them through the api.csrf filter
Route::group(array('prefix' => 'api/v1', 'before' => 'api.csrf'), function() {
Route::resource('test1', 'Api\V1\Test1Controller');
Route::resource('test2', 'Api\V1\Test2Controller');
});

The api.csrf filter

// If the session token is not the same as the the request header X-Csrf-Token, then return a 400 error.
Route::filter('api.csrf', function($route, $request)
{
if (Session::token() != $request->header('X-Csrf-Token') )
{
    return Response::json('CSRF does not match', 400);
}
});

The AngularJS stuff put this in app.js:

Blocking Version:

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "//" + window.location.hostname + "/api/csrf", false);
xhReq.send(null);

app.constant("CSRF_TOKEN", xhReq.responseText);

app.run(['$http', 'CSRF_TOKEN', function($http, CSRF_TOKEN) {    
    $http.defaults.headers.common['X-Csrf-Token'] = CSRF_TOKEN;
}]);

Non-Blocking Version

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "//" + window.location.hostname + "/api/csrf", true);

xhReq.onload = function(e) {
  if (xhReq.readyState === 4) {
    if (xhReq.status === 200) {
      app.constant("CSRF_TOKEN", xhReq.responseText);

      app.run(['$http', 'CSRF_TOKEN', function($http, CSRF_TOKEN) {
        $http.defaults.headers.common['X-Csrf-Token'] = CSRF_TOKEN;
      }]);
    }
  }
};

xhReq.send(null);

Now the CSRF_TOKEN constant is injected as a header in ALL http requests from the AngularJS app and ALL API routes are protected.

Answer 2

If you use Laravel 5, no need to add CSRF token to Angular http headers.

Laravel 5 with Angular do this automatically for you.

http://laravel.com/docs/5.1/routing#csrf-x-xsrf-token

Answer 3

I think my solution is less pain and much more flexible, especially it thinks testing your App on Karma.

Firstly add this code your master view

 <meta name="csrf-token" content="{{ csrf_token() }}">

We have saved csrf token into html content without adding route.

Now we protect all requests of AngularJs App by CSRF token

/**
 * 
 * when it thinks testing your app unit test with Karma,
 * this solution was better than getting token via AJAX.
 * Because low-level Ajax request correctly doesn't work on Karma
 * 
 * Helper idea to me :
 * http://stackoverflow.com/questions/14734243/rails-csrf-protection-angular-js-protect-from-forgery-makes-me-to-log-out-on/15761835#15761835 
 * 
 */
var csrftoken =  (function() {
    // not need Jquery for doing that
    var metas = window.document.getElementsByTagName('meta');

    // finding one has csrf token 
    for(var i=0 ; i < metas.length ; i++) {

        if ( metas[i].name === "csrf-token") {

            return  metas[i].content;       
        }
    }  

})();

// adding constant into our app

yourAngularApp.constant('CSRF_TOKEN', csrftoken); 

We need to setup default http headers for Angular. Let's add our csrf token to Angular's headers

/*
 * App Configs
 */
blog.config(['$httpProvider', 'CSRF_TOKEN',

  function($httpProvider, CSRF_TOKEN) {


    /**
     * adds CSRF token to header
     */
    $httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = CSRF_TOKEN;

 }]);

Finally we have to need new filter for this changes on side of laravel..

Route::filter('csrfInHeader', function($route, $request) {

    if (Session::token() !== (string) $request->header('X-CSRF-TOKEN') ) {

        throw new Illuminate\Session\TokenMismatchException;

    }
});

"csrfInHeader" filter will check all http request by angular app. You are not need adding csrf token to every each request. Plus if you test your app by Karma, you will not effort to getting csrf token on testing..

Answer 4

The easiest way to do it as

Route::get('/getToken','Controller@getToken');

In your web or api.php file

In Controller

public function getToken(){

          return csrf_token();

    }

Place this code

In Angular app

$http.get("http://localhost:8000/getToken")
  .then(function(response) {
    alert(response.data)
  });

Safe way to get csrf_token()

Answer 5

An option will be to inject the CSRF token as a constant. Append the following in your head tag:

<script>
  angular.module("app").constant("CSRF_TOKEN", '{{ csrf_token() }}');
</script>

Then in your module methods it can be injected when needed.

app.factory("FooService", function($http, CSRF_TOKEN) {
    console.log(CSRF_TOKEN);
};

Maybe you will be interested of peeking at the source code of this sample Laravel + AngularJS project.