How to keep API keys safe for deployment? - javascript

I hope you are doing well!
There is a situation regarding API Keys and we are unsure how to handle it.
We are using Google Maps in our website and for that we are using an API Key from Google. However, since Google Maps is displayed on the frontend (ReactJS), it needs the key to be displayed. Whereas our backend needs it for reverse geocoding and geocoding API calls.
The situation is that we need the key to be stored safely, but also can be changed without a complete recompilation of our code.
Some cases:
Store it in the database and fetch it, but opening the Network Panel in the Browser Dev Tools and seeing a request being made shows the key returning in the response.
Storing it in React as well but people can have access to it if they search in the Applications Panel in the Browser Dev Tools.
Adding it to our .env file, but then is it completely safe if so? Can we access it after running npm run build and taking the build code?
How can we handle it with safety and keep it easy to change?
Thanks you for your time!

In frontend build the keys will be bundled in JS code. The environment variables in frontend code gets replaced with their actual values during the build time. In server code you can just use environment variables and whenever you need to change the value, you don't have to rebuild the server, just restarting would pick up the new values from environment. That's not the case in frontend, so we have to set those keys in our source code only so that we can call the API.
Other way would be to have an API that returns the keys required on frontend, so that you can always return the updated values and don't have to deploy new builds. But again, devtools inspection would reveal the keys whenever used for any requests.
Only way to restrict the usage is to bind the domain for that token so that no other domains can call the api with same token. and for native mobile apps, you can create another token and use there.

Related

Configuration Files in Next.js

So, I have a functional application that is working fine, I', using Next.js and Next.js api tool to do all the requests. I'm using sanity.io for my backend. Thats all ok.
For my sanity config, I have a configuration file called 'sanity.js', that's have all the sensitive content.
What is the deal, if the user go into source in the develop console, he founds all the sensitive data. I know if I put this "const config" and "const editor" inside the API, this data will be hidden, but I need to use this 'const config' in more than 1 file, and I don't want to repeat code.
1st doubt: Is there some way to do this process without repeating code, like creating a configuration file inside API, and reuse the const's inside it.
2st doubt: The const 'urlFor' is used in the frontend to manage the images, how to deal with this if the configuration file must be only in the API, and the 'urlFor' needs this configuration in parameter to run properly.
projectId, dataset and apiVersion are not considered sensitive data and they will be visible in all of your queries, so they can be safely exposed to the browser. The token however, is sensitive indeed. Don't expose the token to the browser with NEXT_PUBLIC prefix as the value will be inlined into JavaScript sent to the client.

React Native - Securely storing

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.

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.

Accessing GCE API from my web site

I am trying to access GCE information in a read only way to display data about an infrastructure on my web site. Basically I want to get an OAuth2 token using JS API and then pass it to a Python Backend to do the API calls to GCE. My site is not hosted on GCE at all.
I get however confused in the proper way to set this up. I have created a Google application so it can ask for the authorizations and ask for access to the GCE APIs. I did start from the sample available at https://code.google.com/p/google-api-javascript-client/source/browse/samples/authSample.html. However each time I do run the sample I get an error in the first phase of the authorization process, mentioning an error due to 'X-Frame-Options' to 'SAMEORIGIN'.
Trying to isolate the error and comparing with running the Google sample from my site, it seems this is purely linked to the settings of my app (basically the google sample with my app ID does not work ) and I get lost in how to debug this process. Is there any methodology that could be applied here?
The sample you are following is for retrieving a profile in Google Plus, using the 'Public API key'. This type of key is used only to retrieve public data. If you want to access information on GCE, you must use OAuth 2.0 to authorize requests. For implementing this, you have different scenarios as web server, installed app, client-side (JS), etc.

How can I cache Javascript and JSON data in my iPhone app?

I am developing a native iPhone app in Titanium.
Within this app I am using data from a remote API (which I have developed in Rails 3).
I want the user to cache the API data on their phones as much as possible.
What I need help with is the concept of caching. What is the best way of doing it? The nature of the data in the API is that it needs to be up to date. Because it is contact data that can change anytime.
I have no clue in how the cache process would work. If you someone can explain
the best way of managing a caching process for the API I would be more than happy!
I am using JSON and Javascript.
"The nature of the data in the API is that it needs to be up to date. Because it is contact data that can change anytime"
If that's true then it makes any kind of caching redundant, as you would need to compare the cache to live data to check for changes, thus making the cache itself pointless.
The only reason you may still want to cache the data is to have it available off-line. That being the case i would use an SQLite database, which is native to the iphone.
titanium-cache is clean code with a unit tests and provides some sample code in the readme. I integrated this with my own project in a matter of minutes and it worked nicely.
I think the type of cache it's application dependent.
You can cache data on:
client;
server;
other network element.
Critical point is refresh of data. A bad algorithm produce inconsistent data.
You can find interesting information on literature of distributed systems
Bye
A couple options here.
1) You can use ASIHTTPRequest and ignore cache headers to cache everything. When your app is being used, you can detect if the cache is being hit. If it is hit, you fire off a request to the server after the cache hit to request any new data. You can do this by appending a random URL param to the end of the URL since the cache keys off of the URL. If you have a good connection and new data, load it in. Otherwise do nothing and your user has the latest data when using the app under a good connection
2) Do most of #1 by always hitting the cache but instead of firing a non-cachable version of the same request to the server after hitting the cache, fire off a non-cacheable timestamp check to see if data was updated. If it has been, fire off the non-cachable full API request. If it hasn't or it fails, you can do nothing.

Categories