how to prevent my application (Core Webapi and front-end with angular 7) from Cross-Site Request Forgery
Related
I have an existing ASP.NET MVC 5 application that uses a custom authentication scheme and sessions for storing state using ASP.NET_SessionId cookie.
Now there is a requirement to put a React front-end in front of an ASP.NET Core Web API. There is an opportunity to reuse some of the service code from the API. The showstopper is the authentication.
Is it possible to reuse/share the existing cookie and authentication scheme from a React web application? JWT and IdentityServer appear to be solid options but would require a significant rewrite to the existing system.
As far as I know, if you want to share authentication cookies between ASP.NET 4.x and ASP.NET Core apps, you need to rebuild the asp.net core cookie authentication.
Since the asp.net core and asp.net use different way to encrypt the authentication cookie, so you should let them use the same way to encrypt the cookie to get the token work for both asp.net and asp.net core application and make sure there are in the same domain.
More details about how to set the application to share cookie between ASP.NET 4.x and ASP.NET Core apps I suggest you could refer to this MSFT example.
Some part of the document:
ASP.NET 4.x apps that use Katana Cookie Authentication Middleware can be configured to generate authentication cookies that are compatible with the ASP.NET Core Cookie Authentication Middleware. This allows upgrading a large site's individual apps in several steps while providing a smooth SSO experience across the site.
When an app uses Katana Cookie Authentication Middleware, it calls UseCookieAuthentication in the project's Startup.Auth.cs file. ASP.NET 4.x web app projects created with Visual Studio 2013 and later use the Katana Cookie Authentication Middleware by default. Although UseCookieAuthentication is obsolete and unsupported for ASP.NET Core apps, calling UseCookieAuthentication in an ASP.NET 4.x app that uses Katana Cookie Authentication Middleware is valid.
Katana Cookie Authentication can be used to reuse cookie among app. For more detail please find the documentation for Share Authentication Cookie among app
I have ASP.NET MVC and Angular2 application and I'm using Identity Server 3. Typical workflow for user is to log on MVC application which stores obtained token in a cookie.
After successful login, user can use angular2 application for specific operations and it resides on subdomain. Angular application "talks" to web api.
Is it possible to share access token stored in a cookie between mvc and angular (javascript) client. Currently, I'm extracting access token and store it in local storage for using in ng2. It is working, but in my opinion this is not elegant solution
You can implement Direct Authentication in Angular and use SSO.
User will be logged in to ASP.NET MVC, the Angular will hit the identityserver and will returns the token.
You can use the OIDC.JS library to implement implicit flow in Angular.
In order to prevent cross-site request forgery attacks, We have used ValidateAntiForgeryTokenAttribute attribute provided in asp.net mvc2 by annotating the method with [ValidateAntiForgeryToken]. For the HTML views, generating and supplying the token is easy as following.
<%= Html.AntiForgeryToken() %>
However request from client applications to server to the same controller method fails as it does not have token included in its header. For the requests that are generated from mobile client (iPad / iPhone), how can anti-forgery token be generated in when requesting? Do any inbuilt classes or third party libraries available in Objective-C?
I am new to AngularJS and trying to evaluate it for my new web application.
Requirement:
I will have one ASP.NET Web API which will be consumed from an Android, an iPhone and from a web application (ASP.NET MVC) too. ASP.NET Identity will be implemented in Web API. All three applications will call the login method of Web API to get the auth token.
Problem:
My problem is how to get ASP.NET MVC server side authentication work (in sync with Web API so I don't have to login for ASP.NET MVC separately) while Angular makes a call to get the HTML template/view, JavaScript files or other resources. I have went through many articles and blogs on AngularJS but still unable to find a security model which fits in my requirement.
Possible Solution:
Would it be a good idea to make the login call to ASP.NET MVC application instead of Web API directly, and ASP.NET MVC application would call the Web API to login, and once authenticated, save the auth token in session plus create a FormsAuthentication cookie and in cookie data save the encrypted auth token. Moreover set the auth token in ng-init somewhere in HTML to have the token in AngularJS scope. Now when AngularJS tries to make a call to ASP.NET MVC application to get HTML, then authenticate/authorize the user by matching the cookie decryted data with auth data in session. Also, AngularJS will send the auth token in header to call the Web API methods directly for all the subsequent calls for data manipulation through Web API.
I solved the problem with a very strait forward solution. I just made sure I have following two lines of code in the Register method of WebApiConfig:
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
That's it. Now my MVC controllers look for the session cookie for authorization whereas my Web API controllers look for the auth token in the header of each request. Moreover, the Web API sends a token (JSON) and a session cookie itself in response to the login/authentication request e.g. http:\\www.mydomain.com\token.
So now I send my login request to Web API to get the token as well as the session cookie. Session cookie will automatically be sent will each request so I don't have to worry about the authorization of my MVC controllers. For Web API calls I am sending the auth token in the header for each request as Web API controllers don't care about the session cookie being sent with the request.
Also worth a look:
https://bitbucket.org/david.antaramian/so-21662778-spa-authentication-example/overview
(based on this SO question)
Warning: it's not for the faint-hearted...
ASP.NET Web API 2
HTML5 + AngularJS + $ngRoute
NuGet scaffolding
Yeoman (Grunt/Bower)
Owin framework (OAuth 2.0)
CORS
I think you are on the right path. I would store the tokens in an Angular Service to make it easier on yourself (http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app). I'm a little confused on what you mean by "AngularJS tries to make a call to ASP.NET MVC application to get HTML", you shouldn't need to secure the MVC app, it's just running your Angular right? The API is the piece you want to secure as well.
here is our problem..
We have built an MVC Web-api that uses Forms authentication with cookies to handle sessions.
When we use our front-end webpage on the same domain (localhost or web-server) as the web-api, all works fine. (We use JQuery $.get and $.post to communicate with the web-api).
Though the front-end is in the future supposed to be a standalone html5 app, not located on the same domain as the web-api.
This isn't working unfortunately.
The web-api does return an authentication cookie to the client, BUT the cookie isn't brought back to the web-api when the front-end sends it's requests.
When both web-api and front-end are on the same domain, the cookie is automatically sent with the request.
We've tried setting
"Access-Control-Allow-Origin: *" and "Access-Control-Allow-Authentication: true" in the web-api webconfig file.
What you need is a single-sign-on(SSO) feature.
Browser will only cookies to the same domain, that is the reason why it was not working when applications are located on different domains.
There a nice article in CodeProject on implementing SSO in ASP.NET - http://www.codeproject.com/Articles/106439/Single-Sign-On-SSO-for-cross-domain-ASP-NET-applic it applies to ASP.Net MVC too.