diff --git a/.github/workflows/depoy.yml b/.github/workflows/depoy.yml index e4f328dae..7f65e8945 100644 --- a/.github/workflows/depoy.yml +++ b/.github/workflows/depoy.yml @@ -19,6 +19,9 @@ jobs: echo "HEROKU_BRANCH=master" >> $GITHUB_ENV fi echo "HEROKU_BRANCH=master" >> $GITHUB_ENV + - name: Install Heroku CLI + run: | + curl https://cli-assets.heroku.com/install.sh | sh - name: "Deploy ${{ github.ref }} to Heroku" uses: akhileshns/heroku-deploy@v3.13.15 with: diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 229f5ac5a..ee6ef35bf 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -14,6 +14,7 @@ permissions: jobs: build: + if: github.repository == 'devsecopsmaturitymodel/DevSecOps-MaturityModel' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 @@ -73,11 +74,14 @@ jobs: echo "HEROKU_BRANCH=master" >> $GITHUB_ENV fi echo "HEROKU_BRANCH=master" >> $GITHUB_ENV + - name: Install Heroku CLI + run: | + curl https://cli-assets.heroku.com/install.sh | sh - name: "Deploy ${{ github.ref }} to Heroku" - uses: akhileshns/heroku-deploy@9fd0f9faae4aa93a38d6f5e25b9128589f1371b0 #v3.12.14 + uses: akhileshns/heroku-deploy@v3.13.15 with: heroku_api_key: ${{ secrets.HEROKU_API_KEY }} heroku_app_name: "dsomm" heroku_email: timo.pagel@owasp.org branch: ${{ env.HEROKU_BRANCH }} - usedocker: true \ No newline at end of file + usedocker: true diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 04e4ea272..9d09dd6f9 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -13,6 +13,6 @@ jobs: with: node-version: 16.0 - name: Install dependencies - run: npm install + run: npm install --legacy-peer-deps - name: Test run: npm test -- --watch=false --browsers=ChromeHeadless diff --git a/Development.md b/Development.md index 0527c5aae..232bdf22c 100644 --- a/Development.md +++ b/Development.md @@ -1,28 +1,51 @@ -# DSOMM +# DevSecOps Maturity Model (DSOMM) -## Development server +## Introduction -- Clone the repo +The DevSecOps Maturity Model (DSOMM) is an open-source framework designed to help organizations evaluate and improve their **DevSecOps** practices. +It provides structured **security maturity levels**, recommendations, and automation insights to enable teams to build **secure, efficient, and scalable software**. + +This guide walks you through **setting up the project locally**, making contributions, and submitting a pull request. + +## **Project Setup** + +### Development Server + +The DSOMM is based [Angular](https://angular.dev/) and uses npm for package management. + +- If you have not yet installed npm or the Angular command line tools, install them now. First [NodeJS](https://nodejs.org/en/download) (which provides npm), then Angular: + +```bash +npm install -g @angular/cli ``` + +- Clone the DSOMM repo + +```bash git clone https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel.git ``` + - Change directory to DSOMM -``` + +```bash cd DevSecOps-MaturityModel ``` + - Install Dependencies -``` + +```bash npm install ``` -- Downloads the generated.yaml and put it in the required folder -``` + +- **NB!** The DSOMM activities are maintained separately. Download the `generated.yaml` and put it in the required folder + +```bash curl https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/main/src/assets/YAML/generated/generated.yaml -o src/assets/YAML/generated/generated.yaml ``` - Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. - -## Code scaffolding +## Code Scaffolding Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. @@ -30,13 +53,20 @@ Run `ng generate component component-name` to generate a new component. You can Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. -## Running unit tests +## Running Unit Tests Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). ## Coding Style Conventions -- We follow the coding style defined by [ESLint](https://eslint.org/). +- We follow the coding style defined by [ESLint](https://eslint.org/). - We also use [Prettier](https://prettier.io/docs/en/index.html) as our opinionated code formatter. -- To validate the schemas of the DSOMM yaml files in the IDE, it is recommended to use the VS Code extension [redhat.vscode-yaml](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml). The schemas are stored in /src/assets/YAML/schemas +- To validate the schemas of the DSOMM yaml files in the IDE, it is recommended to use the VS Code extension [redhat.vscode-yaml](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml). The schemas are stored in `/src/assets/YAML/schemas` + +### Running Linter + +Run `ng lint` to run the linter from the command line. +If you want to lint only a specific component, use: +```bash +ng lint --lint-file-patterns .\src\app\component\xxxxxx\ diff --git a/README.md b/README.md index 86d424e77..e8ffe2352 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ From a startup to a multinational corporation the software development industry The OWASP DevSecOps Maturity Model provides opportunities to harden DevOps strategies and shows how these can be prioritized. -With the help of DevOps strategies security can also be enhanced. For example, each component such as application libraries and operating system libraries in docker images can be tested for known vulnerabilities. +With the help of DevOps strategies security can also be enhanced. For example, each component such as application libraries and operating system libraries in docker images can be tested for known vulnerabilities. Attackers are intelligent and creative, equipped with new technologies and purpose. Under the guidance of the forward-looking DevSecOps Maturity Model, appropriate principles and measures are at hand implemented which counteract the attacks. @@ -63,9 +63,9 @@ In case you would like to perform a DevSecOps assessment, the following tools ar 3. Browse to (on macOS and Windows browse to if you are using docker-machine instead of the native docker installation) -For customized DSOMM, take a look at https://github.com/wurstbrot/DevSecOps-MaturityModel-custom. In case you would like to have perform an assessment for multiple teams, iterate from port 8080 to 8XXX, depending of the size of your team. +For customized DSOMM, take a look at https://github.com/wurstbrot/DevSecOps-MaturityModel-custom. -You can download your current state from the circular headmap and mount it again via +You can download your current state from the circular heatmap and mount it again via ```bash wget https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/main/src/assets/YAML/generated/generated.yaml # or go to /circular-heatmap and download edited yaml (bottom right) @@ -94,6 +94,29 @@ service docker start docker run -d -p 80:8080 wurstbrot/dsomm:latest ``` +## Generating the `generated.yaml` File + +The `generated.yaml` file is dynamically created during the build process. If you don’t see this file after setup, follow these steps to generate it: + +**1. Clone the Required Repository:** +The `generated.yaml` file is built via the DevSecOps-MaturityModel-data repository. Make sure you have cloned and set it up correctly. + +**2. Run the Build Command:** +Navigate to the project directory and run the following command: +- *Using npm:* + +```sh +npm run build +```` + +- *Using yarn:* + +```sh +yarn build +``` + +*If the file is missing, ensure all dependencies are installed and that you have the correct access to the `DevSecOps-MaturityModel-data` repository.* + ## Activity Definitions The definition of the activities are in the [data-repository](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data). @@ -124,10 +147,18 @@ In the corresponding [dimension YAMLs](https://github.com/devsecopsmaturitymodel [...] teamsImplemented: Default: false + B: true C: true - evidence: - B: Showed Jenkinsfile + teamsEvidence: + B: All team members completed OWASP Secure Coding Dojo training on 2025-01-11. + C: | + The pentest report from 2025 has been split into Jira tasks under + [TODO-123](https://jira.example.com/issues/TODO-123). + + _2025-04-01:_ All fixes of **critical** findings are deployed to production. ``` +The `|` is yaml syntax to indicate that the evidence spans multiple lines. Markdown +syntax can be used. The evidence is currently visible on the activity from the Matrix page. # Back link diff --git a/package-lock.json b/package-lock.json index 411f497b8..d2244a0e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14346,10 +14346,11 @@ } }, "node_modules/serialize-javascript": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz", - "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, + "license": "BSD-3-Clause", "dependencies": { "randombytes": "^2.1.0" } @@ -26687,9 +26688,9 @@ } }, "serialize-javascript": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz", - "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, "requires": { "randombytes": "^2.1.0" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 81df5a00e..2ec9ff596 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -14,7 +14,8 @@ const routes: Routes = [ { path: 'circular-heatmap', component: CircularHeatmapComponent }, { path: 'activity-description', component: ActivityDescriptionComponent }, { path: 'mapping', component: MappingComponent }, - { path: 'usage', component: UsageComponent }, + { path: 'usage', redirectTo: 'usage/' }, + { path: 'usage/:page', component: UsageComponent }, { path: 'teams', component: TeamsComponent }, { path: 'about', component: AboutUsComponent }, { path: 'userday', component: UserdayComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c4911cc82..ecc93f8b4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,12 @@ import { AboutUsComponent } from './component/about-us/about-us.component'; import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component'; import { TeamsComponent } from './component/teams/teams.component'; import { ToStringValuePipe } from './pipe/to-string-value.pipe'; +import { ModalMessageComponent } from './component/modal-message/modal-message.component'; +import { + MatDialogModule, + MAT_DIALOG_DATA, + MatDialogRef, +} from '@angular/material/dialog'; @NgModule({ declarations: [ @@ -40,16 +46,23 @@ import { ToStringValuePipe } from './pipe/to-string-value.pipe'; TeamsComponent, ToStringValuePipe, UserdayComponent, + ModalMessageComponent, ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialModule, + MatDialogModule, ReactiveFormsModule, HttpClientModule, ], - providers: [ymlService], + providers: [ + ymlService, + ModalMessageComponent, + { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: MatDialogRef, useValue: { close: (dialogResult: any) => {} } }, + ], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.html b/src/app/component/circular-heatmap/circular-heatmap.component.html index 6e6347d93..43ba21b35 100644 --- a/src/app/component/circular-heatmap/circular-heatmap.component.html +++ b/src/app/component/circular-heatmap/circular-heatmap.component.html @@ -284,8 +284,8 @@

