Merge pull request #34 from archtika/devel

Escape user input <ins> and <del> elements in logs

Author: Thilo Hohlt

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts

@@ -80,17 +80,18 @@ export const actions: Actions = {
 
     const htmlDiff = (oldValue: string, newValue: string) => {
       const diff = dmp.diff_main(oldValue, newValue);
-      dmp.diff_cleanupSemantic(diff);
 
       return diff
         .map(([op, text]) => {
+          const escapedText = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
           switch (op) {
             case 1:
-              return `<ins>${text}</ins>`;
+              return `<ins>${escapedText}</ins>`;
             case -1:
-              return `<del>${text}</del>`;
+              return `<del>${escapedText}</del>`;
             default:
-              return text;
+              return escapedText;
           }
         })
         .join("");

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte

@@ -141,24 +141,20 @@
                       <button type="submit">Compute diff</button>
                     </form>
                     {#if form?.logId === id && form?.currentDiff}
-                      <pre>{@html DOMPurify.sanitize(
-                          // .replace takes escaped text representations of line breaks and converts them to real line breaks that render correctly in HTML
-                          form.currentDiff.replace(/\\r\\n|\\n|\\r/g, "\n").replace(/\\\"/g, '"'),
-                          {
-                            ALLOWED_TAGS: ["ins", "del"]
-                          }
-                        )}</pre>
+                      <pre>{@html form.currentDiff
+                          .replace(/\\\"/g, '"')
+                          .replace(/\\r\\n|\\n|\\r/g, "\n")}</pre>
                     {/if}
                   {/if}
 
                   {#if new_value && !old_value}
                     <h4>New value</h4>
-                    <pre>{DOMPurify.sanitize(newValue)}</pre>
+                    <pre>{newValue.replace(/\\\"/g, '"').replace(/\\r\\n|\\n|\\r/g, "\n")}</pre>
                   {/if}
 
                   {#if old_value && !new_value}
                     <h4>Old value</h4>
-                    <pre>{DOMPurify.sanitize(oldValue)}</pre>
+                    <pre>{oldValue.replace(/\\\"/g, '"').replace(/\\r\\n|\\n|\\r/g, "\n")}</pre>
                   {/if}
                 </Modal>
               </td>