[WIP] Add storage interactions in the bottom-drawer

package.json

@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/zaproxy/zap-hud/wiki",
   "dependencies": {
+    "@zaproxy/front-end-tracker": "^1.0.0",
     "localforage": "^1.5.0",
     "vue": "^2.6.8",
     "vue-i18n": "^8.8.2"

src/main/java/org/zaproxy/zap/extension/hud/ExtensionHUD.java

@@ -405,9 +405,15 @@ public boolean onHttpResponseReceive(HttpMessage msg) {
             try {
                 HtmlEditor htmlEd = new HtmlEditor(msg);
                 String hudScript = this.api.getFile(msg, HUD_HTML);
+                String frontEndTrackerScript =
+                        "<script type='text/javascript' src='"
+                                + api.getUrlPrefix(api.getSite(msg))
+                                + "?zapfile=front-end-tracker.js'></script>";
                 // These are the only files that use FILE_PREFIX
                 hudScript =
                         hudScript.replace("<<FILE_PREFIX>>", api.getUrlPrefix(api.getSite(msg)));
+
+                htmlEd.injectAtStartOfHead(frontEndTrackerScript);
                 htmlEd.injectAtStartOfBody(hudScript);
                 htmlEd.rewriteHttpMessage();
 

src/main/java/org/zaproxy/zap/extension/hud/HtmlEditor.java

@@ -39,6 +39,15 @@ public HtmlEditor(HttpMessage msg) {
         this.outputDocument = new OutputDocument(source);
     }
 
+    public void injectAtStartOfHead(String inject) {
+        List<StartTag> headTags = this.source.getAllStartTags("head");
+
+        if (headTags.size() > 0) {
+            this.outputDocument.insert(headTags.get(0).getEnd(), inject);
+            this.changed = true;
+        }
+    }
+
     public void injectAtStartOfBody(String inject) {
         List<StartTag> bodyTags = this.source.getAllStartTags("body");
 

src/main/java/org/zaproxy/zap/extension/hud/HudAPI.java

@@ -100,7 +100,7 @@ public class HudAPI extends ApiImplementor {
 
     /** The only files that can be included on domain */
     private static final List<String> DOMAIN_FILE_WHITELIST =
-            Arrays.asList(new String[] {"inject.js"});
+            Arrays.asList(new String[] {"inject.js", "front-end-tracker.js"});
 
     private ApiImplementor hudFileProxy;
     private String hudFileUrl;

src/main/zapHomeFiles/hud/drawer.html

@@ -20,6 +20,9 @@
             <tab :name="$t('message.websockets_tool')">
                 <websockets></websockets>
             </tab>
+            <tab :name="$t('message.storage_tool')">
+                <storage></storage>
+            </tab>
         </tabs>
     </div>
 
@@ -57,7 +60,7 @@
                     </tr>
                 </thead>
             </table>
-            <table id="history-messages" class="table table-striped table-hover table-scroll table-history drawer-messages" style="min-width: fit-content;">
+            <table id="history-messages" class="table table-striped table-hover table-scroll table-bottom-drawer drawer-messages" style="min-width: fit-content;">
                 <tbody>
                     <tr v-for="message in filteredMessages" @click="messageSelected(message.id)" :id="'message-tr-'+message.id" class="message-tr">
                         <td class="field time"> {{ message.time }} </td>
@@ -70,7 +73,6 @@
         </div>
     </template>
 
-
     <template id="websockets-template">
         <div>
             <table id="websockets-header" class="table drawer-header">
@@ -122,6 +124,29 @@
         </div>
     </template>
 
+    <template id="storage-template">
+        <table class="table table-striped table-hover table-scroll table-bottom-drawer" style="min-width: fit-content;">
+            <thead>
+                <tr>
+                    <th style="width: 200px"> {{ $t('message.storage_tool_field_time') }} </th>
+                    <th style="width: 200px"> {{ $t('message.storage_tool_field_type') }} </th>
+                    <th style="width: 200px"> {{ $t('message.storage_tool_field_action') }} </th>
+                    <th style="width: 200px"> {{ $t('message.storage_tool_field_key') }} </th>
+                    <th style="width: 800px"> {{ $t('message.storage_tool_field_value') }} </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="message in messages" @click="messageSelected(message.id)" :id="'message-tr-'+message.id">
+                    <td> {{ message.time }} </td>
+                    <td> {{ message.type }} </td>
+                    <td> {{ message.action }} </td>
+                    <td> {{ message.key }} </td>
+                    <td> {{ message.value }} </td>
+                </tr>
+            </tbody>
+        </table>
+    </template>
+
     <!-- tabs component -->
     <template id="tabs-template">
         <div style="height: 100%;">
@@ -173,4 +198,4 @@
         <div v-show="isActive"><slot></slot></div>
     </template>
 </body>
-</html>
+</html>

src/main/zapHomeFiles/hud/drawer.js

@@ -8,6 +8,57 @@ var context = {
     domain: utils.parseDomainFromUrl(document.referrer)
 };
 
+Vue.component('storage', {
+  template: '#storage-template',
+  data() {
+    return { messages: [] }
+  },
+  computed: {
+    timeDescendingMessages() {
+      return this.messages.slice().reverse();
+    }
+  },
+  created() {
+    utils.loadTool('storage')
+      .then(tool => {
+        this.messages = tool.messages
+      })
+      .catch(utils.errorHandler)
+
+    eventBus.$on('setMessages', data => {
+      this.messages = data.messages;
+    })
+
+    eventBus.$on('updateStorageMessages', data => {
+      let messages = data.messages.map(message => {
+        let time = new Date(message.timestamp);
+        let formattedTime = time.getHours() + 'h' + time.getMinutes() + 'min' + time.getSeconds() + 's';
+
+        return {
+          ...message,
+          'time': formattedTime
+        };
+      });
+      let count = messages.length;
+
+      this.messages = this.messages.concat(messages);
+
+      this.$parent.$emit('badgeDataEvent', {data: count})
+    });
+  },
+  updated() {
+    if (this.messages.length > 0) {
+      let lastMessage = this.messages[this.messages.length - 1]
+      let lastid = 'message-tr-' + lastMessage.id
+
+      document.getElementById(lastid).scrollIntoView({block:'end', behaviour:'smooth'});
+      //move horizontal scroll bar to the left
+      var tabsDetails = document.getElementsByClassName('tabs-details')[0];
+      tabsDetails.scrollTo(0,tabsDetails.scrollHeight)
+    }
+  }
+});
+
 Vue.component('history', {
     template: '#history-template',
     data() {
@@ -84,11 +135,11 @@ Vue.component('history', {
             })
             .catch(utils.errorHandler)
 
-        eventBus.$on('setMessages', data => {
+        eventBus.$on('setHistoryMessages', data => {
             this.messages = data.messages;
         })
 
-		eventBus.$on('updateMessages', data => {
+		eventBus.$on('updateHistoryMessages', data => {
             this.messages = this.messages.concat(data.messages);
 
             let count = data.messages.length;
@@ -421,8 +472,8 @@ navigator.serviceWorker.addEventListener('message', event => {
 	var port = event.ports[0];
 
 	switch(action) {
-        case 'updateMessages':
-            eventBus.$emit('updateMessages', {
+        case 'updateHistoryMessages':
+            eventBus.$emit('updateHistoryMessages', {
                 messages: event.data.messages,
 				port: port
 			});

src/main/zapHomeFiles/hud/libraries/spectre.css

@@ -534,8 +534,8 @@ html {
     border-bottom-width: .1rem;
   }
 
-  .table-history td,
-  .table-history th {
+  .table-bottom-drawer td,
+  .table-bottom-drawer th {
     padding: .1em .6em .1em .6em;
     white-space: nowrap;
   }

src/main/zapHomeFiles/hud/target/inject.js

@@ -441,7 +441,22 @@
 			history.pushState({},document.title,origUrl);
 		}
 	}
-
+
+  window.addEventListener("load", function() {
+    // Forward the front-end-tracker content reporting to the HUD interface
+    const bottomDrawerWindow = document.getElementById('bottom-drawer').contentWindow;
+    const topic = 'storage';
+
+    mailbox.subscribe(topic, (_, data) => {
+      bottomDrawerWindow.postMessage({
+        action: 'addStorageEventToBottomDrawer',
+        data: [data],
+        tabId: tabId,
+        sharedSecret: ZAP_SHARED_SECRET
+      }, ZAP_HUD_FILES);
+    });
+  });
+
 	return {
 		showZapAlert: function(alertId) {
 			showZapAlertInternal(alertId);

src/main/zapHomeFiles/hud/tools/history.js

@@ -130,7 +130,7 @@ var History = (function() {
         message.code = event.detail.statusCode;
 		message.id = event.detail.historyReferenceId;
 
-        utils.messageAllTabs('drawer', {action: 'updateMessages', messages: [message]})
+        utils.messageAllTabs('drawer', {action: 'updateHistoryMessages', messages: [message]})
             .catch(utils.errorHandler);
 
 		tool.messages.push(message);

src/main/zapHomeFiles/hud/tools/storage.js

@@ -0,0 +1,101 @@
+/*
+ * Storage Tool
+ *
+ * Displays sessionStorage and localStorage interactions (whether elements are
+ * added, removed or updated to them) in a tab at the bottom of the screen.
+ */
+
+var Storage = (function() {
+  var NAME = "storage";
+  var LABEL = I18n.t("storage_tool");
+  var ICONS = {
+    CLOCK: "clock.png"
+  };
+  var tool = {};
+
+  function initializeStorage() {
+    tool.name = NAME;
+    tool.label = LABEL;
+    tool.data = 0;
+    tool.icon = ICONS.CLOCK;
+    tool.isSelected = false;
+    tool.isHidden = true;
+    tool.panel = "";
+    tool.position = 0;
+    tool.messages = [];
+
+    utils.writeTool(tool);
+  }
+
+  function showOptions(tabId) {
+    var config = {
+      tool: NAME,
+      toolLabel: LABEL,
+      options: {remove: I18n.t("common_remove")}
+    };
+
+    utils.messageFrame(tabId, "display", {action:"showButtonOptions", config:config})
+      .then(response => {
+        // Handle button choice
+        if (response.id == "remove") {
+          utils.removeToolFromPanel(tabId, NAME);
+        }
+      })
+      .catch(utils.errorHandler);
+  }
+
+  self.addEventListener("activate", event => {
+    initializeStorage();
+  });
+
+  function trimMessages(lastPageUnloadTime) {
+    utils.loadTool(NAME)
+      .then(tool => {
+        tool.messages = tool.messages.filter(message => message.timeInMs > lastPageUnloadTime)
+        utils.writeTool(tool)
+      })
+      .catch(utils.errorHandler);
+  }
+
+  self.addEventListener("message", event => {
+    var message = event.data;
+
+    // Broadcasts
+    switch(message.action) {
+      case "initializeTools":
+        initializeStorage();
+        break;
+      case "unload":
+        trimMessages(message.time)
+        break;
+      default:
+        break;
+    }
+
+    // Directed
+    if (message.tool === NAME) {
+      switch(message.action) {
+        case "buttonMenuCicked":
+          showOptions(message.tabId);
+          break;
+        default:
+          break;
+      }
+    }
+  });
+
+  self.addEventListener("updateStorageMessages", event => {
+    utils.messageAllTabs('drawer', {action: 'updateStorageMessages', messages: [message]})
+      .catch(utils.errorHandler);
+
+    tool.messages.push(message);
+    utils.writeTool(tool);
+  });
+
+  return {
+    name: NAME,
+    initialize: initializeStorage
+  };
+})();
+
+self.tools[Storage.name] = Storage;

src/other/resources/UIMessages/UIMessages.properties

@@ -115,6 +115,13 @@ spider_stop_1 = The site <i>
 spider_stop_2 = </i> is currently getting Spidered. <br> Would you like to stop the Spider tool?
 spider_tool = Spider
 
+storage_tool = Storage
+storage_tool_field_action = Action
+storage_tool_field_key = Key
+storage_tool_field_time = Time
+tool_storage_field_type = Type
+storage_tool_field_value = Value
+
 websockets_message_field_time = Time
 websockets_message_field_direction = Direction
 websockets_message_field_opcode = Op Code