From 7fb13cf54b76bb5f5f28431ac89cf3c4c6b11b04 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Thu, 28 Oct 2021 19:15:02 +0200
Subject: [PATCH] santitize, popup class

---
 front/src/Api/Events/OpenPopupEvent.ts          |  1 +
 front/src/Api/iframe/ui.ts                      |  3 ++-
 .../LayoutManager/LayoutManager.svelte          | 17 +++--------------
 front/src/Phaser/Game/GameScene.ts              |  6 ++++--
 front/src/WebRtc/HtmlUtils.ts                   | 16 ++++++++++++++++
 front/src/iframe_api.ts                         |  4 ++--
 front/style/style.scss                          | 15 +++++++++++++++
 7 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/front/src/Api/Events/OpenPopupEvent.ts b/front/src/Api/Events/OpenPopupEvent.ts
index 9ac120bd..7d7556fb 100644
--- a/front/src/Api/Events/OpenPopupEvent.ts
+++ b/front/src/Api/Events/OpenPopupEvent.ts
@@ -13,6 +13,7 @@ export const isOpenPopupEvent = new tg.IsInterface()
         targetObject: tg.isString,
         message: tg.isString,
         buttons: tg.isArray(isButtonDescriptor),
+        popupClass : tg.isString,
         input: tg.isBoolean
     }).get();
 
diff --git a/front/src/Api/iframe/ui.ts b/front/src/Api/iframe/ui.ts
index ce39bebe..87301f68 100644
--- a/front/src/Api/iframe/ui.ts
+++ b/front/src/Api/iframe/ui.ts
@@ -85,7 +85,7 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
         }),
     ];
 
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input: boolean = false): Popup {
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], popupClass : string = "", input: boolean = false): Popup {
         popupId++;
         const popup = new Popup(popupId);
         const btnMap = new Map<number, () => void>();
@@ -113,6 +113,7 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
                         className: button.className,
                     };
                 }),
+                popupClass,
                 input
             },
         });
diff --git a/front/src/Components/LayoutManager/LayoutManager.svelte b/front/src/Components/LayoutManager/LayoutManager.svelte
index 5e44df84..0d5c4d2c 100644
--- a/front/src/Components/LayoutManager/LayoutManager.svelte
+++ b/front/src/Components/LayoutManager/LayoutManager.svelte
@@ -1,24 +1,13 @@
 <script lang="ts">
     import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
-    const sanitizeHtml = require('sanitize-html');
-
+    import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 
     function onClick(callback: () => void) {
         callback();
     }
 
-    function sanitize(html : string | number | boolean | undefined) {
-      return sanitizeHtml(html, {
-        allowedAttributes: {
-          'span': ['style'],
-        },
-        allowedStyles: {
-          'span': {
-            'color': [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/],
-            'font-size': [/^\d+(?:px|em|%)$/]
-          }
-        }
-      });
+    function sanitize(html : string) {
+      return HtmlUtils.sanitize(html);
     }
 </script>
 
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 92351cc7..3a3c7bc5 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -97,6 +97,8 @@ import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { get } from "svelte/store";
 import { contactPageStore } from "../../Stores/MenuStore";
 
+
+
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -921,7 +923,7 @@ export class GameScene extends DirtyScene {
                     );
                     return;
                 }
-                const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
+                const escapedMessage = HtmlUtils.sanitize(openPopupEvent.message);
                 let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
                 html += escapedMessage;
                 if (openPopupEvent.input) {
@@ -943,7 +945,7 @@ export class GameScene extends DirtyScene {
                 const container: HTMLDivElement = domElement.getChildByID("container") as HTMLDivElement;
                 container.style.width = objectLayerSquare.width + "px";
                 domElement.scale = 0;
-                domElement.setClassName("popUpElement");
+                domElement.setClassName("popUpElement " + openPopupEvent.popupClass ?? "");
 
                 setTimeout(() => {
                     container.hidden = false;
diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts
index 07cde749..9319e15c 100644
--- a/front/src/WebRtc/HtmlUtils.ts
+++ b/front/src/WebRtc/HtmlUtils.ts
@@ -1,3 +1,5 @@
+const sanitizeHtml = require('sanitize-html');
+
 export class HtmlUtils {
     public static getElementByIdOrFail<T extends HTMLElement>(id: string): T {
         const elem = document.getElementById(id);
@@ -31,6 +33,20 @@ export class HtmlUtils {
         return p.innerHTML;
     }
 
+    public static sanitize(html : string) {
+        return sanitizeHtml(html, {
+          allowedAttributes: {
+            'span': ['style'],
+          },
+          allowedStyles: {
+            'span': {
+              'color': [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/],
+              'font-size': [/^\d+(?:px|em|%)$/]
+            }
+          }
+        });
+      }
+
     public static urlify(text: string, style: string = ""): string {
         const urlRegex = /(https?:\/\/[^\s]+)/g;
         text = HtmlUtils.escapeHtml(text);
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index 5354f84c..ccda7d45 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -146,9 +146,9 @@ const wa = {
     /**
      * @deprecated Use WA.ui.openPopup instead
      */
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input : boolean): Popup {
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], popupClass : string, input : boolean): Popup {
         console.warn('Method WA.openPopup is deprecated. Please use WA.ui.openPopup instead');
-        return ui.openPopup(targetObject, message, buttons, input);
+        return ui.openPopup(targetObject, message, buttons, popupClass, input);
     },
     /**
      * @deprecated Use WA.chat.onChatMessage instead
diff --git a/front/style/style.scss b/front/style/style.scss
index d7871d7a..83982fdc 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1117,3 +1117,18 @@ div.is-silent.hide {
 .emote-menu .emoji-picker .emoji-picker__emoji {
     font-family: "Twemoji Mozilla" !important;
 }
+
+.popUpElement.overlay-text {
+    
+    div {
+
+        background: none;
+
+        .nes-container {
+            font-size: 10px;
+            color: #000;
+            background: none;
+            border: none;
+        }
+    }
+}
\ No newline at end of file