400 Bad Request when POST-ing to Razor Page

Question

My page has...

@page "{candidateId:int}"

... and

@Html.AntiForgeryToken()

Model has...

public void OnGet(int candidateId)
{

}

public void OnPost(int candidateId)
{

}

GET works fine. Here is my AJAX request..

$.ajax({
    type: "POST",
    url: "/Skills/" + candidateId,
    beforeSend: function (xhr) {

        xhr.setRequestHeader("XSRF-TOKEN",
            $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    data: {

        name: 'hi mum'
    },

    success: function (response) {
    },
    failure: function (response) {

        alert(response);
    }
});

Browser receives useless error message... 400 Bad Request.

What am I missing?

The 400 error should come with more info than just that. What is the actual error it shows you? — DavidG, Jan 22 '18 at 01:05
But the server response will contain more information than that. Check the browser debug tools. — DavidG, Jan 22 '18 at 01:11
The response tab says, "The response has no data available". It's literally just a number and the word "Bad". :) — Ian Warburton, Jan 22 '18 at 01:14
Check the view source of the page. Do you have the `__RequestVerificationToken` hidden input generated ? — Shyju, Jan 22 '18 at 01:15
Oh, yes that was the issue. The code I copied sets it as a header instead of a value in the forms collection. Thanks. — Ian Warburton, Jan 22 '18 at 01:20

Shyju · Accepted Answer · 2018-01-22T01:30:34.763

61

You are getting a 400 (Bad Request) response because the framework expects the RequestVerificationToken as part of the posted request.The framework uses this to prevent possible CSRF attacks. If your request does not have this information, the framework will return the 400 bad request. Your current code is not sending it.

Change the code to this

headers:
{
    "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
},

This will add a new item with key RequestVerificationToken to the request header and the framework should not throw a 400 response when the call is made. (assuming your view code generated the hidden input for the __RequestVerificationToken hidden input)

You can make the code more robust by injecting the IAntiforgery implementation to the view/page and using the GetAndStoreTokens method.

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

and call this GetAntiXsrfRequestToken function to get the value in your javascript

headers:
{
    "RequestVerificationToken": '@GetAntiXsrfRequestToken()'
},

You also probably want to use the PageModel's CandidateId property to create the url. Something like this

url: "/Skills/@Model.CandidateId",

Also, you do need to call @Html.AntiForgeryToken() method explicitly to generate the token input. Having a form with post method with no action attribute value will generate the hidden input for you.

<form method="post">
   <!-- your inputs-->
</form>

edited Jan 22 '18 at 01:30

answered Jan 22 '18 at 01:24

Shyju

214,206
104
411
497

3

"You are getting a 400 (Bad Request) response because the framework expects the RequestVerificationToken as part of the posted request." Where in the docs can I find this particular information? Please post a link. – PussInBoots Dec 13 '18 at 15:37
3

Had same problem and @Html.AntiForgeryToken() was missing in my form – Carl Verret Apr 26 '19 at 19:31
2

What if you need to accept a POST from an external site? A site where we cannot include the antiforgerytoken. – mxmissile May 03 '19 at 16:49
16

@mxmissile You can ignore validation of the anti forgery token by decorating your PageModel with `[IgnoreAntiforgeryToken(Order = 1001)]`. See more here: https://www.learnrazorpages.com/security/request-verification#opting-out – ajbeaven Dec 21 '19 at 11:32
you saved my say savior. – Khizar Iqbal Jun 16 '21 at 06:29
I also missing @Html.AntiForgeryToken() in model form in razor pages, – Roshan Nov 21 '21 at 15:15
I found a nice side effect is when using your method, I no longer need to use `@Html.AntiForgeryToken()` in the razor page (and no forms are declared). I assume that is expected? – lonix Jun 30 '22 at 10:36

400 Bad Request when POST-ing to Razor Page

1 Answers1

Linked