Protect and Monitor Your Front End Application

Part two in a series about how to deploy a secured, monitored, optimized web application to AWS Amplify

In this part I will introduce Snyk the doberman, here to serve and protect your application from any package trying to oppose a security threat and the simplicity of integrating it as part of the deployment to AWS Amplify.

Now seriously what Snyk does is lots of amazing things, starting with detecting vulnerable dependencies during coding in your IDE to testing your running environment to verify there is no exposure to existing vulnerabilities and monitor for newly disclosed vulnerabilities.

Lease the Doberman

To get started, first we need an account on Snyk which offers a free tier.
Afterwards we'll go to our project root directory and install the Snyk cli.

npm i -g snyk, once installation is finished we need to authenticate with our account, snyk auth.

Now the entire Snyk options are in game, you can read about them here - https://snyk.io/docs/getting-started-with-our-cli/

I usually just let the Snyk wizard do the hard work for me using snyk wizard command and follow the steps.

Doggie, Sit!

So how do we utilise this great tool in our CI/CD?
We'll have to add a few lines to our amplify.yml in the postTest step if you have that test stage (I hope you do), or in the postBuild step.

	version: 0.1
	frontend:
	phases:
	preBuild:
	commands:
	- npm install
	build:
	commands:
	# on 'master' branch create a new release, bump version, create changelog and commit it.
	- if [ "${AWS_BRANCH}" = "master" ]; then npm run release; fi
	- npm run build
	artifacts:
	baseDirectory: dist/console
	files:
	- '**/*'
	cache:
	paths:
	- node_modules/**/*
	test:
	phases:
	preTest:
	commands:
	- npm install
	- npm install wait-on
	- npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
	- 'npm start & npx wait-on http://localhost:3869'
	test:
	commands:
	- npm run test
	- npx snyk test
	- 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
	postTest:
	commands:
	- npx mochawesome-merge --reportDir cypress/report/mochawesome-report > cypress/report/mochawesome.json
	- npx snyk monitor --org=vonage-5p5
	artifacts:
	baseDirectory: cypress
	configFilePath: '**/mochawesome.json'
	files:
	- '**/*.png'
	- '**/*.mp4'

view raw amplify.yml hosted with ❤ by GitHub

lines 30, 35 (DEV.to doesn't know how to handle lines highlighting, sounds like the right PR 😏)

snyk test is pretty straightforward and will test and scan our package.json in a recursive manner and check that none of the packages is vulnerable and in case he detect a security issue he will fail our test phase.

snyk monitor will take a snapshot of the deployed packages and will monitor them on a daily basis unless we specify otherwise on the Snyk dashboard.

At Vonage we hooked the Snyk alerts into our internal systems such as Slack and once an issue comes up we address it immediately.

Man's Best Friend

Last but not least, source control management integration to test, review and monitor all of the repositories, notifying if anything found and creating a PR to update the package if a newer secured version is available using smart indexing to raise the minimum required version so no breaking changes will be introduced.

** Bonus fact: Snyk have a patching mechanism for unmaintained widely used packages which is part of their service, you can read about it more here

Part 1 - Enterprise Grade CI/CD For Frontend Applications

In the next post I'll review the logging services I use and enjoy as part of creating a solid front end application that is built to last.

Credits

The amazing cover photo is by Jen B on Unsplash