Nothing to show

class="normal-button" mat-raised-button class="resetButtonClass" - (click)="ResetIsImplemented()"> - Reset Implemented + (click)="deleteLocalTeamsProgress()"> + Delete team progress diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.spec.ts b/src/app/component/circular-heatmap/circular-heatmap.component.spec.ts index a1d1515d0..cb10751cb 100644 --- a/src/app/component/circular-heatmap/circular-heatmap.component.spec.ts +++ b/src/app/component/circular-heatmap/circular-heatmap.component.spec.ts @@ -4,6 +4,7 @@ import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service'; import { CircularHeatmapComponent } from './circular-heatmap.component'; import { RouterTestingModule } from '@angular/router/testing'; import { MatChip } from '@angular/material/chips'; +import { ModalMessageComponent } from '../modal-message/modal-message.component'; describe('CircularHeatmapComponent', () => { let component: CircularHeatmapComponent; @@ -11,19 +12,17 @@ describe('CircularHeatmapComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - providers: [ymlService, HttpClient, HttpHandler], + declarations: [CircularHeatmapComponent, MatChip], imports: [RouterTestingModule], - declarations: [CircularHeatmapComponent], + providers: [ + ymlService, + HttpClient, + HttpHandler, + { provide: ModalMessageComponent, useValue: {} }, + ], }).compileComponents(); - }); - beforeEach(async () => { - TestBed.configureTestingModule({ - declarations: [MatChip], - }).compileComponents(); - }); - beforeEach(() => { - fixture = TestBed.createComponent(CircularHeatmapComponent); + fixture = TestBed.createComponent(CircularHeatmapComponent); // Create fixture and component here component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts index 9a747b519..fa5e33da0 100644 --- a/src/app/component/circular-heatmap/circular-heatmap.component.ts +++ b/src/app/component/circular-heatmap/circular-heatmap.component.ts @@ -11,6 +11,10 @@ import * as yaml from 'js-yaml'; import { Router } from '@angular/router'; import { MatChip } from '@angular/material/chips'; import * as md from 'markdown-it'; +import { + ModalMessageComponent, + DialogInfo, +} from '../modal-message/modal-message.component'; export interface activitySchema { uuid: string; @@ -62,7 +66,7 @@ export class CircularHeatmapComponent implements OnInit { constructor( private yaml: ymlService, private router: Router, - private changeDetector: ChangeDetectorRef + public modal: ModalMessageComponent ) { this.showOverlay = false; } @@ -83,6 +87,14 @@ export class CircularHeatmapComponent implements OnInit { @ViewChildren(MatChip) chips!: QueryList; matChipsArray: MatChip[] = []; + displayMessage(dialogInfo: DialogInfo) { + // Remove focus from the button that becomes aria unavailable (avoids ugly console error message) + const buttonElement = document.activeElement as HTMLElement; + buttonElement.blur(); + + this.modal.openDialog(dialogInfo); + } + private LoadMaturityDataFromGeneratedYaml() { return new Promise((resolve, reject) => { console.log(`${this.perfNow()}s: LoadMaturityData Fetch`); @@ -843,9 +855,26 @@ export class CircularHeatmapComponent implements OnInit { this.noActivitytoGrey(); } - ResetIsImplemented() { - localStorage.removeItem('dataset'); - this.loadDataset(); + deleteLocalTeamsProgress() { + // Remove focus from the button that becomes aria unavailable (avoids ugly console error message) + const buttonElement = document.activeElement as HTMLElement; + buttonElement.blur(); + + let title: string = 'Delete local browser data'; + let message: string = + 'Do you want to delete all progress for each team?' + + '\n\nThis deletes all progress stored in your local browser, but does ' + + 'not change any progress stored in the yaml file on the server.'; + let buttons: string[] = ['Cancel', 'Delete']; + this.modal + .openDialog({ title, message, buttons, template: '' }) + .afterClosed() + .subscribe(data => { + if (data === 'Delete') { + localStorage.removeItem('dataset'); + location.reload(); // Make sure all load routines are initialized + } + }); } saveDataset() { diff --git a/src/app/component/modal-message/modal-message.component.css b/src/app/component/modal-message/modal-message.component.css new file mode 100644 index 000000000..375caf548 --- /dev/null +++ b/src/app/component/modal-message/modal-message.component.css @@ -0,0 +1,14 @@ +.dialog { + margin: 0.5em; + padding: 1em; +} + +.dialog-buttons { + display: flex; + justify-content: flex-end; +} + +button { + min-width: 5rem; + margin: 0 1rem; +} \ No newline at end of file diff --git a/src/app/component/modal-message/modal-message.component.html b/src/app/component/modal-message/modal-message.component.html new file mode 100644 index 000000000..f1ff005f7 --- /dev/null +++ b/src/app/component/modal-message/modal-message.component.html @@ -0,0 +1,14 @@ +
+

{{ data.title }}

+

+
+
+ +
diff --git a/src/app/component/modal-message/modal-message.component.spec.ts b/src/app/component/modal-message/modal-message.component.spec.ts new file mode 100644 index 000000000..213ea3cb9 --- /dev/null +++ b/src/app/component/modal-message/modal-message.component.spec.ts @@ -0,0 +1,52 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { DialogInfo, ModalMessageComponent } from './modal-message.component'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MatDialogModule } from '@angular/material/dialog'; + +describe('ModalMessageComponent', () => { + let component: ModalMessageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, MatDialogModule], + declarations: [ModalMessageComponent], + providers: [ + { provide: MatDialogRef, useValue: {} }, + { provide: MAT_DIALOG_DATA, useValue: {} }, + ], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ModalMessageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should render markdown correctly in the dialog', () => { + const dialogInfo: DialogInfo = new DialogInfo('A **test** markdown.'); + const dialogRef: MatDialogRef = + component.openDialog(dialogInfo); + + expect(dialogRef.componentInstance.data.message).toContain( + 'test' + ); + }); + + it('should render markdown correctly in the dialog', () => { + const dialogInfo: DialogInfo = new DialogInfo('A **test** markdown.'); + const dialogRef: MatDialogRef = + component.openDialog(dialogInfo); + + // Check if markdown rendering is applied + expect(dialogRef.componentInstance.data.message).toContain( + 'test' + ); + }); +}); diff --git a/src/app/component/modal-message/modal-message.component.ts b/src/app/component/modal-message/modal-message.component.ts new file mode 100644 index 000000000..2dbb00469 --- /dev/null +++ b/src/app/component/modal-message/modal-message.component.ts @@ -0,0 +1,87 @@ +import { Inject, Component, OnInit } from '@angular/core'; +import { + MAT_DIALOG_DATA, + MatDialogRef, + MatDialog, + MatDialogConfig, +} from '@angular/material/dialog'; +import * as md from 'markdown-it'; + +@Component({ + selector: 'app-modal-message', + templateUrl: './modal-message.component.html', + styleUrls: ['./modal-message.component.css'], +}) +export class ModalMessageComponent implements OnInit { + data: DialogInfo; + markdown: md = md(); + + DSOMM_host: string = 'https://github.com/devsecopsmaturitymodel'; + DSOMM_url: string = `${this.DSOMM_host}/DevSecOps-MaturityModel-data`; + meassageTemplates: Record = { + generated_yaml: new DialogInfo( + `{message}\n\n` + + `Please download the activity template \`generated.yaml\` ` + + `from [DSOMM-data](${this.DSOMM_url}) on GitHub.\n\n` + + 'The DSOMM activities are maintained and distributed ' + + 'separately from the software.', + 'DSOMM startup problems' + ), + }; + + constructor( + public dialog: MatDialog, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) data: DialogInfo + ) { + this.data = data; + } + + // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method + ngOnInit(): void {} + + openDialog( + dialogInfo: DialogInfo | string + ): MatDialogRef { + if (typeof dialogInfo === 'string') { + dialogInfo = new DialogInfo(dialogInfo); + } + if ( + dialogInfo.template && + this.meassageTemplates.hasOwnProperty(dialogInfo.template) + ) { + let template: DialogInfo = this.meassageTemplates[dialogInfo.template]; + dialogInfo.title = dialogInfo.title || template?.title; + dialogInfo.message = template?.message?.replace( + '{message}', + dialogInfo.message + ); + } + + dialogInfo.message = this.markdown.render(dialogInfo.message); + + const dialogConfig = new MatDialogConfig(); + dialogConfig.id = 'modal-message'; + dialogConfig.disableClose = true; + dialogConfig.data = dialogInfo; + dialogConfig.autoFocus = false; + this.dialogRef = this.dialog.open(ModalMessageComponent, dialogConfig); + return this.dialogRef; + } + + closeDialog(buttonName: string) { + this.dialogRef?.close(buttonName); + } +} + +export class DialogInfo { + title: string = ''; + template: string | null = ''; + message: string = ''; + buttons: string[] = ['OK']; + + constructor(msg: string = '', title: string = '') { + this.message = msg; + this.title = title; + } +} diff --git a/src/app/component/readme-to-html/readme-to-html.component.css b/src/app/component/readme-to-html/readme-to-html.component.css index b3185c84a..b4f87ccb2 100644 --- a/src/app/component/readme-to-html/readme-to-html.component.css +++ b/src/app/component/readme-to-html/readme-to-html.component.css @@ -2,5 +2,5 @@ /*background-color: aqua;*/ padding: 30px; padding-top: 0px; - -} \ No newline at end of file + max-width: 40rem; +} diff --git a/src/app/component/readme-to-html/readme-to-html.component.html b/src/app/component/readme-to-html/readme-to-html.component.html index eba984c36..2aaa1992d 100644 --- a/src/app/component/readme-to-html/readme-to-html.component.html +++ b/src/app/component/readme-to-html/readme-to-html.component.html @@ -1,3 +1,3 @@
-
+
diff --git a/src/app/component/teams/teams.component.ts b/src/app/component/teams/teams.component.ts index af4123843..1112f5788 100644 --- a/src/app/component/teams/teams.component.ts +++ b/src/app/component/teams/teams.component.ts @@ -13,6 +13,7 @@ export class TeamsComponent implements OnInit { teamGroups: Map = new Map(); constructor(private yaml: ymlService) {} + ngOnInit(): void { this.yaml.setURI('./assets/YAML/meta.yaml'); // Function sets column header diff --git a/src/app/component/usage/usage.component.html b/src/app/component/usage/usage.component.html index 2e8ea8473..f7b894534 100644 --- a/src/app/component/usage/usage.component.html +++ b/src/app/component/usage/usage.component.html @@ -1,3 +1,5 @@ - + diff --git a/src/app/component/usage/usage.component.spec.ts b/src/app/component/usage/usage.component.spec.ts index f67a0f13c..3fe84c5bb 100644 --- a/src/app/component/usage/usage.component.spec.ts +++ b/src/app/component/usage/usage.component.spec.ts @@ -1,6 +1,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { UsageComponent } from './usage.component'; +import { ActivatedRoute } from '@angular/router'; +import { of } from 'rxjs'; describe('UsageComponent', () => { let component: UsageComponent; @@ -12,13 +14,28 @@ describe('UsageComponent', () => { }).compileComponents(); }); - beforeEach(() => { + it('should create', () => { + TestBed.overrideProvider(ActivatedRoute, { + useValue: { params: of({}) }, + }); + fixture = TestBed.createComponent(UsageComponent); component = fixture.componentInstance; fixture.detectChanges(); - }); - it('should create', () => { expect(component).toBeTruthy(); + expect(component.page).toBe('USAGE'); + }); + + it('should load page', () => { + TestBed.overrideProvider(ActivatedRoute, { + useValue: { params: of({ page: 'test-page' }) }, + }); + + fixture = TestBed.createComponent(UsageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + + expect(component.page).toBe('test-page'); }); }); diff --git a/src/app/component/usage/usage.component.ts b/src/app/component/usage/usage.component.ts index 82db1e0ba..661f80812 100644 --- a/src/app/component/usage/usage.component.ts +++ b/src/app/component/usage/usage.component.ts @@ -1,10 +1,24 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-usage', templateUrl: './usage.component.html', styleUrls: ['./usage.component.css'], }) -export class UsageComponent { - constructor() {} +export class UsageComponent implements OnInit { + page: string = 'USAGE'; + constructor(private route: ActivatedRoute) {} + + ngOnInit() { + if (this.route && this.route.params) { + this.route.params.subscribe(params => { + let page = params['page']; + // CWE-79 - sanitize input + if (page.match(/^[\w.-]+$/)) { + this.page = page; + } + }); + } + } } diff --git a/src/assets/Markdown Files/README.md b/src/assets/Markdown Files/README.md index 678e5c2ef..cc59e6cb6 100644 --- a/src/assets/Markdown Files/README.md +++ b/src/assets/Markdown Files/README.md @@ -10,24 +10,26 @@ Attackers are intelligent and creative, equipped with new technologies and purpo # Usage -Go to https://dsomm.timo-pagel.de or clone [this repository](https://github.com/wurstbrot/DevSecOps-MaturityModel/) and run `startDocker.bash`. +Go to https://dsomm.owasp.org. * _matrix_ shows the dimensions, subdimensions and activities are described. -* _Implementation Levels_ can be used to measure the current implementation level by clicking on the specific activities which have been performed. -* _Ease and Value of Implementation_ is used for the maturity model development to see the ease and value of each activity to be able to compare it with activities within the subdimension and activities from other subdimensions. -* _Dependenies_ shows the dependencies between activities -* _Useage_ describes the dimensions -* _Full Report_ prints all activities to be able to print it +* _Implementation Levels_ can be used to show the current implementation level by clicking on the specific activities which have been performed (it is recommended to use a gitops-like flow) +* _Mappings_ Shows mappings to other standards and provides the ability to download an excel sheet +* _Usage_ describes how to use DSOMM In this [video](https://www.youtube.com/watch?v=tX9RHZ_O5NU) Timo Pagel describes different strategic approaches for your secure DevOps strategy. The use OWASP DSOMM in combination with [OWASP SAMM](https//owaspsamm.org) is explained. In case you have evidence or review questions to gather evidence, you can add the attribute "evidence" to an activity which will be attached to an activity to provide it to your CISO or your customer's CISO. You can switch on to show open TODO's for evidence by changing IS_SHOW_EVIDENCE_TODO to true 'bib.php' `define(IS_SHOW_EVIDENCE_TODO, true);` -# Community +This page uses the Browser's localStorage to store the state of the circular headmap. + +# Changes +Changes to the application are displayed at the release page of [DevSecOps-MaturityModel](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/releases). -Code Freeze: Currently, with the Google Summer student Aryan Prasad we develop a new Angular frontend version, therefore, we do not accept any code changes right now. +Changes to the maturity model content are displayed at the release page of [DevSecOps-MaturityModel-data](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/releases). +# Community Join #dsomm in [OWASP Slack](https://owasp.slack.com/join/shared_invite/zt-g398htpy-AZ40HOM1WUOZguJKbblqkw#/). Create issues or even better Pull Requests in [github](https://github.com/wurstbrot/DevSecOps-MaturityModel/). @@ -57,31 +59,22 @@ In case you would like to perform a DevSecOps assessment, the following tools ar ## Container 1. Install [Docker](https://www.docker.com) -2. Run `docker run --rm -p 8080:8080 wurstbrot/dsomm:latest` +2. Run `docker pull wurstbrot/dsomm:latest && docker run --rm -p 8080:8080 wurstbrot/dsomm:latest` 3. Browse to (on macOS and Windows browse to if you are using docker-machine instead of the native docker installation) -In case you would like to have perform an assessment for multiple teams, iterate from port 8080 to 8XXX, depending of the size of your team. -In case the application should be visible, but the "Implementation Level" shouldn't be changeable, consider the following code: +For customized DSOMM, take a look at https://github.com/wurstbrot/DevSecOps-MaturityModel-custom. -```bash -#!/bin/bash -set -xe +You can download your current state from the circular heatmap and mount it again via -IMAGE_NAME="/dsomm:latest" - -rm -Rf DevSecOps-MaturityModel || true -git clone git@github.com:wurstbrot/DevSecOps-MaturityModel.git -cp data/* DevSecOps-MaturityModel/data -cp -a selectedData.csv DevSecOps-MaturityModel/selectedData.csv - -cd DevSecOps-MaturityModel -docker build -t $IMAGE_NAME . -docker push $IMAGE_NAME +```bash +wget https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/main/src/assets/YAML/generated/generated.yaml # or go to /circular-heatmap and download edited yaml (bottom right) +docker run -p 8080:8080 -v /tmp/generated.yaml:/srv/assets/YAML/generated/generated.yaml wurstbrot/dsomm:latest ``` -This approach also allows teams to perform self assessment with changes tracked in a repository. +. +This approach also allows teams to perform self assessment with changes tracked in a repository. ## Amazon EC2 Instance @@ -97,29 +90,52 @@ This approach also allows teams to perform self assessment with changes tracked ```bash #!/bin/bash -yum update -y -yum install -y docker service docker start -docker run -d -p 80:80 wurstbrot/dsomm:latest +docker run -d -p 80:8080 wurstbrot/dsomm:latest ``` -## Tests +## Activity Definitions +The definition of the activities are in the [data-repository](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data). -To run basic tests just +## Teams and Groups +To customize these teams, you can create your own [meta.yaml](src/assets/meta.yaml) file with your unique team definitions. -```bash -docker-compose -f docker-compose.dev.yaml up test-php -``` +Assessments within the framework can be based on either a team or a specific application, which can be referred to as the context. Depending on how you define the context or teams, you may want to group them together. -# Credits +Here are a couple of examples to illustrate this, in breakers the DSOMM word: +- Multiple applications (teams) can belong to a single overarching team (application). +- Multiple teams (teams) can belong to a larger department (group). -* The dimension _Test and Verification_ is based on Christian Schneiders [Security DevOps Maturity Model (SDOMM)](https://www.christian-schneider.net/SecurityDevOpsMaturityModel.html). _Application tests_ and _Infrastructure tests_ are added by Timo Pagel. Also, the sub-dimension _Static depth_ has been evaluated by security experts at [OWASP Stammtisch Hamburg](https://www.owasp.org/index.php/OWASP_German_Chapter_Stammtisch_Initiative/Hamburg). -* The sub-dimension Process has been added after a discussion with [Francois Raynaud](https://www.linkedin.com/in/francoisraynaud/) that reactive activities are missing. -* Enhancement of my basic translation is performed by [Claud Camerino](https://github.com/clazba). -* Adding ISO 27001:2017 mapping, [Andre Baumeier](https://github.com/AndreBaumeier). -* Providing a documentation of how to use `docker` in the Juice Shop for simple copy&paste, [Björn Kimminich](https://github.com/bkimminich/). -* [OWASP Project Integration Project Writeup](https://github.com/OWASP/www-project-integration-standards/blob/master/writeups/owasp_in_sdlc/index.md) for providing documentation on different DevSecOps practices which are copied&pasted/ (and adopted) (https://github.com/northdpole, https://github.com/ThunderSon) -* The requirements from [level 0](https://github.com/AppSecure-nrw/security-belts/blob/master/white/) are based on/copied from [AppSecure NRW](https://appsecure.nrw/) +Feel free to create your own [meta.yaml](src/assets/meta.yaml) file to tailor the framework to your specific needs and mount it in your environment (e.g. kubernetes or docker). +Here is an example to start docker with customized meta.yaml: +``` +# Customized meta.yaml +cp src/assets/YAML/meta.yaml . +docker run -v $(pwd)/meta.yaml:/srv/assets/YAML/meta.yaml -p 8080:8080 wurstbrot/dsomm + +# Customized meta.yaml and generated.yaml +cp src/assets/YAML/meta.yaml . +cp $(pwd)/src/assets/YAML/generated/generated.yaml . +docker run -v $(pwd)/meta.yaml:/srv/assets/YAML/meta.yaml -v $(pwd)/generated.yaml:/srv/assets/YAML/generated/generated.yaml -p 8080:8080 wurstbrot/dsomm +``` + +In the corresponding [dimension YAMLs](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/tree/main/src/assets/YAML/default), use: +``` +[...] + teamsImplemented: + Default: false + B: true + C: true + teamsEvidence: + B: All team members completed OWASP Secure Coding Dojo training on 2025-01-11. + C: | + The pentest report from 2025 has been split into Jira tasks under + [TODO-123](https://jira.example.com/issues/TODO-123). + + _2025-04-01:_ All fixes of **critical** findings are deployed to production. +``` +The `|` is yaml syntax to indicate that the evidence spans multiple lines. Markdown +syntax can be used. The evidence is currently visible on the activity from the Matrix page. # Back link @@ -145,6 +161,8 @@ Multilanguage support is not given currently and not planned. [![Apprio Inc](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/master-old/assets/images/Apiiro_black_logo.png)](https://apiiro.com/) +[![Heroku (hosting)](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/master/src/assets/images/sponsors/heroku.png)](https://www.heroku.com/open-source-credit-program) + # Donations If you are using the model or you are inspired by it, want to help but don't want to create pull requests? You can donate at the [OWASP Project Wiki Page](https://owasp.org/donate/?reponame=www-project-devsecops-maturity-model&title=OWASP+Devsecops+Maturity+Model). Donations might be used for the design of logos/images/design or travels. diff --git a/src/assets/Markdown Files/USAGE.md b/src/assets/Markdown Files/USAGE.md index ff850f9df..fb72e4ea1 100644 --- a/src/assets/Markdown Files/USAGE.md +++ b/src/assets/Markdown Files/USAGE.md @@ -1,417 +1,63 @@ ---- -This article explains the usage of DSOMM, the dimensions and - corresponding sub-dimensions. +# DSOMM - DevSecOps Maturity Model -# Pre-Requirements +## What is DSOMM? +DSOMM is a framework that helps organizations to assess, improve and prioritize security activities in their software development cycle. -Before you start, there is kind of maturity level 0. +DSOMM is a project of the OWASP Foundation. -The pre-requirements are highly based (mostly copied) on - [AppSecure NRW](https://github.com/AppSecure-nrw/security-belts/tree/master/white). +## DSOMM vs OWASP SAMM +[DSOMM](https://dsomm.owasp.org/) and [OWASP SAMM](https://owaspsamm.org/) are both frameworks that share a common goal of improving security. -## Risk management +**OWASP SAMM** is more focused on the overall maturity of an organization's software assurance and security practices, with a broader scope that includes governance, compliance, risk management, and secure software development. -[NIST defines `risk`](https://csrc.nist.gov/glossary/term/risk) as +SAMM is written by security specialists for security specialists, focusing on security processes across the whole organizations. -> a measure of the extent to which an entity is threatened by a potential -circumstance or event, and typically is a function of: -> 1. the adverse impact, or magnitude of harm, that would arise -> if the circumstance or event occurs; and -> 2. the likelihood of occurrence. +**DSOMM** focuses on activities that integrate security directly into the DevOps workflows. DSOMM takes a more technical approach, going lower in the technology stack it provides a roadmap on how to systematically improve the security in the software development. -In information security, risks arise from the loss of: +DSOMM is written for technical teams focused on implementing secure software. -- confidentiality, -- integrity, -- or availability +DSOMM has currently has a OWASP Lab status, while SAMM has a Flagship status. -of information or information systems and reflect the -potential adverse impacts to: +# How to use this DSOMM site +The DSOMM application is a frontend only application, storing all progress in your local storage in your browser. If you delete your local storage, your progress will be gone, and you cannot share your saved progress with anyone else. -- organizational operations - (including: - mission, - functions, - image, - or reputation), -- organizational assets, -- individuals, -- other organizations -(see [NIST.SP.800-53Ar4](https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-53Ar4.pdf). +To do that, you need to install your own local DSOMM application. -A risk then tied to a **threat**, its **probability** and its **impacts**. +You can export the progress of the different activities as a `generated.yaml` file, which you may import into your own site. -If you are interested in Risk Management frameworks and -strategies, you can start from -[FISMA](https://csrc.nist.gov/Projects/risk-management/). -## Onboard Product Owner and other Managers +## How to setup your own DSOMM +The DSOMM application can be run as a Docker image, an Amazon EC2 instance, or as a standalone Angular application using NodeJS. Please see [INSTALL.md](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/blob/master/INSTALL.md) for further instructions. -To adopt a DSOMM in a product or a project, it is important to identify -the person or the team which is responsible to ensure -that risk-related considerations reflects the organizational -risk tolerance -(see [Risk Executive](https://csrc.nist.gov/glossary/term/risk_executive) -for a more complete view). +The DSOMM application is currently still a lightweight frontend only application, without a backend to store changes of progress. Any changes are stored in the browser. However, as above, you can export the `generated.yaml` and update your own site with this. -Depending on the project, this "Risk Manager" - which in layman terms -is responsible for judging "risks vs. costs" of the product - -can be the `Project Manager`, the `Product Owner` or else: -it is important that he has the proper risk management -knowledge and, receive a proper training. -The "Risk Manager" must be convinced that continuously improving -security through DSOMM is an effective way to -to minimize risk and build better products. +# The DSOMM framework +The DSOMM framework has a number of _activities_ grouped by _dimensions_ and _maturity levels_. E.g. the _Centralized system logging_ is a maturity level 1 activity in the _Logging_ dimension, while _Correlation of security events_ is considered level 5. -The first steps for deploying DSOMM are then the following: -1. identify the persons in charge for risk decisions -1. make them aware of information security risks, showing the impacts of - threats and their probability. -1. convince them that security requires continuous efforts -### Benefits +## Before you start +To prepare you for there are some activities that we recommend you do before you start using DSOMM. Getting the stakeholders onboard will ease your path. -- The "Risk Manager" is aware that all software have security vulnerabilities, - and that the related risks should be minimized. -- Resources must be allocated to improve security and - to avoid, detect and fix vulnerabilities. -- Management can perform well informed risk decisions -- The "Risk Manager" has transparent knowledge on how secure the product is. +See [Maturity level 0](./usage/maturity-level-0) to learn about the important first steps. -## Get to Know Security Policies -Identify the security policies of your organization and adhere to them. +## Dimensions +The DSOMM framework categorizes its activities into dimensions, each representing a key area of the software development lifecycle where security can be integrated and matured. -Share with the Security Champion Guild how you perform the required activities -from the policies, so others can benefit from your experience. +Dimensions Overview: + - **Build and Deployment**: Focuses on security practices in the CI/CD pipeline and deployment processes + - **Culture and Organization**: Addresses organizational culture, education, and processes that support security initiatives. + - **Implementation**: Covers secure coding and infrastructure hardening practices. +- **Information Gathering**: Involves gathering data for threat analysis, risk assessment, and metrics collection. +- **Test and Verification**: Focuses on testing practices to validate security measures and ensure continuous improvement. -In addition, provide feedback to the policy owner. +For detailed information on each dimension, refer to [Dimensions](./usage/dimensions). -Communicate discrepancies with the defined security policies -to the "Risk Manager" -so that he can take proper measures. -### Benefits -- Adopting security policies addressing threats - simplifies building secure software. -- Basic security risks are handled. -## Continuously Improve your Security Belt Rank - -Security is like a big pizza. -You cannot eat it as a whole, -but you can slice it and continuously eat small slices. - -Ensure that the "Risk Manager" continuously prioritizes -the security belt activities for the next belt highly -within the product backlog. - -Security belt activities make "good slices" because they are of reasonable -size and have a defined output. - -Celebrate all your implemented security belt activities! - -### Benefits - -- The team has time to improve its software security. -- The team's initially high motivation and momentum can be used. -- The Risk Manager has visibility on the investment - and the benefits of security belts. -- The team is improving its software security. - -## Review Security Belt Activities - -Let the Security Champion Guild review your implementations of security belt -activities (or concepts of these implementations) as soon as possible. -This helps to eradicate misunderstandings of security belt activities early. - -### Benefits - -- The quality of the implementation increases. -- Successes can be celebrated intermediately. -- Early feedback before the belt assessment. - -## Utilize Pairing when starting an activity -When implementing a security belt activity, approach a peer -from the Security Champion Guild to get you started. - -## Benefits - -- Knowledge how to implement security belt activities is spread, - so everyone benefits of prior knowledge. -- Starting to implement security belt activities with guidance is easier. -- The team is improving its software security while avoiding previously - made mistakes. - -# Dimensions - -This section describes the various dimensions -and the corresponding sub dimension. - -The descriptions are highly based (mostly copied) -on the [OWASP Project Integration Project Writeup](https://github.com/OWASP/www-project-integration-standards/blob/master/writeups/owasp_in_sdlc/index.md). - -## Implementation - -This dimension covers topic of "traditional" -hardening of software and infrastructure components. - -There is an abundance of libraries and frameworks implementing -secure defaults. -For frontend development, [ReactJS](https://reactjs.org/) seems to be -the latest favourite in the Javascript world. - -On the database side, there are [ORM](https://sequelize.org/) libraries -and [Query Builders](https://github.com/kayak/pypika) for most languages. - -If you write in Java, -the [ESAPI project](https://www.javadoc.io/doc/org.owasp.esapi/esapi/latest/index.html) -offers several methods to securely implement features, -ranging from Cryptography to input escaping and output encoding. - -**Example low maturity scenario:** - -The API was queryable by anyone and GraphQL introspection was enabled since -all components were left in debug configuration. - -Sensitive API paths were not whitelisted. -The team found that the application was attacked when the server showed very -high CPU load. -The response was to bring the system down, very little information about -the attack was found apart from the fact that someone -was mining cryptocurrencies on the server. - -**Example Low Maturity Scenario:** - -The team attempted to build the requested features using vanilla NodeJS, -connectivity to backend systems is validated by firing an internal request -to `/healthcheck?remoteHost=` which attempts to run a ping -command against the IP specified. -All secrets are hard coded. -The team uses off the shelf GraphQL libraries but versions -are not checked using [NPM Audit](https://docs.npmjs.com/cli/audit). -Development is performed by pushing to master which triggers a webhook that -uses FTP to copy latest master to the development server which will become production once development is finished. - -**Example High Maturity Scenario:** - -Team members have access to comprehensive documentation -and a library of code snippets they can use to accelerate development. - -Linters are bundled with pre-commit hooks -and no code reaches master without peer review. - -Pre-merge tests are executed before merging code into master. -Tests run a comprehensive suite of tests covering unit tests, -service acceptance tests, -unit tests as well as regression tests. - -Once a day a pipeline of specially configured -static code analysis tools runs against -the features merged that day, the results are -triaged by a trained security team and fed to engineering. - -There is a cronjob executing Dynamic Analysis tools against Staging -with a similar process. - -Pentests are conducted against features released on every release -and also periodically against the whole software stack. - -# Culture and Organization - -This section covers topics related to culture and organization like -processes, education and the design phase. - -Once requirements are gathered and analysis is performed, -implementation specifics need to be defined. -The outcome of this stage is usually a diagram outlining data flows -and a general system architecture. -This presents an opportunity for both threat modeling -and attaching security considerations -to every ticket and epic that is the outcome of this stage. - -### Design - -There is some great advice on threat modeling out there -*e.g.* [this](https://arstechnica.com/information-technology/2017/07/how-i-learned-to-stop-worrying-mostly-and-love-my-threat-model/) -article or [this](https://www.microsoft.com/en-us/securityengineering/sdl/threatmodeling) one. - -A bite sized primer by Adam Shostack himself can be found -[here](https://adam.shostack.org/blog/2018/03/threat-modeling-panel-at-appsec-cali-2018/). - -OWASP includes a short [article](https://wiki.owasp.org/index.php/Category:Threat_Modeling) -on Threat Modeling along with a relevant [Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Threat_Modeling_Cheat_Sheet.html). -Moreover, if you're following OWASP SAMM, it has a short section on [Threat Assessment](https://owaspsamm.org/model/design/threat-assessment/). - -There's a few projects that can help with creating Threat Models -at this stage, [PyTM](https://github.com/izar/pytm) is one, -[ThreatSpec](https://github.com/threatspec/threatspec) is another. - -> Note: _A threat model can be as simple as a data flow diagram with attack vectors on every flow and asset and equivalent remediations. -An example can be found below._ - -![Threat Model](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/threat_model.png "Threat Model") - -Last, if the organisation maps Features to Epics, the Security Knowledge Framework (SKF) can be used to facilitate this process by leveraging it's questionnaire function. - -![SKF](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/skf_qs.png "SKF") - -This practice has the side effect that it trains non-security specialists to think like attackers. - -The outcomes of this stage should help lay the foundation of secure design and considerations. - -**Example Low Maturity Scenario:** - -Following vague feature requirements the design includes caching data to a local unencrypted database with a hardcoded password. - -Remote data store access secrets are hardcoded in the configuration files. -All communication between backend systems is plaintext. - -Frontend serves data over GraphQL as a thin layer between caching system and end user. - -GraphQL queries are dynamically translated to SQL, Elasticsearch and NoSQL queries. -Access to data is protected with basic auth set to _1234:1234_ for development purposes. - -**Example High Maturity Scenario:** - -Based on a detailed threat model defined and updated through code, the team decides the following: - -* Local encrypted caches need to expire and auto-purged. -* Communication channels encrypted and authenticated. -* All secrets persisted in shared secrets store. -* Frontend designed with permissions model integration. -* Permissions matrix defined. -* Input is escaped output is encoded appropriately using well established libraries. - -### Education and Guidence - -Metrics won't necessarily improve without training engineering teams and somehow building a security-minded culture. -Security training is a long and complicated discussion. -There is a variety of approaches out there, on the testing-only end of the spectrum there is fully black box virtual machines such as [DVWA](http://www.dvwa.co.uk/), [Metasploitable series](https://metasploit.help.rapid7.com/docs/metasploitable-2) and the [VulnHub](https://www.vulnhub.com/) project. - -The code & remediation end of the spectrum isn't as well-developed, -mainly due to the complexity involved in building and distributing such material. -However, there are some respectable solutions, [Remediate The Flag](https://www.remediatetheflag.com/) -can be used to setup a code based challenge. - -![Remediate the Flag](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/rtf.png "Remediate the Flag") - -However, if questionnaires are the preferred medium, or if the organisation - is looking for self-service testing, [Secure Coding Dojo](https://github.com/trendmicro/SecureCodingDojo) is an interesting solution. - -More on the self-service side, the Security Knowledge Framework has released -several [Labs](https://owasp-skf.gitbook.io/asvs-write-ups/) that each -showcase one vulnerability and provides information on how to exploit it. - -However, to our knowledge, the most flexible project out there is probably -the [Juice Shop](https://github.com/bkimminich/juice-shop), deployed -on Heroku with one click, it offers both CTF functionality and a self-service - standalone application that comes with solution detection - and a comprehensive progress-board. - -![Juice Shop](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/juiceshop.png "Juice Shop") - -### Process - -**Example High Maturity Scenario:** - -Business continuity and Security teams run incident management drills - periodically to refresh incident playbook knowledge. - -# Test and Verification - -At any maturity level, linters can be introduced to ensure that consistent - code is being added. -For most linters, there are IDE integrations providing software engineers - with the ability to validate code correctness during development time. -Several linters also include security specific rules. -This allows for basic security checks before the code is even committed. -For example, if you write in Typescript, you can use -[tslint](https://github.com/palantir/tslint) along -with [tslint-config-security](https://www.npmjs.com/package/tslint-config-security) -to easily and quickly perform basic checks. - -However, linters cannot detect vulnerabilities in third party libraries, -and as software supply chain attacks spread, this consideration becomes more important. -To track third party library usage and audit their security you can use [Dependency Check/Track](https://dependencytrack.org/). - -![SKF Code](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/skf_code.png "SKF Code") - -This stage can be used to validate software correctness and it's results as a - metric for the security related decisions of the previous stages. -At this stage both automated and manual testing can be performed. -SAMM again offers 3 maturity levels across Architecture Reviews, Requirements testing, and Security Testing. -Instructions can be found [here](https://owaspsamm.org/model/verification/) and a screenshot is listed below. - -![SAMM Testing](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/samm_testing.png "SAMM Testing") - -Testing can be performed several ways and it highly depends on the nature -of the software, the organisation's cadence, and the regulatory requirements among other things. - -If available, automation is a good idea as it allows detection of easy to find vulnerabilities without much human interaction. - -If the application communicates using a web-based protocol, the [ZAP](https://github.com/zaproxy/zaproxy) project can be used to automate a great number of web related attacks and detection. -ZAP can be orchestrated using its REST API and it can even automate multi-stage attacks by leveraging its Zest scripting support. - -Vulnerabilities from ZAP and a wide variety of other tools can be imported and managed using a dedicated defect management platform such as [Defect Dojo](https://github.com/DefectDojo/django-DefectDojo)(screenshot below). - -![Defect Dojo](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/defectdojo.png "Defect Dojo") - -For manual testing the [Web](https://github.com/OWASP/wstg) and [Mobile](https://github.com/OWASP/owasp-mstg) Security Testing Guides can be used to achieve a base level of quality for human driven testing. - -**Example Low Maturity Scenario:** - -The business deployed the system to production without testing. -Soon after, the client's routine pentests uncovered deep flaws with access to backend data and services. -The remediation effort was significant. - -**Example High Maturity Scenario:** - -The application features received Dynamic Automated testing when each reached staging, a trained QA team validated business requirements that involved security checks. -A security team performed an adequate pentest and gave a sign-off. - -# Build and Deployment - -Secure configuration standards can be enforced during the deployment using the [Open Policy Agent](https://www.openpolicyagent.org/). - -![SAMM Release](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/samm_release.png "SAMM Release") - -**Example Low Maturity scenario:** - -_please create a PR_ - -**Example High Maturity scenario:** - -The CI/CD system, when migrating successful QA environments to production, applies appropriate configuration to all components. -Configuration is tested periodically for drift. - -Secrets live in-memory only and are persisted in a dedicated Secrets Storage solution such as Hashicorp Vault. - -## Information Gathering - -Concerning metrics, the community has been quite vocal on what to measure -and how important it is. -The OWASP CISO guide offers 3 broad categories of SDLC metrics[1] which can - be used to measure effectiveness of security practices. -Moreover, there is a number of presentations on what could be leveraged -to improve a security programme, starting from Marcus' Ranum's [keynote](https://www.youtube.com/watch?v=yW7kSVwucSk) -at Appsec California[1], -Caroline Wong's similar [presentation](https://www.youtube.com/watch?v=dY8IuQ8rUd4) -and [this presentation](https://www.youtube.com/watch?v=-XI2DL2Uulo) by J. Rose and R. Sulatycki. -These among several writeups by private companies all offering their own version of what could be measured. - -Projects such as the [ELK stack](https://www.elastic.co/elastic-stack), [Grafana](https://grafana.com/) -and [Prometheus](https://prometheus.io/docs/introduction/overview/) can be used to aggregate - logging and provide observability. - -However, no matter the WAFs, Logging, and secure configuration enforced -at this stage, incidents will occur eventually. -Incident management is a complicated and high stress process. -To prepare organisations for this, SAMM includes a section on [incident management](https://owaspsamm.org/model/operations/incident-management/) involving simple questions for stakeholders to answer so you can determine incident preparedness accurately. - -**Example High Maturity scenario:** - -Logging from all components gets aggregated in dashboards and alerts -are raised based on several Thresholds and events. -There are canary values and events fired against monitoring -from time to time to validate it works. +## Evidence +If your CISO requires you to document evidence that an activity is completed, you can edit your `generated.yaml` file as documented in the [README.md](./usage/README) _Teams and Groups_. It is currently not possible to provide evidence directly in the browser. diff --git a/src/assets/Markdown Files/dimensions.md b/src/assets/Markdown Files/dimensions.md new file mode 100644 index 000000000..a02112a7a --- /dev/null +++ b/src/assets/Markdown Files/dimensions.md @@ -0,0 +1,276 @@ +# Dimensions + +This section describes the various dimensions +and the corresponding sub dimension. + +The descriptions are highly based (mostly copied) +on the [OWASP Project Integration Project Writeup](https://github.com/OWASP/www-project-integration-standards/blob/master/writeups/owasp_in_sdlc/index.md). + +# Build and Deployment + +Secure configuration standards can be enforced during the deployment using the [Open Policy Agent](https://www.openpolicyagent.org/). + +**Example Low Maturity scenario:** + +The team manually deploys software to production without standardized or automated processes. Secrets, such as passwords and API keys, may have been hardcoded or left in configuration files that are committed to version control, leading to potential exposure and security risks. + + +**Example High Maturity scenario:** + +The CI/CD system, when migrating successful QA environments to production, applies appropriate configuration to all components. +Configuration is tested periodically for drift. + +Secrets live in-memory only and are persisted in a dedicated Secrets Storage solution such as Hashicorp Vault. + +# Culture and Organization + +This section covers topics related to culture and organization like +processes, education and the design phase. + +Once requirements are gathered and analysis is performed, +implementation specifics need to be defined. +The outcome of this stage is usually a diagram outlining data flows +and a general system architecture. +This presents an opportunity for both threat modeling +and attaching security considerations +to every ticket and epic that is the outcome of this stage. + +## Design + +There is some great advice on threat modeling out there +*e.g.* [this](https://arstechnica.com/information-technology/2017/07/how-i-learned-to-stop-worrying-mostly-and-love-my-threat-model/) +article or [this](https://www.microsoft.com/en-us/securityengineering/sdl/threatmodeling) one. + +A bite sized primer by Adam Shostack himself can be found +[here](https://adam.shostack.org/blog/2018/03/threat-modeling-panel-at-appsec-cali-2018/). + +OWASP includes a short [article](https://wiki.owasp.org/index.php/Category:Threat_Modeling) +on Threat Modeling along with a relevant [Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Threat_Modeling_Cheat_Sheet.html). +Moreover, if you're following OWASP SAMM, it has a short section on [Threat Assessment](https://owaspsamm.org/model/design/threat-assessment/). + +There's a few projects that can help with creating Threat Models +at this stage, [PyTM](https://github.com/izar/pytm) is one, +[ThreatSpec](https://github.com/threatspec/threatspec) is another. + +> Note: _A threat model can be as simple as a data flow diagram with attack vectors on every flow and asset and equivalent remediations. +An example can be found below._ + +![Threat Model](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/threat_model.png "Threat Model") + +Last, if the organization maps Features to Epics, the Security Knowledge Framework (SKF) can be used to facilitate this process by leveraging it's questionnaire function. + +![SKF](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/skf_qs.png "SKF") + +This practice has the side effect that it trains non-security specialists to think like attackers. + +The outcomes of this stage should help lay the foundation of secure design and considerations. + +**Example Low Maturity Scenario:** + +Following vague feature requirements the design includes caching data to a local unencrypted database with a hardcoded password. + +Remote data store access secrets are hardcoded in the configuration files. +All communication between backend systems is plaintext. + +Frontend serves data over GraphQL as a thin layer between caching system and end user. + +GraphQL queries are dynamically translated to SQL, Elasticsearch and NoSQL queries. +Access to data is protected with basic auth set to _1234:1234_ for development purposes. + +**Example High Maturity Scenario:** + +Based on a detailed threat model defined and updated through code, the team decides the following: + +* Local encrypted caches need to expire and auto-purged. +* Communication channels encrypted and authenticated. +* All secrets persisted in shared secrets store. +* Frontend designed with permissions model integration. +* Permissions matrix defined. +* Input is escaped output is encoded appropriately using well established libraries. + +## Education and Guidence + +Metrics won't necessarily improve without training engineering teams and somehow building a security-minded culture. +Security training is a long and complicated discussion. +There is a variety of approaches out there, on the testing-only end of the spectrum there is fully black box virtual machines such as [DVWA](http://www.dvwa.co.uk/), [Metasploitable series](https://metasploit.help.rapid7.com/docs/metasploitable-2) and the [VulnHub](https://www.vulnhub.com/) project. + +The code & remediation end of the spectrum isn't as well-developed, +mainly due to the complexity involved in building and distributing such material. +However, there are some respectable solutions, [Remediate The Flag](https://www.remediatetheflag.com/) +can be used to setup a code based challenge. + +![Remediate the Flag](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/rtf.png "Remediate the Flag") + +However, if questionnaires are the preferred medium, or if the organization + is looking for self-service testing, [Secure Coding Dojo](https://github.com/trendmicro/SecureCodingDojo) is an interesting solution. + +More on the self-service side, the Security Knowledge Framework has released +several [Labs](https://owasp-skf.gitbook.io/asvs-write-ups/) that each +showcase one vulnerability and provides information on how to exploit it. + +However, to our knowledge, the most flexible project out there is probably +the [Juice Shop](https://github.com/bkimminich/juice-shop), deployed +on Heroku with one click, it offers both CTF functionality and a self-service + standalone application that comes with solution detection + and a comprehensive progress-board. + +![Juice Shop](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/juiceshop.png "Juice Shop") + +## Process + +**Example High Maturity Scenario:** + +Business continuity and Security teams run incident management drills + periodically to refresh incident playbook knowledge. + + + +# Implementation + +This dimension covers topic of "traditional" +hardening of software and infrastructure components. + +There is an abundance of libraries and frameworks implementing +secure defaults. +For frontend development, [ReactJS](https://reactjs.org/) seems to be +the latest favorite in the Javascript world. + +On the database side, there are [ORM](https://sequelize.org/) libraries +and [Query Builders](https://github.com/kayak/pypika) for most languages. + +If you write in Java, +the [ESAPI project](https://www.javadoc.io/doc/org.owasp.esapi/esapi/latest/index.html) +offers several methods to securely implement features, +ranging from Cryptography to input escaping and output encoding. + +**Example low maturity scenario:** + +The API was queryable by anyone and GraphQL introspection was enabled since +all components were left in debug configuration. + +Sensitive API paths were not whitelisted. +The team found that the application was attacked when the server showed very +high CPU load. +The response was to bring the system down, very little information about +the attack was found apart from the fact that someone +was mining cryptocurrencies on the server. + +**Example Low Maturity Scenario:** + +The team attempted to build the requested features using vanilla NodeJS, +connectivity to backend systems is validated by firing an internal request +to `/healthcheck?remoteHost=` which attempts to run a ping +command against the IP specified. +All secrets are hard coded. +The team uses off the shelf GraphQL libraries but versions +are not checked using [NPM Audit](https://docs.npmjs.com/cli/audit). +Development is performed by pushing to master which triggers a webhook that +uses FTP to copy latest master to the development server which will become production once development is finished. + +**Example High Maturity Scenario:** + +Team members have access to comprehensive documentation +and a library of code snippets they can use to accelerate development. + +Linters are bundled with pre-commit hooks +and no code reaches master without peer review. + +Pre-merge tests are executed before merging code into master. +Tests run a comprehensive suite of tests covering unit tests, +service acceptance tests, +unit tests as well as regression tests. + +Once a day a pipeline of specially configured +static code analysis tools runs against +the features merged that day, the results are +triaged by a trained security team and fed to engineering. + +There is a cronjob executing Dynamic Analysis tools against Staging +with a similar process. + +Pentests are conducted against features released on every release +and also periodically against the whole software stack. + + +# Information Gathering + +Concerning metrics, the community has been quite vocal on what to measure +and how important it is. +The OWASP CISO guide offers 3 broad categories of SDLC metrics[1] which can + be used to measure effectiveness of security practices. +Moreover, there is a number of presentations on what could be leveraged +to improve a security programme, starting from Marcus' Ranum's [keynote](https://www.youtube.com/watch?v=yW7kSVwucSk) +at Appsec California[1], +Caroline Wong's similar [presentation](https://www.youtube.com/watch?v=dY8IuQ8rUd4) +and [this presentation](https://www.youtube.com/watch?v=-XI2DL2Uulo) by J. Rose and R. Sulatycki. +These among several writeups by private companies all offering their own version of what could be measured. + +Projects such as the [ELK stack](https://www.elastic.co/elastic-stack), [Grafana](https://grafana.com/) +and [Prometheus](https://prometheus.io/docs/introduction/overview/) can be used to aggregate + logging and provide observability. + +However, no matter the WAFs, Logging, and secure configuration enforced +at this stage, incidents will occur eventually. +Incident management is a complicated and high stress process. +To prepare organizations for this, SAMM includes a section on [incident management](https://owaspsamm.org/model/operations/incident-management/) involving simple questions for stakeholders to answer so you can determine incident preparedness accurately. + +**Example High Maturity scenario:** + +Logging from all components gets aggregated in dashboards and alerts +are raised based on several Thresholds and events. +There are canary values and events fired against monitoring +from time to time to validate it works. + + +# Test and Verification + +At any maturity level, linters can be introduced to ensure that consistent + code is being added. +For most linters, there are IDE integrations providing software engineers + with the ability to validate code correctness during development time. +Several linters also include security specific rules. +This allows for basic security checks before the code is even committed. +For example, if you write in Typescript, you can use +[tslint](https://github.com/palantir/tslint) along +with [tslint-config-security](https://www.npmjs.com/package/tslint-config-security) +to easily and quickly perform basic checks. + +However, linters cannot detect vulnerabilities in third party libraries, +and as software supply chain attacks spread, this consideration becomes more important. +To track third party library usage and audit their security you can use [Dependency Check/Track](https://dependencytrack.org/). + +![SKF Code](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/skf_code.png "SKF Code") + +This stage can be used to validate software correctness and it's results as a + metric for the security related decisions of the previous stages. +At this stage both automated and manual testing can be performed. +SAMM again offers 3 maturity levels across Architecture Reviews, Requirements testing, and Security Testing. +Instructions can be found [here](https://owaspsamm.org/model/verification/) and a screenshot is listed below. + +![SAMM Testing](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/samm_testing.png "SAMM Testing") + +Testing can be performed several ways and it highly depends on the nature +of the software, the organization's cadence, and the regulatory requirements among other things. + +If available, automation is a good idea as it allows detection of easy to find vulnerabilities without much human interaction. + +If the application communicates using a web-based protocol, the [ZAP](https://github.com/zaproxy/zaproxy) project can be used to automate a great number of web related attacks and detection. +ZAP can be orchestrated using its REST API and it can even automate multi-stage attacks by leveraging its Zest scripting support. + +Vulnerabilities from ZAP and a wide variety of other tools can be imported and managed using a dedicated defect management platform such as [Defect Dojo](https://github.com/DefectDojo/django-DefectDojo)(screenshot below). + +![Defect Dojo](https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/owasp_in_sdlc/images/defectdojo.png "Defect Dojo") + +For manual testing the [Web](https://github.com/OWASP/wstg) and [Mobile](https://github.com/OWASP/owasp-mstg) Security Testing Guides can be used to achieve a base level of quality for human driven testing. + +**Example Low Maturity Scenario:** + +The business deployed the system to production without testing. +Soon after, the client's routine pentests uncovered deep flaws with access to backend data and services. +The remediation effort was significant. + +**Example High Maturity Scenario:** + +The application features received Dynamic Automated testing when each reached staging, a trained QA team validated business requirements that involved security checks. +A security team performed an adequate pentest and gave a sign-off. + diff --git a/src/assets/Markdown Files/maturity-level-0.md b/src/assets/Markdown Files/maturity-level-0.md new file mode 100644 index 000000000..a6473d24e --- /dev/null +++ b/src/assets/Markdown Files/maturity-level-0.md @@ -0,0 +1,173 @@ +# Pre-Requirements + +Before you start using DSOMM in your organization, there are a few activities that might help you to implement a better security regime. + + +These pre-requirements are highly based on (mostly copied) + from AppSecure NRW's first level of [security-belts](https://github.com/AppSecure-nrw/security-belts/tree/master/white). + +## Risk management +Understand what the term _risk_ means in this context. +
Definition of risk +NIST defines risk as: + +> a measure of the extent to which an entity is threatened by a potential circumstance or event, and typically is a function of: +> 1. the adverse impact, or magnitude of harm, that would arise +> if the circumstance or event occurs; and +> 2. the likelihood of occurrence. + +_Source: https://csrc.nist.gov/glossary/term/risk_ +
+ +
Definition of risk in a information security context +In information security, risks arise from the loss of: + +- confidentiality, +- integrity, +- or availability + +of information or information systems and reflect the +potential adverse impacts to: + +- organizational operations + (including: - mission, - functions, - image, - or reputation), +- organizational assets, +- individuals, +- other organizations +(see [NIST.SP.800-53Ar4](https://nvlpubs.nist.gov/nistpubs/SpecialPublications/NIST.SP.800-53Ar4.pdf). + +A risk then tied to a **threat**, its **probability** and its **impacts**. + +If you are interested in Risk Management frameworks and +strategies, you can start from +[FISMA](https://csrc.nist.gov/Projects/risk-management/). +
+ +
Definition of risk appetite +Risk appetite is defined as: + +> The types and amount of risk, on a broad level, [an organization] is willing to accept in its pursuit of value + +_Source: https://csrc.nist.gov/glossary/term/risk_appetite_ + +Organizations have different risk appetite. It is important to understand what risks your organization is willing to accept, and which are not acceptable. Understanding this will + - help you translate application security risks for your management + - help you focus on risks that matters the most for your organization +
+ +
Definition of risk tolerance +Risk tolerance is highly connected to risk appetite. NIST's definition is almost identical to its own definition for risk appetit. + +[ISACA](https://en.wikipedia.org/wiki/ISACA), however, defines risk tolerance as: + +> the acceptable deviation from the level set by the risk appetite and business objectives. + +Explaining that: + +> Risk appetite and risk tolerance can be viewed as the “two sides of the same coin” as they relate to organizational performance over time. Risk appetite is about “taking risk” and risk tolerance is about “controlling risk.” For risk appetite to be adopted successfully in decision making, it must be integrated with control environment of the organization through risk tolerance + +_Source: https://www.isaca.org/resources/news-and-trends/isaca-now-blog/2022/risk-appetite-vs-risk-tolerance-what-is-the-difference_ +
+ +## Onboard Product Owner and other managers + +To adopt a DSOMM in a product or a project, it is important to identify +the person or the team which is responsible to ensure +that risk-related considerations reflects the organizational +risk appetite and tolerance +(see [Risk Executive](https://csrc.nist.gov/glossary/term/risk_executive) +for a more complete view). + +Depending on the project, this "Risk Manager" - which in layman's terms +is responsible for judging "risks vs. costs" of the product - +can be the `Project Manager`, the `Product Owner` or else: +it is important that he has the proper risk management +knowledge and, receive a proper training. + +The "Risk Manager" must be convinced that continuously improving +security through DSOMM is an effective way to +to minimize risk and build better products. + +The first steps for deploying DSOMM are then the following: + +1. identify the persons in charge for risk decisions +1. ask them about their _risk appetite_ +1. make them aware of information security risks + - show the impacts of threats and their probability +1. convince them that security requires _continuous_ efforts + +### Benefits + +- The "Risk Manager" is aware that all software have security vulnerabilities, + and that the related risks should be minimized +- Knowing the risk appetite helps the organization align its security efforts with its overall strategic goals +- Resources must be allocated to improve security and + to avoid, detect and fix vulnerabilities +- Management can perform well informed risk decisions +- The "Risk Manager" has transparent knowledge on how secure the product is + +## Get to Know Security Policies + +Identify the security policies of your organization and adhere to them. + +Share with the Security Champion Guild how you perform the required activities +from the policies, so others can benefit from your experience. + +In addition, provide feedback to the policy owner. + +Communicate discrepancies with the defined security policies +to the "Risk Manager" +so that he can take proper measures. + +### Benefits + +- Adopting security policies addressing threats + simplifies building secure software. +- Basic security risks are handled. + +## Continuously Improve your Security Belt Rank + +Security is like a big pizza. +You cannot eat it as a whole, +but you can slice it and continuously eat small slices. + +Ensure that the "Risk Manager" continuously prioritizes +the security belt activities for the next belt highly +within the product backlog. + +Security belt activities make "good slices" because they are of reasonable +size and have a defined output. + +Celebrate all your implemented security belt activities! + +### Benefits + +- The team has time to improve its software security. +- The team's initially high motivation and momentum can be used. +- The Risk Manager has visibility on the investment + and the benefits of security belts. +- The team is improving its software security. + +## Review Security Belt Activities + +Let the Security Champion Guild review your implementations of security belt +activities (or concepts of these implementations) as soon as possible. +This helps to eradicate misunderstandings of security belt activities early. + +### Benefits + +- The quality of the implementation increases. +- Successes can be celebrated intermediately. +- Early feedback before the belt assessment. + +## Utilize Pairing when starting an activity +When implementing a security belt activity, approach a peer +from the Security Champion Guild to get you started. + +## Benefits + +- Knowledge how to implement security belt activities is spread, + so everyone benefits of prior knowledge. +- Starting to implement security belt activities with guidance is easier. +- The team is improving its software security while avoiding previously + made mistakes. diff --git a/src/assets/YAML/generated/README.md b/src/assets/YAML/generated/README.md index d8e2c1d4f..3aa1ea5ea 100644 --- a/src/assets/YAML/generated/README.md +++ b/src/assets/YAML/generated/README.md @@ -1 +1,11 @@ -In this folder, the generated.yaml will be placed +# Generated YAML Files + +This folder contains the `generated.yaml` file, which is dynamically created during the build process. +It stores configuration settings and other automatically generated data used by the DevSecOps Maturity Model (DSOMM). + +## **What is `generated.yaml`?** + +- It is a machine-generated file that is **not meant to be manually edited**. +- It helps in **storing configuration settings**, which are loaded at runtime. +- Used by the application to dynamically configure settings. +- This file is generated via the [DevSecOps-MaturityModel-data](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data) repository. diff --git a/src/styles.css b/src/styles.css index 079b7c645..3f9148dbb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -16,4 +16,8 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } max-height: 100px; float: left; margin-right: 10px; +} + +.usage-dimensions img { + max-width: 40rem; } \ No newline at end of file