24

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 csrf token. My form layout is :

<form class="form-horizontal" ng-submit="addItem()"> <input type="text" ng-model="itemEntry" placeholder="Type and hit Enter to add item"> </form>

This is how I try to add item to database :

$scope.addItem = function(CSRF_TOKEN) { $http.post('/shop', { text: $scope.itemEntry, csrf_token: CSRF_TOKEN} ).success(function(data, status) { if(data) { var last = _.last($scope.items); _token = CSRF_TOKEN; $scope.items.push({text: $scope.itemEntry, bought: false, id: (last.id + 1) }); $scope.itemEntry = ''; console.log($scope.items); } else { console.log('There was a problem. Status: ' + status + '; Data: ' + data); } }).error(function(data, status) { console.log('status: ' + status); }); }

Here is my filter that I use for my application: 

Route::filter('csrf', function() { if (Session::token() != Input::get('_token')) { throw new Illuminate\Session\TokenMismatchException; } });

In my blade views I use this and it works :

<input type="hidden" name="_token" value="{{ csrf_token() }}" />

How can I send the csrf_token when I use html forms?

Thanks

Edit 1 : Adding header to post request like this does not give errors. 

 $http({ method : 'POST', url : '/shop', data : $scope.itemEntry, // pass in data as strings headers : { 'Content-Type': 'application/x-www-form-urlencoded' } });
Improve this question

5 Answers 5

Reset to default
29

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hello , I added script in the head. I injected CSRF_TOKEN . How do I add it inside form ? I edited my code btw.
I still could not manage it , I read the code end-to-end. I edited $scope.addItem . Can you give a look ?
23

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.

Improve this answer

7 Comments

Hey I added one more alternative for that solution. Can you check and make your comment if it is a nice solution also ?
@ytsejam - I don't understand how specifying the content-type in the header is an alternative solution for getting a CSRF token from the server to the AngularJS app.
I followed this tutorial scotch.io/tutorials/php/…
@Gravy are you serving your angular app from the same domain? I currently have my api at api.example.com and angular being served from example.com so I am having problems with the session being made since it is considered cross origin.
This doesn't work for a REST api, the token is not going to be the same.
|
23

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

Improve this answer

1 Comment

awesome. completely missed this
7

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..

Improve this answer

Comments

1

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()

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.