Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OWASP Juice Shop
Achieving sustainability for open source projects
https://www.owasp.org/index.php/OWASP_Juice_Shop_Projec...
Chapter One
WAT?
OWASP Juice Shop...
...is an intentionally insecure webapp written in
Node.js, Express and AngularJS. It contains 38+
hack...
Modern Web-Architecture
Javascript all the way from UI to REST API
OWASP Juice Shop CTF...
...is a commandline tool written in Node.js and
published on NPM.js. It helps you to set up and
ho...
<!‐‐ uncomment this and the following slide **ONLY** if...
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐>
<!‐‐ ...Juice Shop got promoted to  Lab  Project 
during the Project Summit prior to this AppSecEU! :‐D
The next OWASP Con...
Chapter Two
Open Source
Antipatterns
Barren README
An empty or lackluster front-page radiates the impression that
nobody takes serious care of the project.
Bad Example
Worse Example
Worst Example
Good Example
Better(?) Example
Pile of Issues
Open issues pile up in the ticketing system, most of them
unanswered and unattended.
A pile of unattended issues
(🤔)
Really a 💩-pile of unattended issues
Counter: Use  labels  properly
Agile Counter: Kanban Board
https://huboard.com/bkimminich/juice-shop
PR Disaster
Pull Requests are routinely ignored or ៯�ogged to death.
Ignored Pull Requests
(🤔)
Example for a PR 韹�ogged to death*
https://github.com/zaproxy/zaproxy/pull/2837
*Disclaimer: This example should by no mea...
Good Counter: Contribution Guide (ZAP)
https://github.com/zaproxy/zaproxy/blob/develop/CONTRIBUTING.md#g
for-pull-request-...
Contribution Guide (Juice Shop)
https://github.com/bkimminich/juice-
shop/blob/master/CONTRIBUTING.md
Auto Counter: 👊-enforced Coding Style
http://standardjs.com
Solecistic Versioning
The syntax (MAJOR.MINOR.PATCH) is used while
its semantics are not adhered to.
Semantic Versioning
Bad Example: AngularJS 1.x
Good Example: AngularJS 2+
Juice Shop takes it serious
For a tiny incompatible con៯�guration-៯�le change Juice Shop went from 2.26.0 to 3.0.0
Major Zero
Not even the original author thinks that the project is mature
enough to release a 1.x version from it.
Example: z85‐cli😜
Chapter Three
My little OSS
Sustainability
Toolbox
Git Flow
The master branch stores the o៝�cial release history, while
development happens on the develop branch.
Git Flow ⁒ Feature Branches
Clean Code
Clean Javascript! 😮
'use strict' 
var path = require('path') 
var utils = require('../lib/utils') 
var challenges = requir...
Well, never mind...
fs.copy('app/index.template.html', 'app/index.html', {overwrite: true}, function () { 
      if (confi...
Test Automation
Example: UI Unit Test
it('should hold anonymous placeholder for email if current user is not logged in', 
  inject(functio...
Example: API Integration Test
frisby.create('GET password change without passing any passwords') 
  .get(REST_URL + '/user...
Example: Challenge E2E Test
describe('challenge "loginAdmin"', function () { 
  it('should log in Admin with SQLI attack o...
Example: Checking if a challenge is solved
protractor.expect = { 
  challengeSolved: function (context) { 
    describe('(...
What is a realistic goal for Test Coverage ?
100%
Juice Shop Test Coverage
Having all tests pass after a commit means, it's
safe to merge PRs or publish a new release!
Juic...
Mutation Testing
Reality check: Do your tests actually test stu៛�?
Example: Report for Juice Shop CTF
A realistic goal for Mutation Coverage ?
100%
Juice Shop Mutation Coverage
Juice Shop CTF Extension
92%* 98%
*of the UI unit tests!
(😏)
CI/CD
Chapter undefined
Live Dual Release
What could possibly go wrong?
Release Dashboard
Juice Shop
buildbuild passingpassing buildbuild passingpassing releaserelease v3.2.0v3.2.0
CTF Extension...
Chapter 3 (continued)
My little OSS
Sustainability
Toolbox
Quality Metrics
Example: Code Climate Stats
Example: bitHound Dashboard
Example: Coveralls 😡 at CTF-Extension
And now for the most important metric of all...
🚚
🚚 Truck Factor
The number of team members that would have to leave the project
to e៛�ectively kill it.
What is a realistic goal for Truck Factor ?
∞
Meaning: If the whole team leaves, a new developer can take over
and would b...
Dependency Control
Example: Gemnasium Dashboard
Chapter 4.1
New Open
Source
Antipatterns
Badge Barrage
The front-page is overcrowded with (mostly useless) information
and status badges.
Overexaggerated Example
Bad Example
Coin Flip CI
✔✔❌✔❌✔. With no code changes in between.
I wonder how our Live Release is doing...
🤞🙈😱🔮
Free beer
Some services might be free of charge for OSS projects but come
with some other hidden costs or annoyance.
Contributor Laurels
Not giving enough credit to contributors.
Easy Counter: Make them visible
Some contribs deserve bonus visibility
(CTFdSQLs🚩)
Josh Grossmann
(Customtheming🎭)
Timo Pagel
(CTF🌟/Docker📦)
Jannik Hollen...
git commits are not everything!
Juice Shop's Crowdin Translators
https://crowdin.com/project/owasp-juice-shop
Bloggers and Podcasters
https://github.com/bkimminich/juice-shop#references
Conferences & Meetups
https://github.com/bkimminich/juice-shop#references
Pro Counter: Stickers!
Pro+ Counter: Shirts & Stuff!
Chapter NaN
Release Outcome
✔=😎 or ❌=😭?
Epic 😎/😭 Dashboard
Juice Shop
buildbuild passingpassing buildbuild passingpassing releaserelease v3.2.0v3.2.0
CTF Extensio...
Copyright (c) 2017
Created with - The HTML Presentation Framework
Björn Kimminich
reveal.js
Owasp Juice Shop: Achieving sustainability for open source projects
Owasp Juice Shop: Achieving sustainability for open source projects
Upcoming SlideShare
Loading in …5
×

Owasp Juice Shop: Achieving sustainability for open source projects

2,859 views

Published on

OWASP Juice Shop is a "shooting star" among broken web applications. To make sure it does not end as a "one-hit wonder", the project embraces principles and techniques that enhance its sustainability, e.g. Clean Code, TDD, CI/CD, Quality Metrics and Mutation Testing.

In this session you will see how
- even a horrible language such as Javascript can be written in a maintainable manner
- a complete and reliable test suite eliminates the "fear of change"
- automation is a key to increased productivity - even for small open source projects
- free-for-open-source SaaS tools can improve your development process

Where is light, there is shadow! You will also learn
- about some limitations in the automation processes
- the pain keeping Javascript dependencies up to date
- why some 3rd party services had to be dropped

If the Internet gods are with us, we will even perform a production release of OWASP Juice Shop during the session!

Published in: Internet
  • Be the first to comment

Owasp Juice Shop: Achieving sustainability for open source projects

  1. 1. OWASP Juice Shop Achieving sustainability for open source projects https://www.owasp.org/index.php/OWASP_Juice_Shop_Project Presentation by /Björn Kimminich @bkimminich 0  Tweet Follow @owasp_juiceshop Follow @bkimminich Follow @bkimminich 151 Star 346Like 59
  2. 2. Chapter One WAT?
  3. 3. OWASP Juice Shop... ...is an intentionally insecure webapp written in Node.js, Express and AngularJS. It contains 38+ hacking challenges of varying di៝�culty tracked on a score board.
  4. 4. Modern Web-Architecture Javascript all the way from UI to REST API
  5. 5. OWASP Juice Shop CTF... ...is a commandline tool written in Node.js and published on NPM.js. It helps you to set up and host CTF events on the platform with the Juice Shop challenges. CTFd
  6. 6. <!‐‐ uncomment this and the following slide **ONLY** if... ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐>
  7. 7. <!‐‐ ...Juice Shop got promoted to  Lab  Project  during the Project Summit prior to this AppSecEU! :‐D The next OWASP Connector should make this official! (But you heard it here first!) ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐>
  8. 8. Chapter Two Open Source Antipatterns
  9. 9. Barren README An empty or lackluster front-page radiates the impression that nobody takes serious care of the project.
  10. 10. Bad Example
  11. 11. Worse Example
  12. 12. Worst Example
  13. 13. Good Example
  14. 14. Better(?) Example
  15. 15. Pile of Issues Open issues pile up in the ticketing system, most of them unanswered and unattended.
  16. 16. A pile of unattended issues (🤔)
  17. 17. Really a 💩-pile of unattended issues
  18. 18. Counter: Use  labels  properly
  19. 19. Agile Counter: Kanban Board https://huboard.com/bkimminich/juice-shop
  20. 20. PR Disaster Pull Requests are routinely ignored or ៯�ogged to death.
  21. 21. Ignored Pull Requests (🤔)
  22. 22. Example for a PR 韹�ogged to death* https://github.com/zaproxy/zaproxy/pull/2837 *Disclaimer: This example should by no means imply that the ZAP team is routinely ៯�ogging PRs to death! On the contrary, they o៛�er a helping hand to even those who totally ignore their !written contribution requirements
  23. 23. Good Counter: Contribution Guide (ZAP) https://github.com/zaproxy/zaproxy/blob/develop/CONTRIBUTING.md#g for-pull-request-pr-submission-and-processing
  24. 24. Contribution Guide (Juice Shop) https://github.com/bkimminich/juice- shop/blob/master/CONTRIBUTING.md
  25. 25. Auto Counter: 👊-enforced Coding Style http://standardjs.com
  26. 26. Solecistic Versioning The syntax (MAJOR.MINOR.PATCH) is used while its semantics are not adhered to. Semantic Versioning
  27. 27. Bad Example: AngularJS 1.x
  28. 28. Good Example: AngularJS 2+
  29. 29. Juice Shop takes it serious For a tiny incompatible con៯�guration-៯�le change Juice Shop went from 2.26.0 to 3.0.0
  30. 30. Major Zero Not even the original author thinks that the project is mature enough to release a 1.x version from it.
  31. 31. Example: z85‐cli😜
  32. 32. Chapter Three My little OSS Sustainability Toolbox
  33. 33. Git Flow The master branch stores the o៝�cial release history, while development happens on the develop branch.
  34. 34. Git Flow ⁒ Feature Branches
  35. 35. Clean Code
  36. 36. Clean Javascript! 😮 'use strict'  var path = require('path')  var utils = require('../lib/utils')  var challenges = require('../data/datacache').challenges  exports = module.exports = function servePremiumContent () {    return function (req, res) {      if (utils.notSolved(challenges.premiumPaywallChallenge)) {        utils.solve(challenges.premiumPaywallChallenge)      }      res.sendFile(path.resolve(__dirname, '../app/private/under­construction.gif'))    }  }
  37. 37. Well, never mind... fs.copy('app/index.template.html', 'app/index.html', {overwrite: true}, function () {        if (config.get('application.logo')) {          var logo = config.get('application.logo')          if (utils.startsWith(logo, 'http')) {            var logoPath = logo            logo = decodeURIComponent(logo.substring(logo.lastIndexOf('/') + 1))            utils.downloadToFile(logoPath, 'app/public/images/' + logo)          }          var logoImageTag = '<img class="navbar­brand navbar­logo" src="/public/images/' + logo +          replace({ regex: /<img class="navbar­brand navbar­logo" (.*?)="">/, replacement: logoImag       }        if (config.get('application.theme')) {          var themeCss = 'bower_components/bootswatch/' + config.get('application.theme') +          replace({ regex: /bower_components/bootswatch/.*/bootstrap.min.css/, replacement: th       }      }) ...it's still Javascript at the end of the day! 🤐
  38. 38. Test Automation
  39. 39. Example: UI Unit Test it('should hold anonymous placeholder for email if current user is not logged in',    inject(function () {        $httpBackend.whenGET('/rest/user/whoami').respond(200, {user: {}})        $httpBackend.flush()        expect(scope.userEmail).toBe('anonymous')    })  )
  40. 40. Example: API Integration Test frisby.create('GET password change without passing any passwords')    .get(REST_URL + '/user/change­password')    .expectStatus(401)    .expectBodyContains('Password cannot be empty')    .toss() No-idea-why-this-💩 -happens-snippet-injection Vulnerability: Did anyone notice how above code was totally butchered by highlight.js beginning at the opening single quote in line 1?
  41. 41. Example: Challenge E2E Test describe('challenge "loginAdmin"', function () {    it('should log in Admin with SQLI attack on email field using "' or 1=1­­"', function     email.sendKeys('' or 1=1­­')      password.sendKeys('a')      loginButton.click()      expect(browser.getLocationAbsUrl()).toMatch(//search/)    })    protractor.expect.challengeSolved({challenge: 'Login Admin'})  })         
  42. 42. Example: Checking if a challenge is solved protractor.expect = {    challengeSolved: function (context) {      describe('(shared)', function () {        beforeEach(function () {          browser.get('/#/score­board')        })        it("challenge '" + context.challenge + "' should be solved on score board", function         expect(element(by.id(context.challenge + '.solved')).getAttribute('class')).not.toMatch(         expect(element(by.id(context.challenge + '.notSolved')).getAttribute('class')).toMatch(       })      })    }  }         
  43. 43. What is a realistic goal for Test Coverage ? 100%
  44. 44. Juice Shop Test Coverage Having all tests pass after a commit means, it's safe to merge PRs or publish a new release! Juice Shop CTF Extension
  45. 45. Mutation Testing Reality check: Do your tests actually test stu៛�?
  46. 46. Example: Report for Juice Shop CTF
  47. 47. A realistic goal for Mutation Coverage ? 100%
  48. 48. Juice Shop Mutation Coverage Juice Shop CTF Extension 92%* 98% *of the UI unit tests! (😏)
  49. 49. CI/CD
  50. 50. Chapter undefined Live Dual Release What could possibly go wrong?
  51. 51. Release Dashboard Juice Shop buildbuild passingpassing buildbuild passingpassing releaserelease v3.2.0v3.2.0 CTF Extension buildbuild passingpassing releaserelease v1.1.2v1.1.2
  52. 52. Chapter 3 (continued) My little OSS Sustainability Toolbox
  53. 53. Quality Metrics
  54. 54. Example: Code Climate Stats
  55. 55. Example: bitHound Dashboard
  56. 56. Example: Coveralls 😡 at CTF-Extension
  57. 57. And now for the most important metric of all... 🚚
  58. 58. 🚚 Truck Factor The number of team members that would have to leave the project to e៛�ectively kill it.
  59. 59. What is a realistic goal for Truck Factor ? ∞ Meaning: If the whole team leaves, a new developer can take over and would be able to maintain & continue working on the project!
  60. 60. Dependency Control
  61. 61. Example: Gemnasium Dashboard
  62. 62. Chapter 4.1 New Open Source Antipatterns
  63. 63. Badge Barrage The front-page is overcrowded with (mostly useless) information and status badges.
  64. 64. Overexaggerated Example
  65. 65. Bad Example
  66. 66. Coin Flip CI ✔✔❌✔❌✔. With no code changes in between.
  67. 67. I wonder how our Live Release is doing... 🤞🙈😱🔮
  68. 68. Free beer Some services might be free of charge for OSS projects but come with some other hidden costs or annoyance.
  69. 69. Contributor Laurels Not giving enough credit to contributors.
  70. 70. Easy Counter: Make them visible
  71. 71. Some contribs deserve bonus visibility (CTFdSQLs🚩) Josh Grossmann (Customtheming🎭) Timo Pagel (CTF🌟/Docker📦) Jannik Hollenbach
  72. 72. git commits are not everything!
  73. 73. Juice Shop's Crowdin Translators https://crowdin.com/project/owasp-juice-shop
  74. 74. Bloggers and Podcasters https://github.com/bkimminich/juice-shop#references
  75. 75. Conferences & Meetups https://github.com/bkimminich/juice-shop#references
  76. 76. Pro Counter: Stickers!
  77. 77. Pro+ Counter: Shirts & Stuff!
  78. 78. Chapter NaN Release Outcome ✔=😎 or ❌=😭?
  79. 79. Epic 😎/😭 Dashboard Juice Shop buildbuild passingpassing buildbuild passingpassing releaserelease v3.2.0v3.2.0 CTF Extension buildbuild passingpassing releaserelease v1.1.2v1.1.2
  80. 80. Copyright (c) 2017 Created with - The HTML Presentation Framework Björn Kimminich reveal.js

×