Injecting secret api key - javascript

how does one inject an api key into an application?
I have a secret key that I need to use, say AWS credentials
they are stored in a local file that I don't push to github
how would I inject them into the app when it loads in production so that it uses the right key?

Use environment variables, there are a variety of ways you can set them. Such as directly in terminal or in a .env file that gets loaded with a library. Or your deployment solution might have a way to set them.
Then when you need them in your code use
process.env.VAR_NAME

Related

How to keep API keys safe for deployment?

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.

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.

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.

Safest way to store access tokens (Tizen)

My Samsung Gear (Tizen 2.4, Web App) application makes use of several paid APIs which are protected with secret access tokens.
At the moment I simply have those tokens inside a js file, this does not feel like a safe way to store sensitive information.
What is the recommended way to store this kind of information.
The documentation mentions a key manager:
https://developer.tizen.org/ko/development/api-references/web-application?redirect=/dev-guide/3.0.0/org.tizen.web.apireference/html/device_api/wearable/tizen/keymanager.html&langredirect=1
But I think the watch user has access to that? Which is exactly what I try to avoid.
Inside the config file, I can set some preferences, which I can then fetch with the preferences API. Is this secure? Or is this information extractable as well?
I was wondering what the safest way to store senstive app information (such as usernames, passwords, tokens, keys, ...), to which the watch user should in no way have access to, is to put inside a gear app. Or is the code assured to be protected in the compiled WGT file?
Or is the code assured to be protected in the compiled WGT file?
There is a feature of encrypting Encryption available in Tizen applications. It protects html, js and css files after installation on the device. Maybe you can use it to somehow protect some sensitive data, but please notice that encryption happen during installation on the device - not during wgt file creation.

Firebase Javascript API on trigger.io - load script from local file

I'm using the Firebase JS API in my trigger.io app.
My app must be able to start up and operate in Airplane Mode. Would it be acceptable for me to reference a local copy of the Firebase JS file, or must this always be loaded from the CDN url?
Alternatively, is there a way the file could be cached locally and requested on a scheduled basis to get the latest version, or is there another mechanism I should use that I'm missing out on.
If you referenced a local copy of the firebase.js lib, it would work as well as the remote copy, at least initially. Since Firebase is in beta, changes can be pushed to that lib at any time, making your local copy obsolete.
Utilizing a local copy wouldn't, by itself, solve the issue you are hoping to address. While Firebase will survive temporary outages and spotty coverage, there is no locally stored copy of the data, so you'll need to either connect to Firebase initially and obtain that data, or use set() to create some sort of local default if offline.
More robust offline support is on the Firebase road map.
Some additional and very informative reading can be found here:
using firebase on offline networks
Does Firebase allow an app to start in offline mode?
How to sync offline database with Firebase when device is online?

Categories