From c0a153149931ffafcdd67dfe37806517ab46590e Mon Sep 17 00:00:00 2001
From: Johan Berggren <jberggren@gmail.com>
Date: Wed, 25 Oct 2023 15:18:45 +0200
Subject: [PATCH] Sanitise HTML from Unfurl (#2959)

* change dialog layout
* dialog bugfix

---------

Co-authored-by: Janosch <99879757+jkppr@users.noreply.github.com>
---
 .../src/components/Explore/EventDetail.vue    |  69 ++++++------
 .../src/components/Explore/UnfurlDialog.vue   | 106 +++++++++---------
 2 files changed, 86 insertions(+), 89 deletions(-)

diff --git a/timesketch/frontend-ng/src/components/Explore/EventDetail.vue b/timesketch/frontend-ng/src/components/Explore/EventDetail.vue
index 7738e99083..8120353164 100644
--- a/timesketch/frontend-ng/src/components/Explore/EventDetail.vue
+++ b/timesketch/frontend-ng/src/components/Explore/EventDetail.vue
@@ -28,7 +28,7 @@ limitations under the License.
                   @mouseleave="c_key = -1"
                 >
                   <!-- Event field name actions -->
-                  <td v-if="key == c_key" class="text-right" style="min-width: 105px;">
+                  <td v-if="key == c_key" class="text-right" style="min-width: 105px">
                     <!-- Open aggregation dialog for this field -->
                     <v-tooltip top open-delay="500">
                       <template v-slot:activator="{ on }">
@@ -49,13 +49,7 @@ limitations under the License.
                     <!-- Include field:value as filter chip -->
                     <v-tooltip top open-delay="500">
                       <template v-slot:activator="{ on }">
-                        <v-btn
-                          @click.stop="applyFilterChip(key, value, 'must')"
-                          icon
-                          x-small
-                          class="mr-1"
-                          v-on="on"
-                        >
+                        <v-btn @click.stop="applyFilterChip(key, value, 'must')" icon x-small class="mr-1" v-on="on">
                           <v-icon>mdi-filter-plus-outline</v-icon>
                         </v-btn>
                       </template>
@@ -106,15 +100,11 @@ limitations under the License.
                   </td>
 
                   <!-- Event field value action icons -->
-                  <td
-                    v-if="checkContextLinkDisplay(key, value) || key == c_key"
-                    class="text-right pr-1"
-                  >
+                  <td v-if="checkContextLinkDisplay(key, value) || key == c_key" class="text-right pr-1">
                     <!-- Copy event value -->
                     <v-btn icon x-small style="cursor: pointer" @click="copyToClipboard(value)" v-show="key == c_key">
                       <v-icon small>mdi-content-copy</v-icon>
                     </v-btn>
-
                     <!-- Context link submenu -->
                     <v-menu v-if="checkContextLinkDisplay(key, value)" offset-y transition="slide-y-transition">
                       <template v-slot:activator="{ on, attrs }">
@@ -128,6 +118,35 @@ limitations under the License.
                         </v-btn>
                       </template>
                       <v-list dense>
+                        <!-- redirect dialog -->
+                        <v-dialog v-model="redirectWarnDialog" max-width="515" :retain-focus="false">
+                          <ts-link-redirect-warning
+                            app
+                            @cancel="redirectWarnDialog = false"
+                            :context-value="contextValue"
+                            :context-url="contextUrl"
+                          ></ts-link-redirect-warning>
+                        </v-dialog>
+                        <!-- unfurl dialog -->
+                        <v-dialog
+                          v-model="dfirUnfurlDialog"
+                          max-width="80%"
+                          min-width="1000px"
+                          max-height="80%"
+                          min-height="600px"
+                          :retain-focus="false"
+                          class="asdf"
+                        >
+                          <ts-unfurl-dialog @cancel="dfirUnfurlDialog = false" :url="contextValue"></ts-unfurl-dialog>
+                        </v-dialog>
+                        <!-- XML prettify dialog -->
+                        <v-dialog v-model="formatXMLString">
+                          <ts-format-xml-string
+                            @close="formatXMLString = false"
+                            :xmlString="value"
+                          ></ts-format-xml-string>
+                        </v-dialog>
+
                         <v-list-item
                           v-for="(item, index) in getContextLinkItems(key)"
                           :key="index"
@@ -135,28 +154,9 @@ limitations under the License.
                           @click.stop="contextLinkRedirect(key, item, value)"
                         >
                           <v-list-item-title v-if="getContextLinkRedirectState(key, item)">
-                          {{ item }} (ext.)</v-list-item-title>
+                            {{ item }} (ext.)</v-list-item-title
+                          >
                           <v-list-item-title v-else>{{ item }}</v-list-item-title>
-                          <!-- redirect dialog -->
-                          <v-dialog v-model="redirectWarnDialog" max-width="515" :retain-focus="false">
-                            <ts-link-redirect-warning
-                              app
-                              @cancel="redirectWarnDialog = false"
-                              :context-value="contextValue"
-                              :context-url="contextUrl"
-                            ></ts-link-redirect-warning>
-                          </v-dialog>
-                          <!-- unfurl dialog -->
-                          <v-dialog v-model="dfirUnfurlDialog" max-width="80%" min-width="1000px" max-height="80%" min-height="600px" :retain-focus="false" class="asdf">
-                            <ts-unfurl-dialog
-                              @cancel="dfirUnfurlDialog = false"
-                              :url="contextValue"
-                            ></ts-unfurl-dialog>
-                          </v-dialog>
-                          <!-- XML prettify dialog -->
-                          <v-dialog v-model="formatXMLString">
-                            <ts-format-xml-string @close="formatXMLString = false" :xmlString="value"></ts-format-xml-string>
-                          </v-dialog>
                         </v-list-item>
                       </v-list>
                     </v-menu>
@@ -334,7 +334,6 @@ export default {
               this.redirectWarnDialog = false
             }
           }
