Merge pull request #38 from saferwall/2022-fixing

✂ Copy button feature + env setup
saferwall · Feb 7, 2022 · 1492f3c · 1492f3c
2 parents fa1594d + e70c93d
commit 1492f3c
Show file tree

Hide file tree

Showing 22 changed files with 285 additions and 36 deletions.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,6 @@
+VUE_APP_ANALYTICS_GOOGLE_TAG=
+VUE_APP_CSP_HOSTS="*.saferwall.com saferwall.com"
+
+VUE_APP_BASE_URI="https://saferwall.com/"
 VUE_APP_API_BASE_URL="https://api.saferwall.com/v1/"
-VUE_APP_AVATAR_BASE_URL="https://avatar.saferwall.com/"
+VUE_APP_AVATAR_BASE_URL="https://avatar.saferwall.com/"
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -6,6 +6,8 @@ on:
       - build
 env:
   IMAGE: saferwall/ui
+  VUE_APP_CSP_HOSTS: "*.saferwall.com saferwall.com"
+  VUE_APP_ANALYTICS_GOOGLE_TAG: UA-111524273-1
   VUE_APP_API_BASE_URL: "https://api.saferwall.com/v1/"
   VUE_APP_AVATAR_BASE_URL: "https://avatar.saferwall.com/"
 

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -2,6 +2,7 @@ name: UI Release
 on: workflow_dispatch
 env:
   IMAGE: saferwall/ui
+
 jobs:
   docker-release:
     runs-on: ubuntu-20.04

diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ node_modules
 package-lock.json
 
 # local env files
+.env
 .env.local
 .env.*.local
 

diff --git a/entrypoint.sh b/entrypoint.sh
@@ -1,4 +1,34 @@
 #!/bin/sh
 
-echo "Starting Nginx"
+# Replace env in app.*.js
+for file in /usr/share/nginx/html/js/app.*.js;
+do
+  echo "[Info] Processing $file ...";
+
+  # Use the existing JS file as template
+  if [ ! -f $file.tmpl.js ]; then
+    cp $file $file.tmpl.js
+  fi
+
+  envsubst '$VUE_APP_BASE_URI' < $file.tmpl.js > $file
+  envsubst '$VUE_APP_API_BASE_URL' < $file > $file
+  envsubst '$VUE_APP_AVATAR_BASE_URL' < $file > $file
+done
+
+# Replace env in index.html
+file="/usr/share/nginx/html/index.html";
+
+echo "[Info] Processing $file ...";
+cp $file $file.tmp
+
+head_tag="<\/head>"
+if [ -z "${VUE_APP_ANALYTICS_GOOGLE_TAG}" ]; then
+  echo "[Info] VUE_APP_ANALYTICS_GOOGLE_TAG env value is not defined";
+else 
+  # Inject google analytics
+  g_tag='<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga("create", "'$VUE_APP_ANALYTICS_GOOGLE_TAG'", "auto");ga("send", "pageview");<\/script><script async src="https:\/\/www.google-analytics.com\/analytics.js"><\/script>\n'$head_tag
+  sed -i "s/$head_tag/$g_tag/g" $file
+fi
+
+echo "[Info] Starting Nginx ..."
 nginx -g 'daemon off;'
