From 34b9fb635f1b559a04597d93244372727a31f0e4 Mon Sep 17 00:00:00 2001
From: Jose Celano <josecelano@gmail.com>
Date: Tue, 4 Jul 2023 17:48:48 +0100
Subject: [PATCH 1/4] feat: add dependency: dompurify

To sanitize markdown in torrent description.
---
 package-lock.json | 22 ++++++++++++++++++++++
 package.json      |  2 ++
 project-words.txt |  1 +
 3 files changed, 25 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index c8128eb8..02dc0887 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "dependencies": {
         "@heroicons/vue": "^2.0.18",
         "daisyui": "^3.1.7",
+        "dompurify": "^3.0.4",
         "marked": "^5.1.0",
         "notiwind-ts": "^2.0.2",
         "torrust-index-api-lib": "^0.2.0",
@@ -18,6 +19,7 @@
         "@nuxtjs/eslint-config-typescript": "^12.0.0",
         "@nuxtjs/tailwindcss": "^6.8.0",
         "@tailwindcss/typography": "^0.5.9",
+        "@types/dompurify": "^3.0.2",
         "@types/marked": "^5.0.0",
         "@types/node": "^20.3.2",
         "@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -2826,6 +2828,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.2.tgz",
+      "integrity": "sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.40.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.2.tgz",
@@ -2922,6 +2933,12 @@
       "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+      "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
+      "dev": true
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -6512,6 +6529,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.4.tgz",
+      "integrity": "sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ=="
+    },
     "node_modules/domutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
diff --git a/package.json b/package.json
index a88fb3f5..b9636041 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@types/dompurify": "^3.0.2",
     "@types/marked": "^5.0.0",
     "@types/node": "^20.3.2",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -32,6 +33,7 @@
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
     "daisyui": "^3.1.7",
+    "dompurify": "^3.0.4",
     "marked": "^5.1.0",
     "notiwind-ts": "^2.0.2",
     "torrust-index-api-lib": "^0.2.0",
diff --git a/project-words.txt b/project-words.txt
index 1a1ceb01..7bfebf84 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -1,4 +1,5 @@
 composables
+dompurify
 heroicons
 notiwind
 Nuxt

From 914373693ef724058388d323d6d7d8959006cc90 Mon Sep 17 00:00:00 2001
From: Jose Celano <josecelano@gmail.com>
Date: Tue, 4 Jul 2023 18:11:44 +0100
Subject: [PATCH 2/4] feat: sanitize torrent description in markdown

- Purify HTML to avoid potencial XSS attacks.
- Remove external URLS to protect users' privacy.
---
 components/Markdown.vue | 114 +++++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 54 deletions(-)

