Git Product home page Git Product logo

devsecops-example-heroku's Introduction

DevSecOps Example Heroku

This repository shows exemplary how to set up a DevSecOps build chain which detects vulnerabilities in an application upon a commit / deployment.

DO NOT DEPLOY THE APPLICATION IN THIS REPOSITORY IF YOU DO NOT EXACTLY KNOW WHAT YOU ARE DOING

The enclosed application contains:

  • Only an index page with a reflected XSS vulnerability
  • A framework which contains vulnerabilities

Vulnerable Application

This is a simple web application written with Django. It implements a single view which will return everything the user inputs. The templating engine disables the automatic XSS protection feature which sanitizes the input. In addition, the XSSDisableMiddleware disables the XSS protection feature implemented in modern web browser.

Tutorial

This application contains a build file for CircleCI to deploy the vulnerable application to Heroku. There are build jobs defined to do a dependency check for the python application using safety and a dynamic application security test using the Crashtest Security Suite.

This application is used within workshops hold by Crashtest Security. This tutorial contains the steps to follow the workshop. In case you want to attend one of those workshops, let us know via e-mail.

Create Accounts

  • GitHub: Create an account to get access to the source code of this example project
  • CircleCI: Login using GitHub to grant CircleCI access to your GitHub projects
  • Heroku: Create an account to deploy the example application there
  • Crashtest Security: Create an account to conduct a dynamic vulnerability scan

Fork the Repository

To get access to the repository code, fork this repository by clicking the "Fork" button on the top right: https://github.com/crashtest-security/devsecops-example-heroku

Fork Repository

This will create your own copy of the code repository and redirect you to the repository page.

Configure Heroku to be used with this project

  • Create a new application within Heroku: https://dashboard.heroku.com/new-app. You may choose any name and region you like. Just remember the name of your new Heroku app. We will refer to the name of your Heroku app as HEROKU_APP_NAME. For this tutorial, I have named the application sigs-devsecops-example
  • Go to the app settings, click on "Reveal Config Vars" and add a new environment variable DISABLE_COLLECTSTATIC = 1. This is needed for the Django application to run properly on heroku. If you miss to set this environment variable you will later see an error message during the corresponding build step.
  • When you click on "Open App", you should see a default page from Heroku that states that you have no application running yet.

Heroku Environment Variable

  • Retrieve your Heroku API key here: https://dashboard.heroku.com/account (At the bottom of the page). You need this API key to grant CircleCI access to deploy your application. We will refer to this variable as HEROKU_API_KEY.

Link GitHub Repository with CircleCI Workflow

  • Open the CircleCI dashboard: https://circleci.com/dashboard. When you get asked for login credentials, log in using your GitHub account. This grants CircleCI access permissions to get the code from your repository.

  • Add your GitHub Repository to CircleCI by clicking "Add Projects" in the left menu bar and then on "Set Up Project"

  • Open the newly added project (pipeline) and click on "Project Settings" on the top right

  • Choose "Environment variables" in the left menu bar

  • Configure the following two environment variables:

    • HEROKU_APP_NAME - Enter the name that you previously chose
    • HEROKU_API_KEY - Enter the API Key as provided by Heroku

Circle CI Environment Variables

Commit a Change to the Repository

  • To start a fresh build in CircleCI, we need to trigger a change in the repository. Therefore we add a submit button to the form in the application.
  • In your GitHub repository navigate to devsecops-example-heroku/vulnerable/templates/index.html and click the pencil icon to edit the file.
  • Add a button to the form by adding the following code before the form closing tag (line 11).
<input type="submit" value="Send!" />

Add Submit Button to Application

  • When the file is saved, the change is commited to the repository and a new build is triggered in CircleCI automatically.

Successful Build in CircleCI

  • The build deploys the application and you can now access it from Heroku by clicking the "Open App" button.

Running Application

  • You can see that the application contains a Cross-Site-Scripting vulnerability by typing the following as your name within the application. This will make the browser show an alert box as it is interpreting your provided JavaScript:
<script>alert("XSS")</script>

Enable Python Safety (SAST) Build Step

  • To enable the dependency check of all python dependencies in the build, add the following lines at the end of the file devsecops-example-heroku/.circleci/config.yml (make sure that the indentation matches).
      - sast

Add DAST Scan

  • The new build step must fail, as there are known vulnerabilities in the Django version used.

Failed Build

  • To fix the build, figure out what the latest Django version is and update it in the file devsecops-example-heroku/requirements.txt. You can find the latest Django version here: https://www.djangoproject.com/download/

Enable Crashtest Security (DAST) Build Step

  • To integrate a dynamic vulnerability scan using the Crashtest Security Suite, log in on https://crashtest.cloud and create a new scan target with the following settings:

    • Project Type: Multi Page Application
    • Title: Choose a title you like
    • Protocol: https
    • URL: The URL that your application is running (Copy from your browser address bar after clicking on "Open App" in Heroku).
  • Click "Continue"

  • Choose the "Full Scan" scope to check for all possible vulnerabilities

  • Click "Create"

  • Click on "Verify Scan Target" to download the verification file. You need this file to allow the Crashtest Security Suite to scan your application.

Download Verification File

  • In GitHub within the root directory of your project click on "Create new file". Name the file similar to the downloaded verification file and fill it with the same content.

Add Verification File

  • Generate a Webhook within the Crashtest Security Suite. Go to the project preferences and click on "Generate" in the Webhook section

Generate Crashtest Security Suite Webhook

  • Add a new environment variable in the project settings in CircleCI:

    • CRASHTEST_WEBHOOK - Enter the ID of the webhook that you just generated (without the URL path).

Configure Webhook in CircleCI

  • Now enable the dynamic vulnerability scan for your application by adding the following lines at the end of the file devsecops-example-heroku/.circleci/config.yml (make sure that the indentation matches, the line "requires" has 4 additional whitespaces of indentation compared to the line before).
      # Start Crashtest Security Suite
      - dast:
          requires:
            - deploy

Add DAST Scan

  • Now the build fails because of several more detected vulnerabilities such as the Cross-Site-Scripting Vulnerability

Failed Build in CircleCI

Resolve Vulnerabilities

  • To resolve the Cross-Site-Scripting vulnerability open the file devsecops-example-heroku/vulnerable/templates/index.html and remove the pipe | safe in line 4.
  • Now you should get a successful build again and have a much more secure application than before.

devsecops-example-heroku's People

Contributors

dalabad avatar ekaratnida avatar phylu avatar

Forkers

sitdh tanabutt

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.