Add storage events in bottom-drawer

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>
 
@@ -70,7 +73,6 @@
         </div>
     </template>
 
-
     <template id="websockets-template">
         <div>
             <table id="websockets-header" class="table drawer-header">
@@ -122,6 +124,27 @@
         </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_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.action }} </td>
+                    <td> {{ message.key }} </td>
+                    <td> {{ message.value }} </td>
+                </tr>
+            </tbody>
+        </table>
+    </template>
+
     <!-- tabs component -->
     <template id="tabs-template">
         <div style="height: 100%;">

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() {

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/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,12 @@ 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
+storage_tool_field_value = Value
+
 websockets_message_field_time = Time
 websockets_message_field_direction = Direction
 websockets_message_field_opcode = Op Code