When deploying a ReactJS + NodeJS application, what do you do about environment variables used on the React-side? Running NPM BUILD folds any secret API keys into the final code, making it visible to anyone who inspects the source code. Moving the .evn information to a .env file located server-side before using the npm build command doesn't solve the issue. I've tried to search around but I can't find any actual solutions.
Thanks!
You cannot make secret keys invisible on the client side. Even receiving it as an environment variable from the server, the keys will be incorporated into the build and will be publicly accessible.
So that your React app is not vulnerable, (correcting: not the only way) a possibility is to save keys and secrets in the backend. That is, the backend is the only one with access to keys and secrets. Client makes requests without storing sensitive data.
Thanks folks, all extremely helpful! I'll be moving the secret keys to the server side and changing the way my code works to compensate the adjustment. The other issue was Google Maps API, which can't be moved in the code but can be restricted to specific IP or URL use in the Google Cloud Platform.
https://cloud.google.com/blog/products/maps-platform/google-maps-platform-best-practices-restricting-api-keys
Related
I'm currently integrating a monitoring solution for my Angular Frontend app. TO do that, the monitoring provider requires a script to be present in the index.html. However, that script contains sensitive data such as API_KEY, LICENSE_KEY, etc.
My Question is: What is the best & secure way to handle those secrets?
Thanks in adavance
My current idea is to inject those secrets into the script in the build proccess to avoid having them hardcoded in the commited code.
I have a Vue Storefront which, out of the box, exists of a Nuxt.js front-end and a Express.js back-end.
In this project I created a custom Server Middleware (which is the Express.js part) that has an Axios call in it. My entire Vue Storefront project is hosted and deployed on a server where I also store the secret keys for the Axios call as eviorment variables. Whenever I request data via the Axios call on the deployed website, I can still see my secret keys in payload in the browser console.
Can these keys be hidden? Since the call is done in the VSF Server Middleware (which is a Express.js server under the hood) and my secret keys are defined on the server too... Not in a .ENV file.
The official docs also state the following about the server middleware:
Securely store credentials on the server without exposing them to
theend-users of your application,
I also have Server Side Rendering enabled, if this has any effect on this.
As explained in my previous answer here, you cannot really hide anything on a client side app.
The fact that you do have ssr: true and target: 'server' enables the usage of a serverMiddleware. Nuxt is also an Express server, so you could technically still totally hide stuff, the configuration of this one is detailed here. Please pay attention to the whole answer (especially the gotcha at the end).
The TDLR is as mentioned above: you'll need some kind of proxy to hide that, so you could do that:
directly with Nuxt2 but it's kinda tricky and hard to work with overall, on top of paying a whole Node.js server and a possible mistake exposing those tokens at some point
get another Node.js server to properly separate the concern and use that one as a proxy, it can be pretty light (no need for a beefy configuration), not as expensive price-wise
a serverless function could be the best idea here because it's light, cheap and you don't need to manage anything (send your query there, it will proxy the request with the secret token) but it can be a bit annoying regarding cold starts
I am developing an electron app that connects to a remote couchdb database using a connection string which contains the db's username and password, something like https://admin:admin#IP:PORT
But I do not wish to reveal the database credentials in the electron app due to security reasons, is there any way I can:
a) Either store the aforementioned db url in a secured way inside the electron app?
b) or, create a nginx proxy at my server's end that will help connect my electron app using a proxy url without revealing the db username/password?
I also have some secret third party service keys (bugsnag key etc etc) in my electron app that I need to store securely, please suggest a way to do so.
PS: I am using electron-builder to package my app.
Thanks in advance
There is npm module that for storing the security information at Electron app.
Please have a look at keytar module that developed by atom
But anyhow, after packing the app using Electron-builder then this encrypted data will be stored inside of your Electron app resource or somewhere. Such in asar package, Application Data or somewhere Else.(I'm not sure where it is since I've not attempted to find this data location.) Even though the data is encrypted but anyone can access this.
You should use the right method to encrypt so.
If you go here:
http://armygrounds.com/jsgame/server.js
It's publicly visible and anyone could get the DB credentials.
How do I prevent this? Is it a file permission setting?
This is an issue with your webserver configuration. You should not expose your nodejs source to the web. In this case, you want to move the server side code out of the location that is visible from the website. You probably want to set up your web server to proxy to nodejs when it needs to be called.
Its a little difficult to answer your question more accurately without knowing more of your setup.
We're planning a secure Node.JS server, which uses several third-party web services. Each requires credentials that will need to be configured by the operations team.
Clearly they could simply put them in plain text in a configuration file.
Microsoft .NET seems to offer a better option with DPAPI (Data Protection API) - see Credential storage best practices. Is there a way to make this available through IISNode? Or is there any other option to secure such credentials within Node-JS configuration?
There's an extensive discussion of several options here, including the two suggested by xShirase:
http://pmuellr.blogspot.co.uk/2014/09/keeping-secrets-secret.html
User-defined services solves the problem, but only for Cloud Foundry.
This blog http://encosia.com/using-nconf-and-azure-to-avoid-leaking-secrets-on-github/ points out that you can often set environment variables separately on servers, and suggests using nconf to read them and config files separately.
I still wonder if there are specials for IIS?
There is 2 ways to do it securely :
First one is to use command line parameters when you launch your app.
These parameters are then found in process.argv
So, node myapp.js username password would give you :
process.argv[0]=node
process.argv[1]=/.../myapp.js (absolute path)
process.argv[2]=username
process.argv[3]=password
Second is to set the credentials as ENV variables. It is generally considered as the best practice as only you have access to these variables.
You would have to set the variables using the export command, than you'd access it in process.env
I currently had to do the exact same thing for my External API credentials. this is what i did
install node-config module
create a folder and file called config/config.js
here require(config) module
In local box it reads the configuation from local.json file
i have dummy values in local.json for api key and shared secret
on my QA environment i export two variables NODE_ENV="QA" and NODE_CONFIG_DIR="path to my configuation folder on qa server"
node-config module reads configuation from "path to your config folder / QA.json"
now i have real api key and credential in QA.json
here you can use an encryption to encrypt these values and put it back in QA.json
in your app get these config values and decrypt use it in your rest call
hope this helps.
so your config can live in the same container as node code.
refer to this for encryption and decryption
http://lollyrock.com/articles/nodejs-encryption/