I'm new to vue .env. I looked everywhere for a straight answer till I got lost. According to VueJS documentation that if we have .env.local file that will be loaded in all cases but will be ignored by git which exactly what we want to hide secret API keys from the public. But it also says that if we add VUE_APP before the key name in .env.local that will make our key load to the public.
My question is. How to securely hide API key from the public and still be able to use it in production and in development without any security risks?
my .env.local file
VUE_APP_DEEPGRAM_KEY=some_API_key_that_is_secret
the above works if I log it to the console from my app. but if i removed VUE_APP It won't work so is it safe to leave it like this?
Anothe thing, in Laravel we used to save API keys in .env and refer to them from config file and then call them in app from config. So is Vue different? if not, then how to do the same here?
To answer my own question, documentation is actually pretty obvious but I got a bit confused. it simply has to start with VUE_APP_ for it to work in Vue CLI
Related
I read the documentation on Vue CLI and I wanted to make sure if I understand it correctly.
The documentation says,
Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.
So does that mean I should store my private key without the prefix VUE_APP? For example,
VUE_APP_NOT_SECRET_KEY=not_secret_key
SECRET_KEY=secret_key
Is it correct way to store my secret key?
You can store your key either in VUE_APP_NOT_SECRET_KEY=not_secret_key or SECRET_KEY=secret_key, there is no difference from security point of view, any one with a minimal front end skill get read this values from the browser.
The only difference is that if you use the VUE_APP_* prefix your variable will be in the process.env, and will be replaced by Vue in compile time using the DefinePluing.
cli.vuejs.org/guide/mode-and-env.html#environment-variables –
NOTE WELL: Anything you store in the Vue app is not secret.
You can create a .env file in the root of the project, next to package.json
In that file, you can create your environment variables as
VUE_APP_SOME_KEY="someValue"
Make sure the name starts with VUE_APP_
Then where ever you want to use it you can do
process.env.VUE_APP_SOME_KEY
Also don't forget to add .env file to .gitignore
Keys should not be stored in environment variables as they will be accessible on the client
You should be using a product like Key Vault from Microsoft. Key Vault is part of Azure services.
Best practice in the industry is to store your secrets on another server.
Microsoft provides such a way through key vault and can be easily implemented.
There are other products out there. See the azure keyvault competitor's list
Edit : I also forgot to mention, you cannot at this time use KeyVault per example directly on frontend app (single page app). You need to split the backend and frontend for it to work, otherwise you will not be able to hit the keyvault client.
I have a react-native app that communicates with a server that makes calls to stripe for payment processing/customer creation. I want to ensure that requests are coming only from my app. so i figured i could create a token of sorts on the client, and encrypt it with a special key using b-crypt, then on the server side when the request comes in with the encrypted token as a parameter, i can decrypt that token with the same special key.
i understand the optimal place to store this key is in the env variables server-side, but how do you manage security of a secret key client-side in a react-native app?
There are several ways to store keys on the client side.
The easiest way is to use the Async storage which stores data in a key value pair.
The problem with Async storage is that its nor encrypted so it wont suit your requirement.
The other option is to use the react-native-keychain library which stores the passwords or keys in the securely in the keychain of IOS and keystore in Android. The security part will be managed by the operating system. So this is an approach that can be recommended for your requirement.
There are multiple ways to do this, these are just two options.
After further research, I ended up revoking the accepted status of #GuruparanGiritharan. his solution (react-native-keychain) dealt with storing passwords in an OS's keychain implementation. this ended up not being the solution for my question. as my question deals with storing secrets keys in a way they wouldn't be visible in binary, de-compiling situation.
What I did was research key management services. I found this:
Handling secrets with dotenv
In Node.js secrets are usually loaded from env files using the dotenv
module. This is done in order to separate the secrets from source
code. For example an env file might look like this (reference below):
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
Now doing this in a context (potentially development) where you dont need to implement continuous integration, it's referred to a "manual provisioning"
My issue (admittedly, I did not specify a production environment in my question) is when it comes to a production environment, in my case, with visual studio app center (a CI option for React-Native apps)
Continuing on this site for an option for key management services:
While this removes hardcoded secrets from source code, it doesn’t
solve your problem completely; Now you need to find a way to provision
your app with the .env file.
This guide will show how you can remove the secrets from the .env file
altogether, so that it can be safely checked into source control and
shipped with your application.
This guide is discussing how to implement key management in the context of a production environment with continuous integration. This approach is relatively simple and straightforward, as all you need to do is create an .env file, add the keys with a variable, and add (in this tool's case) an additional run script to your main node.js start script.
Tool mentioned: SecretHub
https://secrethub.io/docs/guides/nodejs/
Hola developers i hid my APIs from google in a .env file in my code repository , pretending to export to GItHub all what i have done without expose this secrets keys , but as im working with vue CLI , in order to make live this app must to deploy it through Netlify.
My .env file was in this way:
VUE_APP_GOOGLE_MAPS=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
VUE_APP_GOOGLE_MAPS_GEO=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
VUE_APP_GOOGLE_MAPS_LAT_LONG=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
thus then after post it to Git, on my Netlify console iin the show advanced menu just before deploying the site , i just create 3 variables referring to the former 3 ones, like this
*key* *value*
---------------------------------
maps process.env.VUE_APP_GOOGLE_MAPS
mapsgeo process.env.VUE_APP_GOOGLE_MAPS_GEO
mapslatlong process.env.VUE_APP_GOOGLE_MAPS_LAT_LONG
but the site doesn't deploy.
Any advice ?. Is this a correct way of doing it
Thanks in advance
You should be storing the key/value pair like the .env file. Making sure NOT to commit your .env file into your repository.
I've got an Appveyor project setup and working awesomely. Now, I want to upload artifacts S3 for easy hosting. This seems fairly easy as outlined in the documentation. My question is, where do I put the secret with write permission? I don't want to push it to my public repo for obvious reasons. On travis I could put it in an environment variable that was never logged. How would I go about this in Appveyor?
I assume you need to store this in YAML. You can use secure variables. Or you can simple put your secrets in clear text to S3 deployment configuration in UI, then save and press Export YAML and you will have YAML section with secrets encrypted.
I am new to KeystoneJS and I am having a small problem concerning my deployment on Heroku.
This is my website: http://jeroendruwe.herokuapp.com/, when I navigate to the admin section (http://jeroendruwe.herokuapp.com/keystone/signin)
I get the Invalid Cloudinary Config Provided error
Papertrailapp log: http://pastebin.com/Yn8Pdttz
I've read the documentation (http://keystonejs.com/docs/configuration/#services-cloudinary). The weird thing is that when I try one of these (in keystone.js), the whole site stops working:
keystone.set('cloudinary config', { cloud_name: 'my-cloud', api_key: 'abc', api_secret: '123' });
// or
keystone.set('cloudinary config', 'cloudinary://api_key:api_secret#cloud_name' );
So what I've done at the moment is set the property in the keystone.init(...'cloudinary config': 'cloudinary://...'). I've also added the url to the CLOUDINARY_URL environment variable in the .env file
How can I fix this issue?
Can somebody also explain what the variables in the .env file do? There is 1 in the root and another one in the node_modules/dotenv folder, these files are not pushed to git so how do they get used?
Thanks in advance!
First, let me start by answering your last question first. The .env file is used by the dotenv module, which loads the variables/values in the .env file and makes them available to your application in process.env. Make sure you call the .load() method as early as possible in your code.
var dotenv = require('dotenv');
dotenv.load();
You should also know that Heroku has two other means to configure environment variables (See Configuration and Config Variables). One via your application dashboard and another via their CLI.
Using the Heroku Dashboard, just fill in the NEW_KEY and NEW_VALUE fields, then press Save.
Using the Heroku CLI, just use the heroku config:set command.
$ heroku config:set CLOUDINARY_URL=cloudinary://api_key:api_secret#cloud_name
Adding config vars and restarting myapp... done, v12
CLOUDINARY_URL: cloudinary://api_key:api_secret#cloud_name
If you're using Heroku, I suggest you use one of these to methods to set the CLOUDINARY_URL for your application in production.
Now back to your original question. This error typically means that there's something wrong with the Cloudinary configuration (i.e. it's either incorrect or completely missing). Without seeing the actual code that you're using it would be impossible to pinpoint the exact problem.
I'm going to assume that your replacing the api_key, api_secret and cloud_name with the actual values. That said, I would still double check to make sure those values are correct.
In my Heroku deployments, I use dovenv to set the environment variables in development, and use the either the Heroku Dashboard or CLI to set them in production.
If you're still having difficulties, please post the actual code your using (omitting your actual api key, of course), including the content of your .env file.