diff --git a/nginx.conf b/nginx.conf
@@ -13,11 +13,18 @@ server {
   gzip_static on;
   gzip_min_length 500;
 
+
+  add_header X-Frame-Options "DENY";
+  add_header X-Content-Type-Options nosniff;
+  add_header X-XSS-Protection "1; mode=block";
+  add_header Content-Security-Policy "default-src 'self'; font-src *; script-src 'unsafe-eval' 'self';style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src *; object-src 'none'; base-uri 'self'; form-action 'self'; img-src * data:;";
+
   location / {
     try_files $uri $uri/ @rewrites;
   }
 
   location @rewrites {
+
     rewrite ^(.+)$ /index.html last;
   }
 

diff --git a/public/assets/avatars/user-1.svg b/public/assets/avatars/user-1.svg
diff --git a/public/assets/icons/twitter.svg b/public/assets/icons/twitter.svg
diff --git a/public/index.html b/public/index.html
@@ -5,9 +5,6 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="img-src cdnjs.cloudflare.com *.saferwall.com 'self' data:;">
-  <meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-eval' 'self' ;">
-
 
   <title>Saferwall</title>
 
@@ -16,6 +13,8 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="manifest" href="/site.webmanifest">
+
+  <!-- env header vars will be auto injected before the end of head tag -->
 </head>
 
 <body>

diff --git a/src/common/components/content/FileContent.vue b/src/common/components/content/FileContent.vue
@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import APP_CONFIGS from "@/common/config";
+import Config from "@/common/config";
 
 import Btn from "@/common/components/elements/button/Btn.vue";
 import BtnLike from "@/common/components/elements/button/BtnLike.vue";
@@ -180,7 +180,9 @@ export default {
       this.file = await this.getFile;
       this.hash = this.file.sha256;
       this.dliked = this.file.liked;
-      this.downloadLink = `${APP_CONFIGS.apiURL}files/${this.hash}/download/`;
+      this.downloadLink = `${Config.value("apiURL")}files/${
+        this.hash
+      }/download/`;
     },
     updateLike(liked) {
       this.dliked = liked == true;

diff --git a/src/common/components/elements/button/BtnCopy.vue b/src/common/components/elements/button/BtnCopy.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    @click="copyContent($event)"
+    @mouseenter="showCopyIcon($event)"
+    @mouseleave="removeCopyIcon($event)"
+  >
+    <slot />
+  </div>
+</template>
+
+
+<script>
+const svgCopyIcon = `
+<span data-copy-btn><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg><label>Copy</label></span>`;
+export default {
+  methods: {
+    copyContent(event) {
+      // clone node and remove copy button
+      const nodeContent = event.target.parentNode.cloneNode(true);
+      nodeContent.querySelector("div[data-copy-element]").remove();
+
+      this.selectContent(event.target.parentNode);
+      this.updateClipboard(nodeContent.textContent, () => {
+        const copySvg = this.getCopyButton(event);
+        if (!copySvg) return;
+
+        copySvg.querySelector("label").innerText = "Copied !";
+      });
+    },
+    showCopyIcon(event) {
+      event.target.setAttribute("data-copy-parent", 1);
+
+      const copySvg = this.getCopyButton(event);
+      if (copySvg) return;
+
+      const copyElement = document.createElement("div");
+      copyElement.setAttribute("data-copy-element", 1);
+      copyElement.innerHTML = svgCopyIcon;
+
+      event.target.prepend(copyElement);
+    },
+    removeCopyIcon(event) {
+      const copySvg = this.getCopyButton(event);
+      if (!copySvg) return;
+
+      copySvg.remove();
+    },
+    getCopyButton(event) {
+      return event.target.parentNode.querySelector("div[data-copy-element]");
+    },
+    selectContent(node) {
+      var r = document.createRange();
+      r.selectNodeContents(node);
+      var sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(r);
+    },
+    updateClipboard(content, done = () => {}) {
+      navigator.clipboard &&
+        navigator.clipboard.writeText(content).then(
+          () => {
+            done();
+          },
+          function () {
+            /* clipboard write failed */
+            console.error("Copy action is not granted");
+          }
+        );
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" >
+*[data-copy-parent] {
+  @apply relative;
+
+  label {
+    @apply text-xs;
+  }
+}
+div[data-copy-element] {
+  @apply bg-green-500 bg-opacity-10;
+  @apply absolute flex items-center justify-center;
+  @apply w-full h-full;
+
+  @apply select-none;
+
+  span[data-copy-btn] {
+    @apply text-white;
+    @apply flex items-center justify-center gap-x-1;
+    @apply p-1 px-2 bg-primary bg-opacity-90 rounded;
+  }
+}
+</style>
diff --git a/src/common/components/partials/Sidebar.vue b/src/common/components/partials/Sidebar.vue
@@ -140,6 +140,59 @@
               >SOON</span
             >
           </a>
+
+          <ul
+            class="sub-items"
+            :class="isMenuOpen('dynamic-analysis') ? '' : 'hide'"
+          >
+            <li
+              :class="isPageActive('dynamic-analysis/overview') ? 'active' : ''"
+            >
+              <router-link :to="getPageLink('dynamic-analysis/overview')">
+                Overview
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/api-calls') ? 'active' : ''
+              "
+            >
+              <router-link :to="getPageLink('dynamic-analysis/api-calls')">
+                API Calls
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/dropped-files') ? 'active' : ''
+              "
+            >
+              <router-link :to="getPageLink('dynamic-analysis/dropped-files')">
+                Dropped Files
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/memory-buffers') ? 'active' : ''
+              "
+            >
+              <router-link :to="getPageLink('dynamic-analysis/memory-buffers')">
+                Memory Buffers
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/network-analysis')
+                  ? 'active'
+                  : ''
+              "
+            >
+              <router-link
+                :to="getPageLink('dynamic-analysis/network-analysis')"
+              >
+                Network Analysis
+              </router-link>
+            </li>
+          </ul>
         </li>
 
         <li :class="isPageActive('comments') ? 'active' : ''">
@@ -189,6 +242,7 @@ export default {
     hash: null,
     menuOpen: {
       "static-analysis": true,
+      "dynamic-analysis": true,
     },
   }),
   computed: {
@@ -275,7 +329,7 @@ export default {
         a {
           @apply text-gray-medium;
           @apply border-transparent;
-          @apply py-2 pl-6 border-l-4;
+          @apply py-1 pl-6 border-l-4;
         }
       }
     }

diff --git a/src/common/components/tables/TableCols.vue b/src/common/components/tables/TableCols.vue
@@ -11,16 +11,33 @@
     <tbody :class="hasColumns ? 'table-kval' : 'table-cval'">
       <tr v-for="(line, lindex) in lines" v-bind:key="line">
         <template v-for="(val, jindex) in line" v-bind:key="val">
-          <td v-if="isHtmlAllowed(lindex, jindex)" v-html="val"></td>
-          <td v-else>{{ val }}</td>
+          <td v-if="isHtmlAllowed(lindex, jindex)">
+            <template v-if="isCopyActive(jindex)">
+              <btn-copy v-html="val"></btn-copy>
+            </template>
+            <template v-else>
+              <div v-html="val"></div>
+            </template>
+          </td>
+          <td v-else>
+            <template v-if="isCopyActive(jindex)">
+              <btn-copy>{{ val }}</btn-copy>
+            </template>
+            <template v-else>{{ val }}</template>
+          </td>
         </template>
       </tr>
     </tbody>
   </table>
 </template>
 
 <script>
+import BtnCopy from "../elements/button/BtnCopy.vue";
+
 export default {
+  components: {
+    BtnCopy,
+  },
   props: {
     title: String,
     columns: Object,
@@ -35,6 +52,10 @@ export default {
       type: Array(),
       default: [],
     },
+    copyFields: {
+      type: Array(),
+      default: [],
+    },
   },
   computed: {
     hasColumns() {
@@ -46,6 +67,9 @@ export default {
       let tkey = typeof jindex == "number" ? jindex : `${lindex}-${jindex}`;
       return this.htmlFields.includes(this.customFields ? tkey : jindex);
     },
+    isCopyActive(index) {
+      return this.copyFields.length > 0 && this.copyFields.includes(index);
+    },
   },
 };
 </script>