I have a React app that needs to communicate with several AWS services, each requiring secret keys and I know that I should not hard-code them into the JS.
I found this:
How do I hide API key in create-react-app?
Which basically confirms the following:
* Do not store true secrets in your JS
* Do not use env files either, because they are added to the JS at compile time.
* Use server-side code to deal with secret server-to-server communications, i.e. use a proxy
But my question is now one of clarity on this or "next step". My proxy server now handles all of the private communications with AWS. However, how do I confirm my app's identity to the server? In other words, if open the proxy up, anyone will have access to my AWS content. However, my actual users are not authorized to access my external services directly, so I can't just pass through those credentials.
My idea is to set up an application ID that will redirect only to the associated URL, but is that secure enough? The appID is in the JS, but the ID will only allow the proxy to send information back to the URL on record.
Thank you,
Wayne
I think your best bet would be to use AWS Cognito.
Users will auth with it, get back a token which can have IAM access rights attached to it if that is what you desire
Related
I am creating a public facing SPA web application using React js.
The backend for this application are the endpoints available under Azure APIM. I would like to restrict the access to these APIM endpoints in a way that they are only accessible from my react app.
As the react app will be rendered in the user's browser, I cannot have any IP restriction on my APIM backend inbound policy, as the application could be accessed from anywhere ( public facing). But if anyone gets access to the API url by inspecting the network traffic in the browser , my backend API's become vulnerable.
How can I restrict that APIM endpoints are only accessible from the react app ?
I have tried using CORS policy to allow my domain , but still tools like POSTMAN are able to access the endpoints.
The short answer is you cannot fully prevent people from hitting your public API endpoint on their own.
The longer answer is that you can put protections within your API config so that this isn't a concern. If all requests need a valid user authentication token, for instance, it doesn't matter if that valid request comes from your React UI or an errant user's terminal window. Check out some best practices on protecting your API endpoints, and it will hopefully answer your question.
You can't. At best you can obstruct the user by making it harder to replicate a proper request to your API. Ultimately there's no way to identify whether or not a request came from a browser or some other tool though.
It's up to you to construct the API in such a way that the user can't abuse it by limiting the user to only perform actions that they should be allowed to make. If you are concerned by a user overloading your API you can add a policy to APIM to apply rate limiting (e.g. by IP).
It not be possible to prevent attackers from inspecting HTTP traffic and the vulnerable calling endpoints.
You should implement authentication controls on API. Whenever a user opens a new session on you SPA, the API grants that user a token that is valid for a fixed amount of time (~30 mins). Ensure that the API checks if that token is valid for each request.
I am trying to build an app where users can sign in using their work Microsoft account through open id connect. All of the documentation on Microsoft seems to suggest that for React/SPA apps you should use the MSAL library to authenticate users but this seems to cache the access tokens directly in the brower through session storage. To my knowledge this is bad practise and a backend for frontend approach should be used for this scenario instead where the access token is stored in a HTTP secure cookie.
Does anyone know how to do a backend for frontend type approach using Azure Active Directory? Is there support for this using Microsoft Api's or do I have to just write the code from scratch?
Thanks for any help
You need to use a server side solution to issue application level secure cookies. It is not specific to Azure AD.
The Duende BFF solution is .NET based, and uses the web host, eg https://www.example.com, to issue cookies. See this code example and the docs.
It is also possible to issue cookies via a utility API that runs in a sibling domain of the SPA, eg https://api.example.com. This is a little more complex, but provides options such as deploying the SPA to a content delivery network - see this code example.
I have a react web application with a flask api (I used to use express). The product of this app is the data that it displays. I don't want other people to be able to take that data easily from calling the api.
I want to secure the api such that it can only be accessed by my react app and nothing else. How can I do that?
The only way to truly secure your API is by authenticating your app's user with something like Oauth2 and verify that credential on server-side with something like passport, and make the authorization expire with sessions. AND use SSL so none of that is easily visible through a protocol analyzer.
Sure, you can hard-code some sort of "secret key" with the app, but anyone who want it bad enough will read it off your app or sniff the packets through a packet logger until they find the key.
EDIT: Oh, and as a part of the authorization upon login, provide them with a uniquely generated "API-KEY" as part of identity, so you can validate them upon submission, and if they violate your trust, mark their API key invalid in the server so they can't use them any more.
First, if your client code and API server are running on different domains or ports, configure CORS on your API server to only honor requests that originate from the client code's domain. Second, authenticate legitimate users so that only authorized requests for data are honored. There are lots of 3rd-party libraries to help with authentication.
I have made an app with Spring Boot on backend and UI in AngularJS. UI is separate from the backend. UI is deployed in Firebase and my backend in deployed in AWS (via boxfuse). I want to add a trusted https certificate to my backend but Certificate Manager does not let me create a trusted certificate for Amazon owned domain. How can I add a certificate to the backend (with Let's Encrypt)? Does my UI also need a trusted certificate?
First of all, If you are using public domain of EC2 instance, I would advice not to use because whenever you start and stop instance, It will change the domain. If you are doing with let's encrypt than you should do it in the server which having apache configured. Let's encrypt provide you the ACME client, most recommended is certbot. Choose your OS and Web server. It will provide you the script, Run that script in your server and it will ask for required detail which needed to get SSL Certification. Rest of the things script will do it for you. Please read the documentation before you perform this things.
You should consider the domain type as well either you are using single domain or wildcard according to your application.
Below link is useful for me, If you want you can get more detail about this.
https://www.digitalocean.com/community/tutorials/how-to-install-an-ssl-certificate-from-a-commercial-certificate-authority
I have an App Engine project which:
uses google.appengine.api.get_current_user() to handle users (and login:required)
has a URL to collect some data (which requires login)
has Google users but on a custom domain
I used to have a script to pull the data using the old https://www.google.com/accounts/ClientLogin interface, but now that interface is deprecated, I'm trying to work out what I need to do to get OAuth2 working to access my App Engine URL with a user value set.
I have worked my way through OAuth2 for devices to get myself an access key for my script (i.e. I can run it, authenticate in a web browser, then poll for the access key), as described in OAuth2 For Devices.
But I'm not sure:
what scope I should be using to request the access_token compatible with get_current_user(),
how to pass this in my request to App Engine so that it can create the the user header, and
whether I need to modify my app to use this access_token, eg adding callbacks etc
With regards to the last point, user was set by google's front end infrastructure so I’m hoping that that same infrastructure can somehow convert my OAuth access_token into a login name without me needing to update my app to do the callback part, because it should all be in appengine's infrastructure right and user is set before the request comes to my app.