diff --git a/components/Markdown.vue b/components/Markdown.vue
index 7ceeb81d..7156d48a 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -6,6 +6,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { marked } from "marked";
+import DOMPurify from "dompurify";
 import { onMounted, ref, useRestApi, watch } from "#imports";
 
 const props = defineProps({
@@ -35,52 +36,79 @@ onMounted(() => {
 });
 
 function markdown (src: string) {
+  // Convert the markdown to HTML.
   return marked(src, options);
 }
 
 async function sanitizeDescription () {
   // Get the original not sanitized markdown string.
-  const description = markdown(props.source);
+  const html = markdown(props.source);
+
+  // Sanitize the description to remove any harmful HTML.
+  const sanitizedHtml = DOMPurify.sanitize(html);
+
+  // Parse the description as HTML to easily manipulate it.
+  const parser = new DOMParser();
+  const descriptionHtml = parser.parseFromString(sanitizedHtml, "text/html");
+
+  // Remove all external links.
+  const links = descriptionHtml.querySelectorAll("a");
+  links.forEach((link) => {
+    const href = link.getAttribute("href");
+    if (href && !href.startsWith("#")) {
+      link.removeAttribute("href");
+    }
+  });
 
-  // Replace the img src's with a random id and return a map
-  // of these ids mapped to the original url.
-  const [filteredDescriptionWithImageIds, imageIdUrlMap] = filterDescriptionImagesWithRandomIds(description);
+  // Replace images with data from the image proxy
+  const images = descriptionHtml.querySelectorAll("img");
+  for (let i = 0; i < images.length; i++) {
+    const img = images[i];
+    const src = img.getAttribute("src");
+
+    if (src) {
+      if (isAllowedImage(src)) {
+        const imageDataSrc = await getImageDataUrl(src);
+        img.setAttribute("src", imageDataSrc);
+      } else {
+        img.remove();
+      }
+    }
+  }
 
-  // Get the image data using the backend's image proxy.
-  const imageIdDataUrlMap = await getImageDataUrlsFromUrls(imageIdUrlMap);
+  // Convert the description HTML back to a string.
+  const body = descriptionHtml.querySelector("body");
+  const serializer = new XMLSerializer();
+  let sanitizedDescriptionStr = "";
+  if (body) {
+    sanitizedDescriptionStr = serializer.serializeToString(body);
+    sanitizedDescriptionStr = sanitizedDescriptionStr
+      .replace("<body xmlns=\"http://www.w3.org/1999/xhtml\">", "")
+      .replace("<body>", "")
+      .replace("</body>", "");
+  }
 
-  // Replace the img id's with the proxied sources.
-  sanitizedDescription.value = replaceDescriptionImageIdsWithDataUrls(filteredDescriptionWithImageIds, imageIdDataUrlMap);
+  sanitizedDescription.value = sanitizedDescriptionStr;
 }
 
-function filterDescriptionImagesWithRandomIds (description: string): [string, Map<string, string>] {
-  const filteredImageMap = new Map();
-
-  // Replace all image urls with a random id.
-  description = description.replace(/img src="(.*?)"/gi, (match, url): string => {
-    const imageId = randomId(32);
-
-    filteredImageMap.set(imageId, url);
-
-    return `img src="${imageId}"`;
-  });
-
-  return [description, filteredImageMap];
+// Returns true if the image is allowed to be displayed.
+function isAllowedImage (href: string): boolean {
+  const allowedExtensions = ["png", "PNG", "jpg", "JPG", "jpeg", "JPEG", "gif", "GIF"];
+  const extension = href.split(".").pop().trim();
+  return allowedExtensions.includes(extension);
 }
 
-async function getImageDataUrlsFromUrls (imageMap: Map<string, string>): Promise<Map<string, string>> {
-  const imageDataMap: Map<string, string> = new Map();
-
-  for (const [id, url] of imageMap) {
-    const imageBlob = await rest.torrent.proxiedImage(url);
-    const imageDataUrl = await blobToDataURL(imageBlob);
-
-    imageDataMap.set(id, imageDataUrl);
-  }
-
-  return imageDataMap;
+// Returns a base64 string ready to be use in a "src" attribute in a "img" html tag,
+// like this `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gA…IiIiIiIiIiIiIiHyO/P85XT/jxW1glg5Erk==">`.
+async function getImageDataUrl (url: string): Promise<string> {
+  const imageBlob = await rest.torrent.proxiedImage(url);
+  const data = await blobToDataURL(imageBlob);
+  return data;
 }
 
+// Convert binary data into a base64 encoded string ready to be use in a "src"
+// attribute in a "img" html tag, like the following:
+// `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gA…IiIiIiIiIiIiIiHyO/P85XT/jxW1glg5Erk==">`.
 function blobToDataURL (blob: Blob): Promise<string> {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader();
@@ -90,28 +118,6 @@ function blobToDataURL (blob: Blob): Promise<string> {
     reader.readAsDataURL(blob);
   });
 }
-
-function replaceDescriptionImageIdsWithDataUrls (description: string, imageIdDataUrlMap: Map<string, string>): string {
-  imageIdDataUrlMap.forEach((dataUrl, id) => {
-    description = description.replace(id, dataUrl);
-  });
-
-  return description;
-}
-
-function randomId (length: number) {
-  let result = "";
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  let counter = 0;
-
-  while (counter < length) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    counter += 1;
-  }
-
-  return result;
-}
 </script>
 
 <style scoped>

From 7d65d3bdb05bd9d5017c144241bc1334b4fb262e Mon Sep 17 00:00:00 2001
From: Jose Celano <josecelano@gmail.com>
Date: Wed, 5 Jul 2023 10:48:10 +0100
Subject: [PATCH 3/4] feat: [#105] allow only some html tags in sanitized
 markdown torrent description

We allow only HTML tags that are used when converting from markdown to
HTML. We want to avoid using html tag that might contain external
sources ("src" attributes) which can be used to track users.
---
 components/Markdown.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/Markdown.vue b/components/Markdown.vue
index 7156d48a..9eb2a764 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -9,6 +9,9 @@ import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { onMounted, ref, useRestApi, watch } from "#imports";
 
+const allowedTags = ["h1", "h2", "h3", "h4", "h5", "h6", "em", "strong", "del", "a", "img", "ul", "ol", "li", "hr"];
+const allowedExtensions = ["png", "PNG", "jpg", "JPG", "jpeg", "JPEG", "gif", "GIF"];
+
 const props = defineProps({
   source: {
     type: String,
@@ -45,7 +48,7 @@ async function sanitizeDescription () {
   const html = markdown(props.source);
 
   // Sanitize the description to remove any harmful HTML.
-  const sanitizedHtml = DOMPurify.sanitize(html);
+  const sanitizedHtml = DOMPurify.sanitize(html, { ALLOWED_TAGS: allowedTags });
 
   // Parse the description as HTML to easily manipulate it.
   const parser = new DOMParser();
@@ -93,7 +96,6 @@ async function sanitizeDescription () {
 
 // Returns true if the image is allowed to be displayed.
 function isAllowedImage (href: string): boolean {
-  const allowedExtensions = ["png", "PNG", "jpg", "JPG", "jpeg", "JPEG", "gif", "GIF"];
   const extension = href.split(".").pop().trim();
   return allowedExtensions.includes(extension);
 }

From 77cbdad5435c8dd4a8f8845d7f101a96094e2035 Mon Sep 17 00:00:00 2001
From: Jose Celano <josecelano@gmail.com>
Date: Wed, 5 Jul 2023 12:44:17 +0100
Subject: [PATCH 4/4] refactor: extract functions for sanitizing torrent
 description

Decouple function from Vue component so that:

- They can be tested independently
- They can be reused easily in other components
---
 components/Markdown.vue          | 87 ++--------------------------
 src/domain/services/sanitizer.ts | 97 ++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+), 83 deletions(-)
 create mode 100644 src/domain/services/sanitizer.ts

diff --git a/components/Markdown.vue b/components/Markdown.vue
index 9eb2a764..745904dc 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -6,12 +6,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { marked } from "marked";
-import DOMPurify from "dompurify";
+import { sanitize } from "~/src/domain/services/sanitizer";
 import { onMounted, ref, useRestApi, watch } from "#imports";
 
-const allowedTags = ["h1", "h2", "h3", "h4", "h5", "h6", "em", "strong", "del", "a", "img", "ul", "ol", "li", "hr"];
-const allowedExtensions = ["png", "PNG", "jpg", "JPG", "jpeg", "JPEG", "gif", "GIF"];
-
 const props = defineProps({
   source: {
     type: String,
@@ -19,8 +16,6 @@ const props = defineProps({
   }
 });
 
-const rest = useRestApi().value;
-
 const sanitizedDescription = ref("");
 
 const options = {
@@ -38,87 +33,13 @@ onMounted(() => {
   sanitizeDescription();
 });
 
-function markdown (src: string) {
-  // Convert the markdown to HTML.
+function convert_markdown_to_html (src: string) {
   return marked(src, options);
 }
 
 async function sanitizeDescription () {
-  // Get the original not sanitized markdown string.
-  const html = markdown(props.source);
-
-  // Sanitize the description to remove any harmful HTML.
-  const sanitizedHtml = DOMPurify.sanitize(html, { ALLOWED_TAGS: allowedTags });
-
-  // Parse the description as HTML to easily manipulate it.
-  const parser = new DOMParser();
-  const descriptionHtml = parser.parseFromString(sanitizedHtml, "text/html");
-
-  // Remove all external links.
-  const links = descriptionHtml.querySelectorAll("a");
-  links.forEach((link) => {
-    const href = link.getAttribute("href");
-    if (href && !href.startsWith("#")) {
-      link.removeAttribute("href");
-    }
-  });
-
-  // Replace images with data from the image proxy
-  const images = descriptionHtml.querySelectorAll("img");
-  for (let i = 0; i < images.length; i++) {
-    const img = images[i];
-    const src = img.getAttribute("src");
-
-    if (src) {
-      if (isAllowedImage(src)) {
-        const imageDataSrc = await getImageDataUrl(src);
-        img.setAttribute("src", imageDataSrc);
-      } else {
-        img.remove();
-      }
-    }
-  }
-
-  // Convert the description HTML back to a string.
-  const body = descriptionHtml.querySelector("body");
-  const serializer = new XMLSerializer();
-  let sanitizedDescriptionStr = "";
-  if (body) {
-    sanitizedDescriptionStr = serializer.serializeToString(body);
-    sanitizedDescriptionStr = sanitizedDescriptionStr
-      .replace("<body xmlns=\"http://www.w3.org/1999/xhtml\">", "")
-      .replace("<body>", "")
-      .replace("</body>", "");
-  }
-
-  sanitizedDescription.value = sanitizedDescriptionStr;
-}
-
-// Returns true if the image is allowed to be displayed.
-function isAllowedImage (href: string): boolean {
-  const extension = href.split(".").pop().trim();
-  return allowedExtensions.includes(extension);
-}
-
-// Returns a base64 string ready to be use in a "src" attribute in a "img" html tag,
-// like this `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gA…IiIiIiIiIiIiIiHyO/P85XT/jxW1glg5Erk==">`.
-async function getImageDataUrl (url: string): Promise<string> {
-  const imageBlob = await rest.torrent.proxiedImage(url);
-  const data = await blobToDataURL(imageBlob);
-  return data;
-}
-
-// Convert binary data into a base64 encoded string ready to be use in a "src"
-// attribute in a "img" html tag, like the following:
-// `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gA…IiIiIiIiIiIiIiHyO/P85XT/jxW1glg5Erk==">`.
-function blobToDataURL (blob: Blob): Promise<string> {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = _e => resolve(reader.result as string);
-    reader.onerror = _e => reject(reader.error);
-    reader.onabort = _e => reject(new Error("Read aborted"));
-    reader.readAsDataURL(blob);
-  });
+  const html = convert_markdown_to_html(props.source);
+  sanitizedDescription.value = await sanitize(html);
 }
 </script>
 
diff --git a/src/domain/services/sanitizer.ts b/src/domain/services/sanitizer.ts
new file mode 100644
index 00000000..e829b44a
--- /dev/null
+++ b/src/domain/services/sanitizer.ts
@@ -0,0 +1,97 @@
+import DOMPurify from "dompurify";
+import { useRestApi } from "#imports";
+
+const rest = useRestApi().value;
+
+const allowedTags = ["h1", "h2", "h3", "h4", "h5", "h6", "em", "strong", "del", "a", "img", "ul", "ol", "li", "hr"];
+const allowedImageExtensions = ["png", "PNG", "jpg", "JPG", "jpeg", "JPEG", "gif", "GIF"];
+
+export async function sanitize (html: string) {
+  const safeHtml = remove_harmful_code(html);
+  const htmlWithNoUserTracking = await remove_user_tracking(safeHtml);
+  return htmlWithNoUserTracking;
+}
+
+function remove_harmful_code (html: string) {
+  return DOMPurify.sanitize(html, { ALLOWED_TAGS: allowedTags });
+}
+
+async function remove_user_tracking (html: string) {
+  // Parse the description as HTML to easily manipulate it.
+  const parser = new DOMParser();
+
+  const htmlDoc = parser.parseFromString(html, "text/html");
+
+  remove_all_external_links(htmlDoc);
+  await replace_images_with_proxied_images(htmlDoc);
+
+  return document_to_html(htmlDoc);
+}
+
+function remove_all_external_links (htmlDoc: Document) {
+  const links = htmlDoc.querySelectorAll("a");
+  links.forEach((link) => {
+    const href = link.getAttribute("href");
+    if (href && !href.startsWith("#")) {
+      link.removeAttribute("href");
+    }
+  });
+}
+
+async function replace_images_with_proxied_images (htmlDoc: Document) {
+  const images = htmlDoc.querySelectorAll("img");
+  for (let i = 0; i < images.length; i++) {
+    const img = images[i];
+    const src = img.getAttribute("src");
+
+    if (src) {
+      if (isAllowedImage(src)) {
+        const imageDataSrc = await getImageDataUrl(src);
+        img.setAttribute("src", imageDataSrc);
+      } else {
+        img.remove();
+      }
+    }
+  }
+}
+
+function document_to_html (descriptionHtml: Document) {
+  const body = descriptionHtml.querySelector("body");
+  const serializer = new XMLSerializer();
+  let html = "";
+  if (body) {
+    html = serializer.serializeToString(body);
+    html = html
+      .replace("<body xmlns=\"http://www.w3.org/1999/xhtml\">", "")
+      .replace("<body>", "")
+      .replace("</body>", "");
+  }
+  return html;
+}
+
+// Returns true if the image is allowed to be displayed.
+function isAllowedImage (href: string): boolean {
+  const extension = href.split(".").pop().trim();
+  return allowedImageExtensions.includes(extension);
+}
+
+// Returns a base64 string ready to be use in a "src" attribute in a "img" html tag,
+// like this `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gA…IiIiIiIiIiIiIiHyO/P85XT/jxW1glg5Erk==">`.
+async function getImageDataUrl (url: string): Promise<string> {
+  const imageBlob = await rest.torrent.proxiedImage(url);
+  const data = await blobToDataURL(imageBlob);
+  return data;
+}
+
+// Convert binary data into a base64 encoded string ready to be use in a "src"
+// attribute in a "img" html tag, like the following:
+// `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gA…IiIiIiIiIiIiIiHyO/P85XT/jxW1glg5Erk==">`.
+function blobToDataURL (blob: Blob): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = _e => resolve(reader.result as string);
+    reader.onerror = _e => reject(reader.error);
+    reader.onabort = _e => reject(new Error("Read aborted"));
+    reader.readAsDataURL(blob);
+  });
+}