include antiforgerytoken in ajax post ASP.NET MVC

Inne (mniej javascriptowe) podejście, które zrobiłem, idzie mniej więcej tak:

Najpierw helper Html

public static MvcHtmlString AntiForgeryTokenForAjaxPost(this HtmlHelper helper)
{
    var antiForgeryInputTag = helper.AntiForgeryToken().ToString();
    // Above gets the following: <input name="__RequestVerificationToken" type="hidden" value="PnQE7R0MIBBAzC7SqtVvwrJpGbRvPgzWHo5dSyoSaZoabRjf9pCyzjujYBU_qKDJmwIOiPRDwBV1TNVdXFVgzAvN9_l2yt9-nf4Owif0qIDz7WRAmydVPIm6_pmJAI--wvvFQO7g0VvoFArFtAR2v6Ch1wmXCZ89v0-lNOGZLZc1" />
    var removedStart = antiForgeryInputTag.Replace(@"<input name=""__RequestVerificationToken"" type=""hidden"" value=""", "");
    var tokenValue = removedStart.Replace(@""" />", "");
    if (antiForgeryInputTag == removedStart || removedStart == tokenValue)
        throw new InvalidOperationException("Oops! The Html.AntiForgeryToken() method seems to return something I did not expect.");
    return new MvcHtmlString(string.Format(@"{0}:""{1}""", "__RequestVerificationToken", tokenValue));
}

Który zwróci łańcuch

__RequestVerificationToken:"P5g2D8vRyE3aBn7qQKfVVVAsQc853s-naENvpUAPZLipuw0pa_ffBf9cINzFgIRPwsf7Ykjt46ttJy5ox5r3mzpqvmgNYdnKc1125jphQV0NnM5nGFtcXXqoY3RpusTH_WcHPzH4S4l1PmB8Uu7ubZBftqFdxCLC5n-xT0fHcAY1"

Więc możemy go używać w ten sposób

$(function () {
    $("#submit-list").click(function () {
        $.ajax({
            url: '@Url.Action("SortDataSourceLibraries")',
            data: { items: $(".sortable").sortable('toArray'), @Html.AntiForgeryTokenForAjaxPost() },
            type: 'post',
            traditional: true
        });
    });
});

I wydaje się działać!

To takie proste! gdy używasz @Html.AntiForgeryToken() w kodzie html, oznacza to, że serwer podpisał tę stronę, a każde żądanie wysyłane do serwera z tej konkretnej strony ma znak, który uniemożliwia wysłanie fałszywego żądania przez hakerów. aby ta strona została uwierzytelniona przez serwer należy przejść przez dwa kroki:

1.wyślij parametr o nazwie __RequestVerificationToken i aby otrzymać jego wartość użyj kodów poniżej:

<script type="text/javascript">
    function gettoken() {
        var token = '@Html.AntiForgeryToken()';
        token = $(token).val();
        return token;
   }
</script>

Na przykład weź wywołanie ajax

$.ajax({
    type: "POST",
    url: "/Account/Login",
    data: {
        __RequestVerificationToken: gettoken(),
        uname: uname,
        pass: pass
    },
    dataType: 'json',
    contentType: 'application/x-www-form-urlencoded; charset=utf-8',
    success: successFu,
});

I krok 2 po prostu udekoruj swój metoda działania przez [ValidateAntiForgeryToken]

        function DeletePersonel(id) {

                var data = new FormData();
                data.append("__RequestVerificationToken", "@HtmlHelper.GetAntiForgeryToken()");

                $.ajax({
                    type: 'POST',
                    url: '/Personel/Delete/' + id,
                    data: data,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (result) {

                    }
                });

        }
    

        public static class HtmlHelper
        {
            public static string GetAntiForgeryToken()
            {
                System.Text.RegularExpressions.Match value = System.Text.RegularExpressions.Regex.Match(System.Web.Helpers.AntiForgery.GetHtml().ToString(), "(?:value=\")(.*)(?:\")");
                if (value.Success)
                {
                    return value.Groups[1].Value;
                }
                return "";
            }
        }

Wiem, że to stare pytanie. Ale i tak dodam swoją odpowiedź, może ktoś taki jak ja pomoże.

Jeśli nie chcesz przetwarzać wyniku działania post kontrolera, np. wywołania metody LoggOff kontrolera Accounts, możesz wykonać następującą wersję odpowiedzi @DarinDimitrov:

@using (Html.BeginForm("LoggOff", "Accounts", FormMethod.Post, new { id = "__AjaxAntiForgeryForm" }))
{
    @Html.AntiForgeryToken()
}

<!-- this could be a button -->
<a href="#" id="ajaxSubmit">Submit</a>

<script type="text/javascript">
    $('#ajaxSubmit').click(function () {

        $('#__AjaxAntiForgeryForm').submit();

        return false;
    });
</script>

Próbowałem wiele pracy i żaden z nich nie pracował dla mnie. Wyjątkiem było "wymagane pole formularza anty-forgery "__RequestVerificationToken".

$.post(
    url,
    $(formId).serialize(),
    function (data) {
        $(formId).html(data);
    });

W Asp.Net MVC gdy używasz @Html.AntiForgeryToken() Razor tworzy ukryte pole wejściowe o nazwie __RequestVerificationToken do przechowywania tokenów. Jeśli chcesz napisać implementację AJAX, musisz pobrać ten token i przekazać go jako parametr do serwera, aby mógł zostać zweryfikowany.

Krok 1: Pobierz token

var token = $('input[name="`__RequestVerificationToken`"]').val();

function registerStudent() {

var student = {     
    "FirstName": $('#fName').val(),
    "LastName": $('#lName').val(),
    "Email": $('#email').val(),
    "Phone": $('#phone').val(),
};

$.ajax({
    url: '/Student/RegisterStudent',
    type: 'POST',
    data: { 
     __RequestVerificationToken:token,
     student: student,
        },
    dataType: 'JSON',
    contentType:'application/x-www-form-urlencoded; charset=utf-8',
    success: function (response) {
        if (response.result == "Success") {
            alert('Student Registered Succesfully!')

        }
    },
    error: function (x,h,r) {
        alert('Something went wrong')
      }
})
};

Uwaga : typem zawartości powinno być 'application/x-www-form-urlencoded; charset=utf-8'

Załadowałem projekt na Github; możesz pobrać i spróbować to.

Https://github.com/lambda2016/AjaxValidateAntiForgeryToken

Zapraszam do korzystania z funkcji poniżej:

function AjaxPostWithAntiForgeryToken(destinationUrl, successCallback) {
var token = $('input[name="__RequestVerificationToken"]').val();
var headers = {};
headers["__RequestVerificationToken"] = token;
$.ajax({
    type: "POST",
    url: destinationUrl,
    data: { __RequestVerificationToken: token }, // Your other data will go here
    dataType: "json",
    success: function (response) {
        successCallback(response);
    },
    error: function (xhr, status, error) {
       // handle failure
    }
});

}

W Asp.Net Core możesz zażądać tokena bezpośrednio, zgodnie z dokumentacją :

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf    
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

I użyj go w javascript:

function DoSomething(id) {
    $.post("/something/todo/"+id,
               { "__RequestVerificationToken": '@GetAntiXsrfRequestToken()' });
}

Możesz dodać zalecany filtr globalny, zgodnie z dokumentacją :

services.AddMvc(options =>
{
    options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
})