action message html

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>