I am currently building an application.
My front end is developed using React and Axios (for API call requests). It is served directly by vercel on mydomain.com
My back end is developed using Django and Django Rest. It is served with apache2 on api.mydomain.com. It only serves API endpoints.
So the front-end and back-end are separated.
I would like to return the entire data in encrypted form as an API response and then wants to decrypt it in the frontend app(react)
Do you have any idea of what I could do to achieve this?
Thanks a lot in advance for your answers.
Thats such an interesting question.
If you want encryption, I think you should look into SSL encryption (using https instead of http). SSL encrypts the data between client and server. You would still need to make API endpoints inaccessible to unauthorised users.
There is a great article about securing Django API by using JWT tokens.
You can set up a login endoint that would retrieve the tokens from Django upon successful login.
These tokens can then be used by React to access the secure Django endpoints. As an additional layer of security, you could make these tokens short lived, in the unlikely case someone intercepts the tokens, they will expire and the hacker will lose access to your API.
SSL + JWT tokens should address your needs :)
Related
I am creating a full stack application with a React/TS frontend and FastAPI Python backend both on different domains/origins. For my first API endpoint (an auth endpoint), I cannot use axios.get(/login) as I planned as I'm using a 3rd party API in my backend that doesn't work with redirects to my frontend. The solution seems to be to have a login button with an a tag that directly links to http://backend_url/login. This does work, but it feels weird/unsafe to literally send users on the frontend to the literal url of my backend as opposed to just calling HTTP requests to the backend. Is this bad practice? Is there a better way to accomplish this? I appreciate any direction.
The question is more on how to deal with a 3rd party API that a user needs to authorize, see comments on OP.
You can redirect directly from your frontend to the /authorize endpoint of Spotify. They will call the returnUrl that you gave when you registered your application with them, and provide a authorization code. If this is in your frontend (e.g. http://frontend.com/oauth/callback, that can take that authorization code and feeds it to your backend (for example, to http://backend/api/auth). That endpoint can exchange the authorization code for access tokens (calling the /token endpoint of Spotify, of something similar) using the client credentials that you received when you registered your application with Spotify. The backend can store and use those access tokens, and your frontend can call the backend.
I'm working on a React frontend app, and believe I have CAS working correctly to secure the frontend using this package: https://www.npmjs.com/package/react-cas-client
Now I would like to secure my backend, and only allow the app to access the API calls, presumably using JWTs (or some form of token). All of the guides I'm finding, however, require the use of Spring Security, and passing the username/password to get the JWT. In this situation I'm using CAS, so I don't have a username/password to pass in.
Could anyone point me in the right direction? Thanks!
if your ui is decouple from the backend which i think it is based on your description, you can do this with proxy grant ticket, you can look the offical doc about how the proxy works. following are high level how you can do this with front end and backend decoupled:
After user entered right user credentials, cas will do 2 things, on ui your response contains a proxyGrantingTicket, and will send a callback to your backend with pgtId and pgtIou(this is proxyGrantingTicket you received on front end).
once you have both pgtId and pgtIou, you will use those information to do the authentication from now on.
I understand that React app is only client side application running in the client browser.
However I have the backend with REST API I need to consume, and the API in under mutual TLS (https), so I need client certificate in order to be able to authenticate and get something from the backend.
But the issue is that the React Front End is running locally in the browser so I do not know how it could be possible to securely store certificate and its private key, if it is even possible.
I was trying to google approach and it seems that the React app cannot consume services which require client certificate for authentication, and there should be at least another backend as proxy, which will be handling both parts, with the React client, and the REST API backend. This proxy can be configured with the certificate and private key and user would not have access to it.
But it requires another component as proxy.
I can also put the React app behind proxy like Apache and setup the mutual client certificate based authentication, however this can help me to identify user inside the React app, not to securely establish mutually authenticated channel with the REST API backend.
It seems that WebAuthN could be the way, however it seems to be designed only for authentication, not the SSL/TLS.
What should be the correct approach? Is it possible to do it with React based app, or this technology is not suitable in that case?
I did research on the same topic, the only solution that I found is to store the certificate on the api and request the certificate using AXIOS.
On the api level you need to test from where the request is coming from and only serve the certificate if the request comes from an authorized IP (your front end).
I couldn't find any other solution.
I created this web app completely in go-lang, which uses Google Drive API to authenticate users. Once user authenticated, it saves the token in a <user-email>_token.json file so the app can operate for 24 hours without the users involvement. It works fine. But now I want to separate the front-end from (Go-Lang)back-end and convert it to AngularJS.
So I have this problem with authentication. Because I should keep the authentication in server-side. But then how would Angular know that the user is authenticated or not? Because I cannot use sessions.
Should I need to use JWT to this? If it is, then how should I do it?
Your token does not have to be on the server side.
Why? Because if you have many clients connected to your server, it would mean that all of these clients are sharing the same token and therefore have access to the Google Drive linked to this token. It does not make sense.
The token has to be on the client side. You should save the token as a cookie, maybe by using JWT, I let you read the documentation of JWT to know why it would be interesting to use it in your case or not.
Then on your Angular, you have to say something like "hey, this client has a cookie called "my-google-drive-token", let's check if that is a good one... Mmmmh, okay seems to be good, I display the Google Drive content".
Think about using good practices about security (using an encrypted token in your cookie, making the connection between the front and the back safe, keep your API key safe...).
Your backend is only a gateway between your front-end and the Google Drive API.
Also, check the usefulness of your server. I think that in your case, a simple frontend connected to the Google API is enough.
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.