React Native - Securely storing - javascript

I have a React-Native app, and I have a PHP-backend server.
Now I'm trying to use my SMTP Password in my react-native app, so I can send email easily, react-native-smtp-mailer.
As I saw in other questions (How do I hide API key in create-react-app?), It is not a good idea to store it inside my .env file because React environment variables are embedded in the build and are publicly accessible.
However, there is an option to use my backend server to get my API key/Password.
You should really only save API keys or secrets in your backend such as Node / Express. You can have your client send a request to your backend API, which can then make the actual API call with the API key and send the data back to your client.
But I can't understand how to do it. If I'm creating an API call, but it's very easy to access it from Postman or something similar.
For example, I have http://api.com/getPass and it gives me my API key/Password however everyone can access it.
So my question is...
How Do I Do it to work secretly.
(It would be much easier if you can provide a Code example.)
Or should I do the emailing on my server side? (I Have to send Multiple images).
But If I do it on my server side, everyone with the "URL" can access it...

You could add the expo-secure-store module to your application which will give you a place to store the password and access it when needed without having to store it hard-coded in your source code. You could then provide an input element within the application where you could enter it once, saving it under a certain key in the store, and accessing it via that key when needed. It doesn't give you a place to permanently save it as part of the code, but the data would persist across launches.

Related

Github Secrets to Vanilla JS files

I am building a static website, HTML, CSS, and Vanilla JS. I came to a point where I have to use MailChamp to send emails to the client whenever there is a form submission. Not so tricky, docs are very clear on how to do an API call. But I need to send an API_KEY with every request. Which is a problem. I do not want to save this secret key in the code. I have added it as a secret on github repo. But I am not sure how I can access it on Vanilla JS files. I tried the following,
process.env.API_KEY and API_KEY
I am getting this error, sendEmail.js:1 Uncaught ReferenceError: process is not defined
Which makes sense, because it's a static website. But I cannot think of any other way. If it was a node process it would have been very simple :/
Let's say I create an API endpoint, and the server where I can securely save API_KEY, how would I authenticate the request coming from the front-end/static website? Assuming that I cannot securely save the token on the client side.
There is no way to do it the way you want, i.e. with pure front end (FE) because it would mean that you need to send your secrets to them.
Whatever you send to the front end will always be accessible to your users, so it's not safe.
What you need to have is the back-end (BE), some kind of server that will receive an async call from the FE, connect to the external API and do whatever you want it to do, and then send some kind of confirmation to the FE that the process was successful.
Now, the BE will know your secrets, and this is fine because you control it and the users won't have access to it directly.
Now, you do not always need a full-blown application for that, some people are getting stuff done with platforms like Firebase, that can handle authentication of users for example for you.

API Key storage in Ionic Securely

I am developing an Ionic 4 Application and it requires making http call to consume data from an API.For the same , there is a need to add key with http request.
I want to know , how can I store api key securely , instead of putting it directly into service while building .apk for my application.
I presume , there is no concept of environment file which was there in Angular.
I have tried putting in API key in config.xml but not sure wether it is a good practice to put in api key in config file and also not aware of how to read the same from config file to service file.
Since , there are not much pointers available online, requesting to help.
Thanks in advance.
You can store your api_key on the server and by using angular APP_INITIALIZER token you can call API to get api_key dynamically before app initializes and store them.
In this way, you can always handle your api_key via server. So if someone gets your code, he/she will not get your api_key.

How could I make an API request from front-end through server so my API key wouldn't be visible to the end-user?

I've researched that if I'd like to hide my API keys I have to do the requests through back-end.
What would be the best way to hide my API keys?
And please don't suggest using environment variables, I'd like to know best practice to make an API request through server to the API's server.
Unfortunately, and against your request not to suggest it, ENV Variables are an industry standard. By doing this as such:
You don't have to commit your API Keys to a code repository
You can change them on the fly and restart your system to pick them up, or code in a manner that picks them up fresh every time they are needed
They don't end up in your UI code visible to the world, and subsequently visible in every request you send.
One other method would be to store credentials values in a database somewhere. But you have the chicken/egg scenario there. Where are you going to store your DB credentials so you can access the DB? Can't go in the DB because you wouldn't be able to read them. You'd have to put them in an environment variable or, commit the DB credentials in the code repository - and that isn't best practice by any stretch.

How to store data in Amazon DB (without a server) from javascript but without exposing API Keys?

I need to build a simple (almost) frontend only website (HTML, CSS, JS) and host it on Amazon S3. But I also need to store contact details of people who fill out the form. The only way I have ever handled this type of scenario is the usual way, i.e. by sending the data to the server and handling the CRUD operations on the server side.
But in the current situation, I think that firing up a server (an EC2 instance) will be an overkill (as well as expensive). Is there any way by which I can directly store data submitted by user to the DB? (SQL, NoSQL anything would do).
The closest I got to the Solution is DynamoDB Low-Level API which I have not run but I think that making REST call from the html page would do the trick BUT the problem is that it would expose the Authorization Credentials.
Is there any way I can either use DynamoDB Low-Level API without exposing the credentials? or is there a better solution than using DynamoDB?
If you want to create a serverless website that can store data you should use API Gateway to fire AWS Lambda functions which will verify the data and store it.

Angular and secret keys

I have been learning angular 2 and have been doing research on how to protect data within my app.
How, if possible, can you obstruct data from the front end of the app? Is it possible to serve the angular app through a node server, say using Universal Angular, which would mean variable values can be hidden from the user on the front end.
I am essentially looking for the solution of hiding private keys which will give the app access to various APIs/creating auth headers/paths. I've read a solution is to have an API bridge for the app - so I would connect to that to retrieve the data/keys - but then how do I protect that from access? Since that endpoint would then be exposed and could be abused, or if getting keys the response is visible. The idea of locking down to domain I have read is unreliable due to spoofing and locking to IP wouldn't work as its front end or through an app?
I feel there is a glaringly obvious answer that I am missing something.
You must assume that everything that is held in your frontend is visible to anybody that can access your frontend.
All JS variables, storage (local, session), network requests, etc. in your front end are unsecured from users of your frontend.
You can (and should) use SSL to make hide data from anybody in between your server and the browser, but there is just no way to secure data held in your frontend from users of your frontend. (At least if your frontend is available on "regular" browser as opposed to some tightened kiosk mode installations.)
It's simple, when the server sends the data as response to a request, then the data can be accessed from the outside.
If you don't want that, then don't send the data.
You didn't mention what problem you actually try to solve. For API keys you can for example do the request to the API on the server and provide an API on your own server for your clients and then make the server forward the requests to the actual API server.

Categories