Trouble generating csrf tokens in .net mvc and angular

Question

I'm following this guide:

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

I've added this snippet to the top of my index.cshtml

<script>
    @functions{
        public string TokenHeaderValue()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + ":" + formToken;                
        }
    }
</script>

The problem is when I run the application and inspect the page - all I see is an empty script tag.

Adding this snippet to my $http request:

headers: {
    'RequestVerificationToken': '@TokenHeaderValue()'
}

Does nothing but add the string '@TokenHeaderValue()' to the headers.

The entire app is a SPA using Angular. The only .cshtml file is the index which bootstraps Angular and includes styles, ect.

What am I missing here?

@functions {} is for server--side c# code to be callable while rendering your view, which is why you see an empty script tag clientside. Where you expecting Javascript here? — David Tansey
– David Tansey, Commented Oct 25, 2015 at 18:43
If you look closely at the code from the example you linked to, you'lol see that the functions block is immediately followed by an Ajax call...if you look at the way this gets rendered clientside, you would see just the Ajax call with a 'hardcoded' token header value that was actually derived serverside. — David Tansey
– David Tansey, Commented Oct 25, 2015 at 18:51
Did you use the '@TokenHeaderValue' part in the .cshtml file? Or did you place it in the .js file for your angular controller? The '@TokenHeaderValue' statement should be in the same cshtml file as the first script part. — Niels V
– Niels V, Commented Oct 25, 2015 at 21:16
It is not necessary to put @functions directive inside script tag. I've just created a sample code to prove that it's working, dotnetfiddle.net/8p1k4U — Nugi
– Nugi, Commented Oct 26, 2015 at 0:08
okay I was able to render the token in the index.cshtml file, but I want to be able to call it from within an Angular JS file. Is there anyway that this would be possible since it's outside of the .cshtml file? — Kolby
– Kolby, Commented Oct 26, 2015 at 17:02

Kolby · Accepted Answer · 2015-10-31 08:55:02Z

3

I was able to solve my problem by setting the tokens into a variable and then referencing the token during the $http request.

<script>
    @functions{
        public string TokenHeaderValue()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + ":" + formToken;
        }
    }

    var csrfToken = '@TokenHeaderValue()';
</script>

And then in my Angular Service:

return $http.post('/api/httpRequest1', {
     headers: {'RequestVerificationToken': csrfToken}
);

This method is working fine for me now. For anyone reading this in the future, here is another solution I found: http://blog.novanet.no/anti-forgery-tokens-using-mvc-web-api-and-angularjs

edited Oct 31, 2015 at 8:55

answered Oct 26, 2015 at 19:59

Kolby

2,8633 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble generating csrf tokens in .net mvc and angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related