Add InfoDialogComponent to showcase info about BHHB

adityatelange · Feb 4, 2023 · 823ee32 · 823ee32
1 parent 0e4c5fc
commit 823ee32
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 17 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AngularMaterialModule } from './modules/angular-material/angular-material.module';
-import { HeaderComponent } from './components/header/header.component';
+import { HeaderComponent, InfoDialogComponent } from './components/header/header.component';
 import { MainComponent } from './components/main/main.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -14,6 +14,7 @@ import { environment } from '../environments/environment';
   declarations: [
     AppComponent,
     HeaderComponent,
+    InfoDialogComponent,
     MainComponent,
     FooterComponent
   ],

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,19 +1,9 @@
 <mat-toolbar>
     <nav class="navbar-header">
-        <span>BHHB</span>
-        <a href="https://github.com/adityatelange/bhhb" mat-icon-button matTooltip="View Source on Github">
-            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                class="mat-icon notranslate material-icons mat-icon-no-color">
-                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 
-                    9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 
-                    18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 
-                    1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 
-                    0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 
-                    1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 
-                    3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 
-                    2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-            </svg>
-        </a>
+        <h1>BHHB</h1>
+        <button mat-icon-button aria-label="info" (click)="infoDialog()" matTooltip="Info">
+            <mat-icon>help</mat-icon>
+        </button>
         <span class="toolbar-spacer"></span>
         <span>{{ this.selectedFileName }}</span>
         <button mat-icon-button aria-label="Open File" matTooltip="Open File" (click)="fileInput.click()"
@@ -31,4 +21,4 @@
         </button>
     </nav>
 </mat-toolbar>
-<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FileHandleService } from "../../services/file-handle/file-handle.service"
 import { Subscription } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-header',
@@ -9,13 +10,16 @@ import { Subscription } from 'rxjs';
 })
 export class HeaderComponent implements OnInit {
 
-  constructor(private FileHandleService: FileHandleService) { }
+  constructor(private FileHandleService: FileHandleService, public dialog: MatDialog) { }
 
   fileSub!: Subscription
   selectedFileName!: string;
   isLoading: boolean = false;
 
   ngOnInit(): void {
+    if (localStorage.getItem("gotIt") != "true") {
+      this.infoDialog()
+    }
     this.fileSub = this.FileHandleService.getselectedFileDataListener()
       .subscribe((selectedFileData: { selectedFileName: string }) => {
         this.selectedFileName = selectedFileData.selectedFileName
@@ -40,4 +44,22 @@ export class HeaderComponent implements OnInit {
       })
       .catch(() => { })
   }
+
+  infoDialog() {
+    if (this.dialog.openDialogs.length == 0) {
+      this.dialog.open(InfoDialogComponent, {
+        width: '900px',
+      });
+    }
+  }
+}
+
+@Component({
+  templateUrl: './info-dialog.component.html',
+  styleUrls: ['./info-dialog.component.css']
+})
+export class InfoDialogComponent {
+  gotIt() {
+    localStorage.setItem("gotIt", "true")
+  }
 }
diff --git a/src/app/components/header/info-dialog.component.css b/src/app/components/header/info-dialog.component.css
@@ -0,0 +1,65 @@
+::ng-deep .mat-dialog-container {
+    box-shadow: unset;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+::ng-deep .mat-dialog-container button {
+    border: 1px solid rgba(0, 0, 0, 0.12) !important;
+}
+
+
+a:link,
+a:visited {
+    color: inherit;
+}
+
+ul {
+    padding: 0 15px;
+}
+
+.ext {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.ext a {
+    padding: 4px;
+    display: inline-block;
+}
+
+.btn {
+    word-wrap: break-word;
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 6px;
+    appearance: none;
+    text-align: center;
+    box-shadow: none;
+}
+
+.btn:hover svg {
+    transform: scale(1.1)
+}
+
+.btn svg {
+    transition: transform .15s cubic-bezier(0.2, 0, 0.13, 2);
+    transform: scale(1);
+    margin-right: 8px !important;
+    display: inline-block;
+    overflow: visible !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    ::ng-deep .mat-dialog-container {
+        background-color: rgb(29, 30, 32);
+        color: initial;
+    }
+
+    ::ng-deep .mat-dialog-container button {
+        border: 1px solid rgba(255, 255, 255, 0.12) !important;
+    }
+}
diff --git a/src/app/components/header/info-dialog.component.html b/src/app/components/header/info-dialog.component.html
@@ -0,0 +1,63 @@
+<h2 mat-dialog-title align="center">
+  <b>About Burp HTTP History Browser (BHHB)</b>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <p align="center">BHHB is tool to view HTTP history exported from Burp Suite Community Edition(CE).</p>
+
+  <div class="ext">
+    <a class="btn" href="https://github.com/adityatelange/bhhb">
+      <button mat-button>
+
+        <svg role="img" viewBox="0 0 24 24" height='30' xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+          class="mat-icon notranslate material-icons mat-icon-no-color">
+          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 
+                9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 
+                18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 
+                1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 
+                0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 
+                1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 
+                3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 
+                2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+        <span>View Source on Github</span>
+      </button>
+    </a>
+    <a class="btn" aria-label="Sponsor @adityatelange" href="https://github.com/sponsors/adityatelange?o=esb">
+      <button mat-button>
+        <svg aria-hidden="true" height="20" viewBox="0 0 16 16" version="1.1" width="20" data-view-component="true"
+          color="#db61a2" fill="currentColor">
+          <path fill-rule="evenodd"
+            d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z">
+          </path>
+        </svg>
+        <span>Support me on Github</span>
+      </button>
+    </a>
+  </div>
+  <hr>
+  <ul>
+    <li><code>Burp Suite Community Edition</code> has one BIG feature paywalled - Disk-based projects 💾.</li>
+    <li>Because of which Community Edition users cannot save their <code>HTTP history</code> and Sitemap info, which are
+      destroyed after the temporary session is closed 🗑️.</li>
+    <li>Although this is a thing, users can export their Burp CE's HTTP history by <em>selecting the records</em>
+      (Ctrl+A) and using <strong><code>Save items</code></strong> 💾 option in context menu of
+      <code>Proxy-&gt;HTTP history</code> or <code>Target-&gt;Sitemap</code> or <code>Logger</code>.
+    </li>
+    <li>Using that Burp will export the HTTP history along with Requests and Responses into a <em>XML file</em>.</li>
+    <li><strong><code>BHHB</code></strong> can open these exported items, parse it and display them in a well-formatted
+      manner. 📋</li>
+    <li>This application is a <a
+        href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps"><code>PWA</code></a>, which can be
+      installed in any chromium based browser and could run offline, with all of the processing done on device itself
+      ⚙️.</li>
+    <li>Linked Forum thread - <a
+        href="https://forum.portswigger.net/thread/how-do-i-view-items-export-from-burp-s-proxy-s-history-0ae0f99e">How
+        do I view items export from Burp's proxy's history?</a></li>
+  </ul>
+
+  <img width="100%" src="https://raw.githubusercontent.com/adityatelange/bhhb/main/src/assets/bhhb.png" alt="">
+
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="gotIt()">Got it!</button>
+</mat-dialog-actions>
diff --git a/src/app/modules/angular-material/angular-material.module.ts b/src/app/modules/angular-material/angular-material.module.ts
@@ -9,6 +9,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AngularSplitModule } from 'angular-split';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [],
@@ -25,6 +26,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
     DragDropModule,
     AngularSplitModule,
     MatProgressBarModule,
+    MatDialogModule,
   ]
 })
 export class AngularMaterialModule { }