处理带有角前端和Drupal 7后端的CSRF/XSRF令牌

Question

我正在为Drupal 7网站构建一个新的AngularJS前端。这是使用基于会话的身份验证的服务模块，跨两个域使用CORS。我能够使用Drupal进行身份验证，检索用户对象和会话数据，然后从服务模块获取CSRF令牌。我遇到的问题是将所有这些设置在标头中，以便对后续请求进行身份验证。我理解整体概念，但对AngularJS和预防CSRF攻击来说都是新概念。

从我所收集到的关于使用AngularJS和RubyOnRails设置的文章来看，在令牌的名称和处理方式方面，平台之间可能存在不一致。对于如何在标头中设置此令牌，似乎也有许多建议。然而，我很难找到一个关于如何让这些平台使用同一种语言的实例。

我用$httpProvider在app.js上做的唯一一件事是：

delete $httpProvider.defaults.headers.common['X-Requested-With'];

登录控制器，在controller.js中：

  .controller('LoginCtrl', ['$scope', '$http', '$cookies', 'SessionService', function($scope, $http, $cookies, SessionService) {
    $scope.login = function(user) {
        //set login url and variables
        var url = 'http://mywebsite.com/service/default/user/login.json';
        var postDataString = 'name=' + encodeURIComponent(user.username) + '&pass=' + encodeURIComponent(user.password);

        $http({
            method: 'POST',
            url: url,
            data : postDataString,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function (data, status, headers, config) {
            var sessId = data.sessid;
            var sessName = data.session_name;
            $cookies[sessName] = sessId;

            var xsrfUrl = 'http://mywebsite.com/services/session/token';
            $http({
                method: 'GET',
                url: xsrfUrl
            }).success(function (data, status, headers, config) {
                $cookies["XSRF-TOKEN"] = data;
                SessionService.setUserAuthenticated(true);
            }).error(function (data, status, headers, config) {
                console.log('error loading xsrf/csrf');
            });
        }).error(function (data, status, headers, config) {
            if(data) {
                console.log(data);
                var msgText = data.join("\n");
                alert(msgText);
            } else {
                alert('Unable to login');
            }
        });
      };

Answer 1

该解决方案涉及到需要如何设置cookie，然后再通过后续请求传递。手动设置它们的尝试并不顺利，但解决方案比我预期的要简单。每个$http调用都需要设置以下选项：

withCredentials: true

我所做的另一个改变是使用术语CSRF，而不是XSRF，以与Drupal保持一致。我没有使用任何内置的AngularJS CSRF功能。

Answer 2

        addItem: function(data)
        {
            return $http.post('api/programs/'+$stateParams.id+'/workouts', {item:data},{
                headers:
                {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'X-CSRF-Token': $('meta[name="xxtkn"]').attr('content')

                }
            });
        }

因为已经是这个话题的一年了！不确定是否仍然遇到同样的问题，但对于那些来寻找答案的人来说，我是如何处理它的！注意header {} part I定义一个新的标头，并将其命名为，并从生成的html或php的DOM获取值。从server.Cuz攻击者那里请求csrf令牌也是一种不好的做法。因为你把它保存成饼干。攻击者可以偷饼干！不用把它保存在饼干里！发送带有头的令牌，并在服务器端读取它以匹配它！

对于同一页问题的多选项卡。我在整个会话中使用了同样的标记。仅在登录、注销和更改主要站点或用户设置时重新生成。

Answer 3

有一个很好的库调用ng-drupal-7-服务。如果在您的项目中使用此方法，它解决了验证/重新身份验证和文件/节点创建的问题，并且您可以在项目中的重要内容上下注。

所以认证是这样解决的：

​

function login(loginData) {
  //UserResource ahndles all requeste of the services 3.x user resource.
  return UserResource
  .login(loginData)
  .success(function (responseData, status, headers, config) {
    setAuthenticationHeaders(responseData.token);

    setLastConnectTime(Date.now());
    setConnectionState((responseData.user.uid === 0)?false:true)
    setCookies(responseData.sessid, responseData.session_name);
    setCurrentUser(responseData.user);

    AuthenticationChannel.pubLoginConfirmed(responseData);
  })
  .error(function (responseError, status, headers, config) {
    AuthenticationChannel.pubLoginFailed(responseError);
  });

};

(function() {
'use strict';


	 

AuthenticationHttpInterceptor.$inject = [ '$injector'];

function AuthenticationHttpInterceptor($injector) {
	
  	
    var intercepter = {
    	request 	: doRequestCongiguration,
    };
    
    return intercepter;

    function doRequestCongiguration (config) {
        var tokenHeaders = null;
 
        // Need to manually retrieve dependencies with $injector.invoke
        // because Authentication depends on $http, which doesn't exist during the
        // configuration phase (when we are setting up interceptors).
        // Using $injector.invoke ensures that we are provided with the
        // dependencies after they have been created.
        $injector.invoke(['AuthenticationService', function (AuthenticationService) {
            tokenHeaders = AuthenticationService.getAuthenticationHeaders();
            
        }]);

        //add headers_______________________
        
        //add Authorisation and X-CSRF-TOKEN if given
        if (tokenHeaders) {
            angular.extend(config.headers, tokenHeaders);
        }
        
        //add flags_________________________________________________
        
        //add withCredentials to every request
        //needed because we send cookies in our request headers
        config.withCredentials = true;

        return config;
    };

​

这个项目也有一些厨房水槽：Drupal-API-Explorer