Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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?

share|improve this question
    
@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 Oct 25 '15 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 Oct 25 '15 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 Oct 25 '15 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 – Nugroho Budi Oct 26 '15 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 Oct 26 '15 at 17:02
up vote 3 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.