Embed adjustments.

Changed how embeds work to further prevent XSS possibilities. Window rename to simply "Chat". Small adjustments. Signed-off-by: Armored Dragon <[email protected]>
overte-org · Feb 25, 2024 · 6bc445d · 6bc445d
1 parent 4394044
commit 6bc445d
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 15 deletions.
diff --git a/applications/armored-chat/armored_chat.js b/applications/armored-chat/armored_chat.js
@@ -10,6 +10,7 @@
 (function () {
   "use strict";
   // TODO: Encryption + PMs
+  // TODO: Open in external web browser
 
   var app_is_visible = false;
   var settings = {
@@ -62,7 +63,7 @@
   }
   function _openWindow() {
     chat_overlay_window = new Desktop.createWindow(Script.resourcesPath() + "qml/hifi/tablet/DynamicWebview.qml", {
-      title: "Overte Chat",
+      title: "Chat",
       size: { x: 550, y: 400 },
       additionalFlags: Desktop.ALWAYS_ON_TOP,
       visible: app_is_visible, // FIXME Invalid?
@@ -135,7 +136,8 @@
         break;
 
       case "open_url":
-        Window.openUrl(parsed.message.toString());
+        new OverlayWebWindow({ source: parsed.url.toString(), width: 500, height: 400 });
+        // Window.openUrl(parsed.url.toString());
         break;
 
       case "setting_update":

diff --git a/applications/armored-chat/index.css b/applications/armored-chat/index.css
@@ -85,6 +85,9 @@ body .page .content.message-list .message .body {
   word-wrap: anywhere;
   overflow-x: hidden;
 }
+body .page .content.message-list .message .body a {
+  color: white;
+}
 body .page .content.message-list .message .body .image-container {
   width: 100%;
   max-width: 400px;
@@ -93,6 +96,20 @@ body .page .content.message-list .message .body .image-container {
 body .page .content.message-list .message .body .image-container img {
   width: auto;
   height: 100%;
+}
+body .page .content.message-list .message .embeds {
+  width: 100%;
+  overflow-x: hidden;
+}
+body .page .content.message-list .message .embeds a {
+  color: white;
+}
+body .page .content.message-list .message .embeds .image-container {
+  width: 100%;
+  max-width: 400px;
+  max-height: 300px;
+}
+body .page .content.message-list .message .embeds .image-container img {
   max-width: 400px;
   max-height: 300px;
 }

diff --git a/applications/armored-chat/index.html b/applications/armored-chat/index.html
@@ -186,30 +186,34 @@
     // Clone template message
     let message_template = qs("#message-listing");
     let message_clone = message_template.content.cloneNode(true);
+    let message_embeds = "";
+    message_clone.querySelector(".body").innerHTML = "";
+    message_clone.querySelector(".embeds").innerHTML = "";
 
     // Youtube embeds
     let yt_url = message.message.match(/(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g);
     if (yt_url) {
-      message.message = message.message.replace(
-        yt_url,
-        `${yt_url}
-          <br>
-          <iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${yt_url.toString().split("/")[3]}' frameborder='0'></iframe>`
-      );
+      yt_url.forEach((url) => {
+        message_embeds += `<iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${url.toString().split("/")[3]}' frameborder='0'></iframe><br>`;
+        // message.message = message.message.replace(url, "");
+      });
     }
 
     // Image embeds
     let image_link = message.message.match(/.+.(png|jpg|jpeg|webp)/g);
     if (image_link) {
-      message.message = message.message.replace(image_link, `${image_link}<br><span class='image-container'><img src='${image_link}'></span>`);
+      image_link.forEach((image) => {
+        message_embeds += `<span class='image-container'><img src='${image}'></span><br>`;
+        // message.message = message.message.replace(image, "");
+      });
     }
 
     // Linkify links
-    let link_regex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/gm;
-
-    if (message.message.match(link_regex)) {
-      message.message = message.message.replace(link_regex, (match) => {
-        return `<a href='#' onclick='_emitEvent({type:"open_url", url: match.toString()})'>${match}</a>`;
+    let link_url = message.message.match(/(?:^|\s)(https?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+(?:\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)?(?=\s|$)/g);
+    if (link_url) {
+      link_url.forEach((link) => {
+        message_embeds += `<a href='#' onclick='_emitEvent({type:"open_url", url: "${link}" })'>${link}</a><br>`;
+        message.message = message.message.replace(link, "");
       });
     }
 
@@ -220,7 +224,9 @@
       month: "long",
       day: "numeric",
     });
-    message_clone.querySelector(".body").innerHTML = message.message;
+
+    message_clone.querySelector(".embeds").innerHTML = message_embeds;
+    message_clone.querySelector(".body").innerText = message.message;
     // Append to the message list
     qs("#" + target + " .message-list").appendChild(message_clone);
     // Scroll to the bottom of the page
@@ -260,6 +266,7 @@
     <div class="pfp"><img src="./img/ui/user_white.png" /></div>
     <div class="name">[NAME]</div>
     <div class="timestamp" title="[DATE]">[TIMESTAMP]</div>
+    <div class="embeds">[EMBEDS]</div>
     <div class="body">[CONTENT]</div>
   </div>
 </template>

diff --git a/applications/armored-chat/index.scss b/applications/armored-chat/index.scss
@@ -95,6 +95,10 @@ body {
           word-wrap: anywhere;
           overflow-x: hidden;
 
+          a {
+            color: white;
+          }
+
           .image-container {
             width: 100%;
             max-width: 400px;
@@ -104,8 +108,33 @@ body {
               width: auto;
               height: 100%;
 
+              // max-width: 400px;
+              // max-height: 300px;
+            }
+          }
+        }
+
+        .embeds {
+          width: 100%;
+
+          overflow-x: hidden;
+          a {
+            color: white;
+          }
+
+          .image-container {
+            width: 100%;
+            max-width: 400px;
+            max-height: 300px;
+
+            img {
+              // width: auto;
+              // height: 100%;
               max-width: 400px;
               max-height: 300px;
+
+              // max-width: 400px;
+              // max-height: 300px;
             }
           }
         }