-
         }
       }
     },
diff --git a/timesketch/frontend-ng/src/components/Explore/UnfurlDialog.vue b/timesketch/frontend-ng/src/components/Explore/UnfurlDialog.vue
index 32bf0cd3cf..5936f6a46a 100644
--- a/timesketch/frontend-ng/src/components/Explore/UnfurlDialog.vue
+++ b/timesketch/frontend-ng/src/components/Explore/UnfurlDialog.vue
@@ -12,66 +12,61 @@ limitations under the License.
 -->
 <template>
   <v-card>
-    <v-card-title>
-      <v-img :src="getUnfurlLogo" max-height="32" contain class="mb-2"></v-img>
-    </v-card-title>
+    <v-toolbar flat color="transparent">
+      <v-img position="left" :src="getUnfurlLogo" max-height="24" contain class="ml-2"></v-img>
+    </v-toolbar>
+
     <v-card-subtitle class="pt-1">
-      <span><b>Input:</b> {{ url }}</span>
+      <div class="mb-2"><b>Input:</b> {{ url }}</div>
+      <div v-if="nodeContext">
+        <b>Selected node info: </b>
+        <span v-html="sanitizeHtml(nodeContext)"></span>
+      </div>
+      <div v-else>Select a node in the graph below to get more information.</div>
     </v-card-subtitle>
+
     <v-card-text>
       <div v-show="!unfurlReady">
         <v-progress-linear color="primary" indeterminate> </v-progress-linear>
       </div>
-      <v-divider></v-divider>
-      <v-container fluid v-show="unfurlReady">
-        <!-- Cytoscape container -->
-        <div style="font-size: medium" class="py-1 px-1">
-          <span style="font-weight: bold">Selected node context: </span>
-          <br />
-          <span style="font-style: italic" v-html="nodeContext"></span>
+
+      <v-toolbar v-show="unfurlReady" dense flat color="transparent" class="mt-n8">
+        <v-spacer></v-spacer>
+        <div>
+          <v-tooltip top open-delay="500">
+            <template v-slot:activator="{ on }">
+              <v-btn icon v-on="on" @click="resizeCanvas()">
+                <v-icon>mdi-fit-to-page-outline</v-icon>
+              </v-btn>
+            </template>
+            <span>resize graph</span>
+          </v-tooltip>
+          <v-tooltip top open-delay="500">
+            <template v-slot:activator="{ on }">
+              <v-btn icon v-on="on" @click="zoomGraph('plus')">
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </template>
+            <span>zoom in</span>
+          </v-tooltip>
+          <v-tooltip top open-delay="500">
+            <template v-slot:activator="{ on }">
+              <v-btn icon v-on="on" @click="zoomGraph('minus')">
+                <v-icon>mdi-minus</v-icon>
+              </v-btn>
+            </template>
+            <span>zoom out</span>
+          </v-tooltip>
         </div>
+      </v-toolbar>
+
+      <v-card v-show="unfurlReady" outlined>
+        <!-- Cytoscape container -->
         <div ref="graphContainer" :style="{ height: canvasHeight, width: '100%' }">
-          <v-row no-gutters>
-            <v-col>
-              <div
-                ref="cy"
-                width="100%"
-                class="pa-2"
-                :style="{ 'min-height': canvasHeight, border: '1px', 'border-style': 'solid' }"
-              ></div>
-            </v-col>
-            <v-col cols="auto">
-              <div class="iconWrapper">
-                <v-tooltip top open-delay="500">
-                  <template v-slot:activator="{ on }">
-                    <v-btn icon v-on="on" @click="resizeCanvas()">
-                      <v-icon>mdi-fit-to-page-outline</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>resize graph</span>
-                </v-tooltip>
-                <v-tooltip top open-delay="500">
-                  <template v-slot:activator="{ on }">
-                    <v-btn icon v-on="on" @click="zoomGraph('plus')">
-                      <v-icon>mdi-plus</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>zoom in</span>
-                </v-tooltip>
-                <v-tooltip top open-delay="500">
-                  <template v-slot:activator="{ on }">
-                    <v-btn icon v-on="on" @click="zoomGraph('minus')">
-                      <v-icon>mdi-minus</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>zoom out</span>
-                </v-tooltip>
-              </div>
-            </v-col>
-          </v-row>
+          <div ref="cy" width="100%" class="pa-2" :style="{ 'min-height': canvasHeight }"></div>
         </div>
-      </v-container>
-      <span>Powered by <a href="https://github.com/obsidianforensics/unfurl" target="_blank">dfir-unfurl</a></span>
+      </v-card>
+      <small>Powered by <a href="https://github.com/obsidianforensics/unfurl" target="_blank">dfir-unfurl</a></small>
     </v-card-text>
     <v-card-actions>
       <v-spacer></v-spacer>
@@ -85,6 +80,9 @@ import ApiClient from '../../utils/RestApiClient'
 import cytoscape from 'cytoscape'
 import dagre from 'cytoscape-dagre'
 
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
 cytoscape.use(dagre)
 
 export default {
@@ -157,9 +155,6 @@ export default {
     }
   },
   computed: {
-    nodeContextValue() {
-      return this.nodeContext
-    },
     getUnfurlLogo() {
       if (this.$vuetify.theme.dark) {
         return '/unfurl-logo-dark.png'
@@ -169,6 +164,9 @@ export default {
     },
   },
   methods: {
+    sanitizeHtml(html) {
+      return DOMPurify.sanitize(marked(html))
+    },
     clearAndCancel: function () {
       this.$emit('cancel')
     },