How to set CSRF token in angular page - OWASP CSRFGuard 3.0

问题

I have used Spring MVC to build 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 using a simple HTML - AJAX request - CSRF token is getting set and I am getting the response:

Below code is working 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 am trying the same thing using Angular, the token is not getting set and I am getting 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 someone suggest how should I set the Token in Angular.

Quote from Angular:

While searching a solution to this problem, read the below statement.

Cross Site Request Forgery (XSRF) Protection XSRF is a technique by which an unauthorized site can gain your user's private data. Angular provides a mechanism to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie (by default, XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain could 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 in a JavaScript readable session cookie called XSRF-TOKEN on the first HTTP GET request. On subsequent XHR requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript from making up its own tokens). We recommend that the token is a digest of your site's authentication cookie with a salt for added security.

The name of the headers can be specified using the xsrfHeaderName and xsrfCookieName properties of either $httpProvider.defaults at config-time, $http.defaults at run-time, or the per-request config object.

回答1:

now with angular2 the things has changed .. but if you still use 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

来源：https://stackoverflow.com/questions/30140189/how-to-set-csrf-token-in-angular-page-owasp-csrfguard-3-0

标签

javascript

angularjs

csrf

csrf-protection

owasp