4

Drupal 7 Web サイト用の新しい AngularJS フロントエンドを構築中です。これは、CORS を使用する 2 つのドメイン間で、サービス モジュールをセッション ベースの認証で使用しています。Drupal で認証し、ユーザー オブジェクトとセッション データを取得してから、サービス モジュールから CSRF トークンを取得できます。私が問題を抱えているのは、ヘッダーにこれらすべてを設定して、後続のリクエストが認証されるようにすることです。全体的な概念は理解していますが、AngularJS と CSRF 攻撃の防止の両方については初めてです。

AngularJS と RubyOnRails を使用したこのセットアップについて読んで集めたものから、トークンの名前と処理方法に関して、プラットフォーム間で矛盾が生じる可能性があります。このトークンをヘッダーに設定する方法についても、いくつかの提案があるようです。しかし、これらのプラットフォームが同じ言語を話すようにする方法の確かな例を見つけるのに苦労しています.

app.js で $httpProvider を使用して行っている唯一のことは次のとおりです。

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');
            }
        });
      };
4

4 に答える 4

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

                }
            });
        }

この話題は一年ぶり！まだ同じ問題に遭遇するかどうかはわかりませんが、ここで答えを探しに来る人のために、私はそれをどのように処理しますか! headers{} 部分に注意してください。新しいヘッダーを定義し、それを X-CSRF-Token と呼び、(サーバー側で) 生成された html または php の DOM から値を取得します。サーバーから csrf トークンも要求することはお勧めできません。Cookieとして保存するためです。攻撃者はクッキーを盗むことができます! Cookie に保存する必要はありません。ヘッダー付きのトークンを送信し、サーバー側で読み取って一致させます!

および同じページの問題のマルチタブの場合。セッション全体で同じトークンを使用します。ログイン、ログアウト、および主要なサイトまたはユーザー設定の変更時にのみ再生成します。

于 2014-05-28T10:39:44.227 に答える
2

ng-drupal-7-services を呼び出す優れたライブラリがあります。プロジェクトでこれを使用すると、認証/再認証とファイル/ノードの作成がすぐに解決され、プロジェクトの重要なものに焦点を当てることができます。

したがって、認証は次のように解決されます。

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

于 2016-03-12T17:07:07.647 に答える
0

はい、各プラットフォームには、トークンの命名規則があります。

これは、さまざまなプラットフォームで簡単に使用できるようにするためにまとめられた小さなライブラリです。これにより、セット名を使用できるようになり、すべてのリクエストで使用できます。また、クロスドメイン リクエストに対しても機能します。

https://github.com/pasupulaphani/angular-csrf-cross-domain

于 2015-01-05T21:29:54.850 に答える