From b256431828b45a8eb0addca59cf70de8682c1cc7 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Tue, 14 Sep 2021 13:08:25 +0200
Subject: [PATCH] action message html

---
 front/package.json                             |  2 +-
 .../LayoutManager/LayoutManager.svelte         | 18 +++++++++++++++++-
 front/yarn.lock                                |  8 ++++----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/front/package.json b/front/package.json
index f76b4cd6..5635a01e 100644
--- a/front/package.json
+++ b/front/package.json
@@ -56,7 +56,7 @@
     "quill": "1.3.6",
     "quill-delta-to-html": "^0.12.0",
     "rxjs": "^6.6.3",
-    "sanitize-html": "^2.4.0",
+    "sanitize-html": "^2.5.0",
     "simple-peer": "^9.11.0",
     "socket.io-client": "^2.3.0",
     "standardized-audio-context": "^25.2.4",
diff --git a/front/src/Components/LayoutManager/LayoutManager.svelte b/front/src/Components/LayoutManager/LayoutManager.svelte
index 2e164836..5e44df84 100644
--- a/front/src/Components/LayoutManager/LayoutManager.svelte
+++ b/front/src/Components/LayoutManager/LayoutManager.svelte
@@ -1,16 +1,32 @@
 <script lang="ts">
     import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
+    const sanitizeHtml = require('sanitize-html');
+
 
     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|%)$/]
+          }
+        }
+      });
+    }
 </script>
 
 
 <div class="layout-manager-list">
     {#each $layoutManagerActionStore as action}
         <div class="nes-container is-dark {action.type}" on:click={() => onClick(action.callback)}>
-            <p>{action.message}</p>
+          <p>{@html sanitize(action.message)}</p>
         </div>
     {/each}
 </div>
diff --git a/front/yarn.lock b/front/yarn.lock
index bbf86c10..9299a6b7 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -4990,10 +4990,10 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sanitize-html@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.4.0.tgz#8da7524332eb210d968971621b068b53f17ab5a3"
-  integrity sha512-Y1OgkUiTPMqwZNRLPERSEi39iOebn2XJLbeiGOBhaJD/yLqtLGu6GE5w7evx177LeGgSE+4p4e107LMiydOf6A==
+sanitize-html@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.5.0.tgz#142f43524bc6dc8a5e3fb565528aa0d9679c56dd"
+  integrity sha512-smU67ODza8E0rJF7oY37qQqMF5srxwEkqsgV17PFfdYAtIxnicH8LIyDEGINJIso8bPaxRZS7zGhCjg6BeDoqQ==
   dependencies:
     deepmerge "^4.2.2"
     escape-string-regexp "^4.0.0"