Integrate Snyk into your workflow

Here's an example of how to integrate Snyk into your SCM workflow. We're using GitHub in this example.

1. Clone a GitHub repository

Open up your CLI and run a git clone command on the goof repository.

git clone https://github.com/snyk/goof.git

2. Create a new branch

Now we're going to create a new branch, add some vulnerabilities on this branch, and then merge our changes back to GitHub as a Pull Request.

git branch add_vulns
git checkout add_vulns

3. Add a new open source dependency

Have a look at the package.json manifest file in your cloned goof application. We can see 27 dependencies listed – but these 27 dependencies have additional libraries that they also depend on. These are referred to as transitive dependencies, and it's common to see the total number of dependencies increase considerably as developers include open source libraries in their own open source project.

{
 "name": "goof",
 "version": "1.0.1",
 "description": "A vulnerable todo demo application",
 "homepage": "https://snyk.io/",
 "repository": {
 "type": "git",
 "url": "https://github.com/Snyk/snyk-todo-list-demo-app/"
 },
 "scripts": {
 "start": "node app.js",
 "build": "browserify -r jquery > public/js/bundle.js",
 "cleanup": "mongo express-todo --eval 'db.todos.remove({});'",
 "test": "snyk test"
 },
 "engines": {
 "node": "6.14.1"
 },
 "dependencies": {
 "adm-zip": "0.4.7",
 "body-parser": "1.9.0",
 "cfenv": "^1.0.4",
 "consolidate": "0.14.5",
 "cookie-parser": "1.3.3",
 "dustjs-helpers": "1.5.0",
 "dustjs-linkedin": "2.5.0",
 "ejs": "1.0.0",
 "ejs-locals": "1.0.2",
 "errorhandler": "1.2.0",
 "express": "4.12.4",
 "express-fileupload": "0.0.5",
 "file-type": "^8.1.0",
 "humanize-ms": "1.0.1",
 "jquery": "^2.2.4",
 "lodash": "4.17.4",
 "marked": "0.3.5",
 "method-override": "latest",
 "moment": "2.15.1",
 "mongoose": "4.2.4",
 "morgan": "latest",
 "ms": "^0.7.1",
 "npmconf": "0.0.24",
 "optional": "^0.1.3",
 "st": "0.2.4",
 "stream-buffers": "^3.0.1",
 "tap": "^11.1.3"
 },
 "devDependencies": {
 "browserify": "^13.1.1",
 "snyk": "^1.244.0"
 },
 "license": "Apache-2.0"
}

In goof, we're going to add another library to our list of dependencies. This library is called "tinymce": "4.1.0" and we will add it to the bottom of the dependencies section in the .json file.

{
 "name": "goof",
 "version": "1.0.1",
 "description": "A vulnerable todo demo application",
 "homepage": "https://snyk.io/",
 "repository": {
 "type": "git",
 "url": "https://github.com/Snyk/snyk-todo-list-demo-app/"
 },
 "scripts": {
 "start": "node app.js",
 "build": "browserify -r jquery > public/js/bundle.js",
 "cleanup": "mongo express-todo --eval 'db.todos.remove({});'",
 "test": "snyk test"
 },
 "engines": {
 "node": "6.14.1"
 },
 "dependencies": {
 "adm-zip": "0.4.7",
 "body-parser": "1.9.0",
 "cfenv": "^1.0.4",
 "consolidate": "0.14.5",
 "cookie-parser": "1.3.3",
 "dustjs-helpers": "1.5.0",
 "dustjs-linkedin": "2.5.0",
 "ejs": "1.0.0",
 "ejs-locals": "1.0.2",
 "errorhandler": "1.2.0",
 "express": "4.12.4",
 "express-fileupload": "0.0.5",
 "file-type": "^8.1.0",
 "humanize-ms": "1.0.1",
 "jquery": "^2.2.4",
 "lodash": "4.17.4",
 "marked": "0.3.5",
 "method-override": "latest",
 "moment": "2.15.1",
 "mongoose": "4.2.4",
 "morgan": "latest",
 "ms": "^0.7.1",
 "npmconf": "0.0.24",
 "optional": "^0.1.3",
 "st": "0.2.4",
 "stream-buffers": "^3.0.1",
 "tap": "^11.1.3",
 "tinymce": "4.1.0"
 },
 "devDependencies": {
 "browserify": "^13.1.1",
 "snyk": "^1.244.0"
 },
 "license": "Apache-2.0"
}

4. Create a package.json lock file

Let's create a lockfile for our Node application. For more details on the purpose of a package lockfile, see the Node.js documentation.

npm install --package-lock

5. Commit changes locally

First, we need to commit our changes locally, then push the local version of git to a remote version like GitHub. Let's check the status of the changes in our local git repository using the status command, then we'll add the changes to our local git and commit them.

git status
git add package*
git commit -m "adding tinymce v4.1.0"

6. Push changes to GitHub

This is the final step in committing your local code changes to GitHub by performing a git push. This will transfer the files and history to your upstream git repository on GitHub.

git push --set-upstream origin add_vulns

7. Review your changes on GitHub

GitHub has received your changes on your branch add_vulns, and you can compare the add_vulns branch with the master branch to generate a pull request.

GitHub displays an option to compare the add_vulns branch to the master branch and generate a pull request workflow at the top of the repository. Select this button to start the pull request workflow.

8. Snyk test on pull request checks

Snyk will test your pull request for vulnerability and license checks in the merge process. This creates an opportunity to establish a security gate and prevent pull requests from adding new vulnerabilities, or open source libraries that don't meet your license policy, to the source code baseline.

In the previous step, we completed the pull request workflow which directed us to the screenshot below. As the PR workflow completed, Snyk validated the vulnerability and license policy set for the project. Based on the policy, the checks either passed or failed and are represented in GitHub.

For more details on PRs see the article on our GitHub integration.