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.
Related
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
I am building a project with both a web app built with React and Next.js and a native app built with React Native. I am looking for a second opinion on the best practice to handle Authorization for the Spotify API that will work on both platforms.
Option 1: Use the Authorization Code Flow with a proxy server to protect the client secret.
Native app passes authorization code to proxy server on heroku using GET request
Proxy server passes code, redirect_uri, grant_type, client_id, and client_secret to Spotify API
Proxy server passes back access_token, refresh_token, and expires_in to either web app or native app
Option 2: Use the Implicit Grant flow and accept that there is no
refresh_token. I would like to avoid this option if possible because the app will be making many requests and it would be more convenient to operate with a refresh_token.
My main concern is keeping the client_secret safe since my understanding is that React and React Native do not make requests server-side. Is it safe to pass back the access_token and refresh_token for a proxy?
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've a SPA (Angular based) published at my-example-domain.com and rest API (based on Laravel 5.3), exposed at my-example-domain.com/api.
All API are public, so unauthenticated user can use my Angular SPA and call backend API.
I would like to allow ONLY my SPA to call my backend rest API so, for example, nobody should be able to call my rest APIs through a rest client/curl.
How can I reach this goal?
What kind of authentication should I have to set up in my Laravel app?
Is Passport the right way?
You can't.
Your client is available to the public.
It runs in a browser, so all the HTTP requests it makes can be inspected by its users (i.e. everyone).
Anything you do to try to identify the request as coming from your client, can be inspected and replicated by anyone.
My AngularJS SPA and its ASP.NET WebAPI 2 API are located on different domains. SPA user is authorized in API by obtaining JWT token from API auth server and then SPA sends each request with Authorization Bearer request header containing this token to access protected API endpoints.
Now we need to expose some API endpoints to be directly accessible by users when they are logged in to SPA. But I'm not sure how to implement it because we don't use cookies and our API is located on different domain than our SPA.
Is it possible to configure ASP.NET WebAPI 2 to issue cookie to a different domain (API domain) when POST request with credentials is sent from SPA from another domain?
Consider that cookie is being stored in client-side not in your server-side. You can add some tracker (i.e Google Analytics, or create your own tracker) to store the log data from users based on their tokens or their server variables like ip address, session key and so on. Notice that tracker service will be launched on server-side and the tracker on the client-side like trackers javascript snippet-codes.
Hope this can be helpfull. Regards.