Angular Django CSRF integration - angularjs

I have a separate angular app and Django application running on different localhost ports with CORS enabled. My angular app sends its post requests to Django service endpoints to receive JSON response. I have attached the screenshot of angular project structure below. I need to know where I should integrate Django's CSRF token in my angular app assuming that I have one of my post request in Django.service.ts and what is the best practice that I need to follow?

Accessing the JSON data from the API shouldn't require a CSRF token to complete, check your views and make sure they aren't requiring it.

Related

CSRF enable between reactjs and springboot application in different domain

We have react js app as frontend application and springboot api as backed enabled with CSRF, which run in different domain.
What is the best way to pass csrf token between rest API and react application.
Normally CSRF tokens are passed in payload of HTTP Request.
If your REST API has no cookie dependency (eg: for Authentication), I dont see any need for CSRF Protection.
You can refer this link for more details.
https://security.stackexchange.com/questions/166724/should-i-use-csrf-protection-on-rest-api-endpoints

Problems combining JWT Bearer Authenticating Web API with Asp.Net Core 2.0

I have the following setup:
Web API with JWT Bearer Auth
Asp.Net Core 2.0 MVC handling identities and providing views
AngularJS - client
Angular is requesting JWT token and passing it on subsequents http requests.
AJAX calls are working fine. The problem is if I request an MVC action with [Authorize] through my browser, that token is obviously not validated, because there is no cookie and no auth header.
How would I go about implementing signin functionality to non-ajax requests?
I assume I need to implement some sort of Cookie Authentication, but I was hoping to avoid it after moving to JWT.
I know this could probably be solved by migrating to SPA, but I was wondering if there was a way to keep todays solution with MVC serving views - old habit :(
If you want server-side JWT authentication, then you need to store your JWT in a cookie instead of local storage. Cookies are issued for your site's domain, so when you request youre MVC app for a view and assuming your API and your MVC site have the same origin (same schema + host + port), there should be no problem for protected MVC controller to process incoming cookie in HTTP(S) request and make a decision on how to respond. WebAPI should also be able to handle cookies with JWT payload. I found nice article with sample project about ASP.NET Core MVC Authentication here: https://auth0.com/blog/asp-dot-net-core-authentication-tutorial/
For your AngularJS SPA it shouldn't be a problem to set JWT to a cookie instead of putting it to local storage. It would be actually more secure way to store JWT, but you need to make sure your JWT won't get too long, because cookie payload size is limited. More about it here: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

How to authenticate end users in an app having AngularJS UI and Spring Boot Rest Server with Spring Security

I have two apps.
Front end - AngularJS website running on localhost:9000 and getting data from rest service (database)
Back end - Spring Boot Rest Service localhost:8080
How to create authenticate process for this two app? Login from (user, password). I reading some tutorials on spring website, but front end are build in spring project on the /resouce folder, not separated.
There are a couple of things you need to keep in mind if you are setting up your app the way you want to.
What kind of authentication mechanism do you want? For rest services Basic and oAuth2 are most common.
With Basic auth you would send authorization header in each request.
Each request will perform authentication all over again.
There is no state between client and server
Https is mandatory if you use basic auth.
With oAuth2 first you need to send basic authentication request to end point your.app/oauth/token? --- parameters
Response will contain
access_token": "CQPt2VR2HJuCY3mb0xA1BVMyDltgvnpf6N2CXdsds3423YkGQID7VO-Mmu4idymlz"
Which you then include in every request with bearer token :
Authorization Bearer CQPt2VR2HJuCY3mb0xA1BVMyDltgvnpf6N2CXVPXkaewYkGQID7VO-Mmu4idymlz
access_token has an expiration time. You can also send refresh_token which has longer expiration time.
There is no state between client and server
For smaller applications oAuth2 is too complicated and basic will suffice.
This is just an overview of common authentication methods. There are a lot of implementation tutorials. Example : https://spring.io/guides/tutorials/spring-boot-oauth2/ and http://www.baeldung.com/rest-api-spring-oauth2-angularjs
One thing to keep in mind is you will need to setup CORS filter. If you run your service and client on different ports. For starters annotate methods you want to use with #CrossOrigin(origins = "http://localhost:9000") You can of course register global cors filter.

AngularJs + Rest Backend CSRF Security

I am building a simple AngularJs web app that hits a REST Api built with Flask. From what I understand, there are a few ways to protect against CSRF, one of which is sending back a CSRF token when the user authenticates.
If I wanted to make my API available to both the Web Application and to users who want to use it as an API for development, would I need 2 endpoints for each endpoint that allows POST requests [one for the app that requires CSRF token + auth token and one for the developers that requires just an api access key]?
Not necessarily. Broadly, you have two options:
Proxy the REST API through whatever server-side container your web app is running in. Your web-app proxy can then implement the CSRF protection and insert the API-key into the API request.
Check the referrer header on all API requests. Although this requires that your Angular SPA and API share the same authentication mechanism, so you'd have to use something more sophisticated than an API key, like OAuth.

How to persist authenticated state in a sailsJS backend app when requests are from another domain?

I have an architecture where I'm using sailsJS (custom node.js implementation) as my api server and an angular front end server. Each app is being served from different domains.
How can I maintain an authenticated session in the sailsJS api app between requests?
Sails has an integrated req.session object for maintaining sessions but it doesn't seem to be working out of the box when the client is being served from another domain.
You need to check two things when doing cross-origin requests from your front-end app to your Sails app:
Make sure your Sails app has CORS enabled; this will ensure that the browser doesn't block the requests for security reasons
Make sure the withCredentials flag is set in your AJAX request; this will ensure that your cookie is sent to Sails and your session is maintained.
With Restangular, you can set withCredentials to be used on all requests by default using setDefaultHttpFields; see this answer for details.

Resources