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
Related
i managed to secure my spring boot backend (localhost:8081) with keycloak as an authorization server (with an access token needed), but i want my frontend (react with port localhost:3000) to access the data which is secured. Thus meaning that localhost:3000/products should fetch data from localhost:8081/products after a successful login.
Could anyone guide me on this problem?
You choose an OIDC client lib for react. It should handle
redirection to authorization server for login
redirection back from authorization server with authorization code
exchange of authorization code for access, refresh and ID tokens
automatic access token refreshing
(maybe) automatically insert authorization header with bearer access token for configured routes
The requests your React app will issue to Spring resource server will then have required JWT access token.
PS
Make sure your Spring back-end is configured as resource-server (and not as client).
Also make sure that you do not use the deprecated Keycloak adapters for spring.
Using Express and Passport JS on the backend we are currently able to login to the application, and access all of the API requests using postman.
However when we try and make API requests that require authentication on the React JS Web Application we get a 401 unauthorised error.
We've run logs from both the postman request and the web app request and both are passing the connect.sid cookie in the header.
My question is, how do I get the application authenticated and able to make API requests like postman can. I login to postman the same way I do using the web application but it doesn't authenticate the api requests.
Things I've tried:
manually setting the headers to allow cross origin requests
setting an Authorize bearer token
Specifying on the backend the origin of the front end, which only allows api calls to be made from the front end web server
The application is a ReactJS application, and I am making the API calls using Axios
I fixed this by passing withCredentials on login, this sends your user to the passport.js and authenticates the user.
You need to call withCredentials every time you make an API call though
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
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.
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.