Security: add DOM-purification, add 'norefferer' and 'noopener' automatically to links to new tabs

src/Models/ThemeViewState.ts

@@ -113,6 +113,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
     readonly floors: Store<string[]>
 
     constructor(layout: LayoutConfig) {
+        Utils.initDomPurify()
         this.layout = layout
         this.featureSwitches = new FeatureSwitchState(layout)
         this.guistate = new MenuState(

src/UI/Base/FromHtml.svelte

@@ -2,12 +2,18 @@
   /**
    * Given an HTML string, properly shows this
    */
-
+  import DOMPurify from 'dompurify';
   export let src: string
+  
+  let cleaned = DOMPurify.sanitize(src, { USE_PROFILES: { html: true }, 
+    ADD_ATTR: ['target']  // Don't remove target='_blank'. Note that Utils.initDomPurify does add a hook which automatically adds 'rel=noopener'
+  });
+  
+  
   let htmlElem: HTMLElement
   $: {
     if (htmlElem) {
-      htmlElem.innerHTML = src
+      htmlElem.innerHTML = cleaned
     }
   }
 

src/Utils.ts

@@ -1,4 +1,5 @@
 import colors from "./assets/colors.json"
+import DOMPurify from "dompurify"
 
 export class Utils {
     /**
@@ -25,6 +26,16 @@ Note that these values can be prepare with javascript in the theme by using a [c
  `
     public static readonly imageExtensions = new Set(["jpg", "png", "svg", "jpeg", ".gif"])
 
+    public static initDomPurify() {
+        DOMPurify.addHook("afterSanitizeAttributes", function (node) {
+            // set all elements owning target to target=_blank + add noopener noreferrer
+            if ("target" in node) {
+                node.setAttribute("target", "_blank")
+                node.setAttribute("rel", "noopener noreferrer")
+            }
+        })
+    }
+
     public static readonly special_visualizations_importRequirementDocs = `#### Importing a dataset into OpenStreetMap: requirements
 
 If you want to import a dataset, make sure that: