Отправка ASP.NET токен MVC CSRF с $http в AngularJS

Я разрабатываю ASP.NET веб-приложение MVC. Я использую AngularJS. Но у меня есть проблема с отправкой post form на сервер из-за проверки CSRF. Прежде всего, я новичок в AngularJS.

В AngularJS, я отправляю форму, как это на кнопке нажмите событие

angular.module('loginApp', ['ui.bootstrap', 'blockUI']).controller('loginController', function ($scope) {

    $scope.loginFormData = { }

    $scope.submitLoginForm = function()
    {
        $http.post("url", $scope.loginFormData, function (response) {

        })
    }
});

На стороне сервера я делаю проверку CSRF, чтобы сформировать сообщение

        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public async Task<JsonResult> Login(LoginViewModel model)
        {
            //Do other stuff
        }

Вот моя форма HTML:

            @Html.AntiForgeryToken()
            <div class="lock-container">
                <div class="panel panel-default text-center paper-shadow" data-z="0.5">
                    <div class="panel-body">
                        <div class="form-group">
                            <div class="form-control-material">
                                <input class="form-control" ng-model="username" type="text" placeholder="Username">
                                @Html.LabelFor(x => x.UserName)
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-control-material">
                                <input class="form-control" ng-model="password" type="password" placeholder="Enter Password">
                                @Html.LabelFor(x=>x.Password)
                            </div>
                        </div>

                        <button ng-click="submitLoginForm()" class="btn btn-primary">Login <i class="fa fa-fw fa-unlock-alt"></i></button>
                    </div>
                </div>
            </div>

На самом деле это не форма. Я просто отправляю данные с Ajax в основном. Вы заметили @Html.AntiForgeryToken () в верхней части. Когда я проверяю в браузере, я могу видеть, как это.

Введите описание изображения здесь

Что я хочу сделать, так это получить значение токена и отправить сообщение $http, как показано ниже.

$http.post("url",{ "_RequestVerificationToken": $scope.csrfToken }, function (response) {

        })

Если я отправлю как выше, проверка csrf будет успешной на сервере. Как я могу этого достичь?

2 ответа

  1. Эти значения можно передавать в заголовках вместо содержимого тела. Это можно сделать глобально для этого модуля. См. ниже ссылки.

    angular.module('app')
    .run(function ($http) {
    $http.defaults.headers.common['X-XSRF-Token'] =
        angular.element('input[name="__RequestVerificationToken"]').attr('value');
    

    });

    Пожалуйста, обратитесь по этой ссылке

    AngularJS Web Api AntiForgeryToken CSRF

    https://www.asp.net/web-api/overview/security/preventing-cross-site-request-forgery-csrf-attacks

  2. Добавить маркер в FormData

     var formData = new FormData();
        formData.append("__RequestVerificationToken", token);
        formData.append("UserName", $scope.kullaniciAdi);
        formData.append("Password", $scope.sifre);
    
        $http({
            method: 'POST',
            url: '/Login/Login',
            data: formData,
            transformRequest: angular.identity, 
            headers: { 'Content-Type': undefined }
    
        }).then(function successCallback(response) {
    
    
    
        }, function errorCallback(response) {
    
        });