Storing API keys in MEAN Stack - angularjs

Question

Looking for the best way of storing(securely) a Google Places API key in a MEAN stack. I was going to use a .env file but I am not sure how to go about implementing this. My current solution is having express pull in the .env variable but then I am not sure what route to take from there to insert the key into the script tag. I can't find anything from angular on how to use a template for this, so I came to the conclusion I would have to use another template library like handlebars. I really do not like this approach, is there another 'best practices' way for solving this problem?

Answer 1

I recommend using module node-env-file. That's what I use for my projects and I'm pretty happy with it. It's very simple to setup (check out their docs) and works like a charm. It reads your variables from an .env file and embeds them into your Node project.
.env
# your environment variables
API_KEY1=abcd123
app.js
var env = require('node-env-file');
var API_KEY1 = process.env.API_KEY1;

Answer 2

I do the following in one of my projects - it works for me with my nodemon development environment. I store the same data via config vars in Heroku so as not to have to include the keys in my repository.
// loads confidential parameters to inject into process.env
var googlekey = fs.readFileSync("./ignored/privatekey.pem", "utf8");
var config = require("./server/config/local.env");
config.PRIVATE_KEY = googlekey;
//run server using nodemon
gulp.task('serve', function(){
return nodemon({
script: 'index.js',
watch: 'server/',
// ignore: ['app/**/*', 'dist/*', 'node_modules/*'],
env: config
})
.on('start', function () {
// done();
});
});

Answer 3

I'm going to assume you're using what Google refers to as a 'Browser key'. If, however, you're using a 'Server key', then you shouldn't be passing the key to your client-side code anyway.
If you're using Express response.render() to generate the HTML, you can pass the API key into res.render as a local, and reference it within your HTML or template.
The following is a snippet from a jade template I'm rendering with Express, that does something similar with the Stripe API:
extends layout
block head-content
script(src='https://js.stripe.com/v2/')
script.
// <![CDATA[
Stripe.setPublishableKey('#{stripePublicKey}');
// ]]>
It sounds like you're storing the key in an environment variable, so you could pass it into the Express rendering engine thus:
res.render('index', {stripePublicKey: process.env.STRIPE_PUBLIC_KEY});
It also sounds like you want to avoid using jade or some other template engine, so you can use EJS, which will allow you to use 'pure' HTML, but with variables. Here's a good tutorial for getting started:
http://robdodson.me/how-to-use-ejs-in-express/
If you have a large amount of content already, and you don't want to have to rename all of your existing .html files to .ejs just to get that one variable passed in, you can do this:
app.engine('html', require('ejs').renderFile);
as described in more detail here:
http://expressjs.com/api.html#app.engine
It sounds like you're already working on the other best practices list under 'Best practices for securely using API keys' at the link below, but be sure especially you're following the guidance regarding restricting access by referrer URL.
https://developers.google.com/console/help/new/
Best of luck!
Tim