Using AWS credentials in a public GitHub repo (in a node.js project, built with Grunt.js) - security

Question

We have a MEAN (nodes.js back-end + angular front-end), where we use the Amazon S3 sdk to upload files to the storage service. We have our AWS credentials and we need to use them in the code.
We would like to publish our project in a public repository, but we don't want to share our credentials (by the way, Amazon monitors GitHub and notifies developers who disclose their credentials). How should we adapt our development workflow to have something secure (no disclosure) and convenient?

Answer 1

The solution consists in tuning the Gruntfile.js file, which defines what needs to be done during the build process. Depending on the one that you use as a starting point, things will be a bit different (and various use cases might need to be considered).
In our case, we use the angular fullstack yeoman generator (https://github.com/DaftMonk/generator-angular-fullstack) to generate the project skeleton. The Gruntfile.js that is produced by the generator is fairly sophisticated, so we had to edit a couple of sections. Here are the key points:
1. Passing arguments to Grunt
The first thing that we need, is to be able to invoke the build process and to pass arguments. The arguments should not end up in the repository, so developers should create a script outside the codebase to launch the build process (or type the arguments manually each time...). Grunt gives the ability to access command line arguments with the grunt.option() function. So, the first modification to the Gruntfile.js file is to add the following two lines right at the beginning:
module.exports = function (grunt) {
var amznUserId = grunt.option('AMZN_USER_ID');
var amznUserPassword = grunt.option('AMZN_USER_PASSWORD');
...
}
If you do that and then invoke grunt by typing:
grunt build --AMZN_USER_ID=myUserId --AMZN_USER_PASSWORD=aSecret
grunt serve --AMZN_USER_ID=myUserId --AMZN_USER_PASSWORD=aSecret
Then you will have the credential values available in the script variables.
2. Adding placeholders in the source files
The AMZN credentials are used in an Angular.JS component, typically in a controller. What you need to do is to replace the hard-coded values with variable placeholders, like this:
angular.module('demoApp')
.controller('MainCtrl', function ($scope, $http, socket) {
$scope.amzn_user_id = '##AMZN_USER_ID';
$scope.amzn_user_password = '##AMZN_USER_PASSWORD';
3. Injecting command line arguments into the placeholders
The last (and most tricky) part of the solution consists of injecting the 2 values passed to grunt into the placeholders. There are different Grunt plugins that can be used for this purpose. We have used the grunt-replace plugin with success. Here is what we had to do:
3.1 Install the plugin
npm install grunt-replace --save
3.2 Configure the plugin (specify how the injection should happen, more on this at the end)
grunt.initConfig({
replace: {
dist: {
options: {
patterns: [
{
match: 'AMZN_USER_ID',
replacement: amznUserId
},
{
match: 'AMZN_USER_PASSWORD',
replacement: amznUserPassword
}
]
},
files: [
{
expand: true,
flatten: false,
src: ['.tmp/concat/app/app.js'],
dest: '.'
},
{
expand: false,
flatten: false,
src: ['client/app/main/main.controller.js'],
dest: '.tmp/app/main/main.controller.js'
}
]
}
},
3.3. Invoke the plugin in the grunt build and grunt serve workflows
Please note that the order is important and that the replace lines must be exactly in that position.
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'env:all', 'env:prod', 'express:prod', 'wait', 'open', 'express-keepalive']);
}
if (target === 'debug') {
return grunt.task.run([
'clean:server',
'env:all',
'injector:stylus',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'concurrent:debug'
]);
}
grunt.task.run([
'clean:server',
'env:all',
'injector:stylus',
'concurrent:server',
'injector',
'wiredep',
'replace',
'autoprefixer',
'express:dev',
'wait',
'open',
'watch'
]);
});
and
grunt.registerTask('build', [
'clean:dist',
'injector:stylus',
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'replace',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
What happens behind the scenes
The key point is to realize that the angular fullstack generator defines a build workflow, where a special directory named .tmp is used. The content of this directory is not always the same (grunt build and grunt serve use it in slightly different ways). That is the reason why we had to define two replacement rules.