How to set CSRF token in angular page - OWASP CSRFGuard 3.0
-
I used Spring MVC to create my restful services: http: // localhost: 8088 / SpringRestCSRF / rest / rest / greeting
-
I am using OWASP CSRFGuard 3.0 to protect these Restful services from CSRF.
-
When accessing the same Rest service with a simple HTML-AJAX request - the CSRF token is set and I get the response:
Below code works Fine.
<!DOCTYPE html>
<html>
<head>
<title>REST Service with CSRF Protection</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- First Get call OWASP CSRFGuard JS servlet which sets the token -->
<script src="http://localhost:8088/SpringRestCSRF/CsrfJavaScriptServlet"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url : "http://localhost:8088/SpringRestCSRF/rest/rest/greeting",
type: 'POST',
}).then(function(data, status, jqxhr) {
$('.greeting-id').append(data);
console.log(data);
});
});
</script>
</head>
<body>
<div>
<p class="greeting-id">The Response is is : </p>
</div>
</body>
</html>
- When I try the same with Angular, the token doesn't get set and I get a CSRF guard error.
Angular Code (I am very new to Angular)
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- Assumption - First Get call to OWASP CSRFGuard JS servlet which sets the token -->
<script src="http://localhost:8088/SpringRestCSRF/CsrfJavaScriptServlet"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<button ng-click="testPost(item, $event)">Send AJAX Request</button>
<br /> Data from server: {{myData.fromServer}}
<br /> Cookie Value {{$cookies}}
</div>
<script>
/*----------------*/
var app = angular.module('myapp', []);
app
.controller(
'MyController',
function($scope, $http) {
$scope.result = "";
$scope.init = function() {
$http.defaults.xsrfHeaderName = 'X-CSRF-TOKEN';
$http.defaults.xsrfCookieName = 'CSRF-TOKEN';
};
$scope.testPost = function() {
$http
.post(
'http://localhost:8088/SpringRestCSRF/rest/rest/greeting')
.success(function(result) {
$scope.result = result;
$scope.myData.fromServer = data;
});
};
});
</script>
</body>
</html>
Can anyone tell me how to set a token in Angular.
Quoting from Angular:
When looking for a solution to this problem, read the instructions below.
Cross Request Protection (XSRF) XSRF protection is a method by which an unauthorized site can obtain your personal user information. Angular provides a mechanism to counter XSRF. When making XHR requests, the $ http service reads the token from the cookie (XSRF-TOKEN by default) and sets it as the HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain can read the cookie, your server can be assured that the XHR came from JavaScript running on your domain. the header will not be set for cross-domain requests.
To take advantage of this, your server needs to set a token to a JavaScript-readable session file called XSRF-TOKEN on the first HTTP GET request. On subsequent XHR requests, the server can verify that the cookie matches the X-XSRF-TOKEN HTTP header, and therefore make sure that only JavaScript running on your domain could send the request. The token must be unique for each user and must be verifiable by the server (so JavaScript cannot compose its own tokens). We recommend that the token be a salt cookie authentication digest for your site for added security.
The name of the headers can be specified using xsrfHeaderName and xsrfCookieName Properties, either $ httpProvider.defaults at config-time, $ http.defaults at runtime, or config on a per-request object.
source to share
now with angular2 everything has changed .. but if you are still using the old version you can use this:
var app = angular.module('myapp', []);
app.config(function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'XSRF-TOKEN';
$httpProvider.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';
});
app.controller ...etc
source to share