From aefc85bb0fe1d4851aa59ea650d7b9eae1fefb93 Mon Sep 17 00:00:00 2001
From: seaerchin <jiachin@open.gov.sg>
Date: Fri, 31 Mar 2023 15:50:48 +0800
Subject: [PATCH] fix(sanitize): use same setup for dompurify as FE

---
 src/services/utilServices/Sanitizer.ts | 42 ++++++++++++++++++++++++++
 src/utils/file-upload-utils.js         | 11 ++++---
 src/utils/markdown-utils.js            | 10 +++---
 src/utils/yaml-utils.ts                |  7 +++--
 4 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 src/services/utilServices/Sanitizer.ts

diff --git a/src/services/utilServices/Sanitizer.ts b/src/services/utilServices/Sanitizer.ts
new file mode 100644
index 000000000..741306547
--- /dev/null
+++ b/src/services/utilServices/Sanitizer.ts
@@ -0,0 +1,42 @@
+import DOMPurify from "isomorphic-dompurify"
+
+DOMPurify.setConfig({
+  ADD_TAGS: ["iframe", "#comment", "script"],
+  ADD_ATTR: [
+    "allow",
+    "allowfullscreen",
+    "frameborder",
+    "scrolling",
+    "marginheight",
+    "marginwidth",
+    "target",
+    "async",
+  ],
+  // required in case <script> tag appears as the first line of the markdown
+  FORCE_BODY: true,
+})
+DOMPurify.addHook("uponSanitizeElement", (node, data) => {
+  // Allow script tags if it has a src attribute
+  // Script sources are handled by our CSP sanitiser
+  if (
+    data.tagName === "script" &&
+    !(node.hasAttribute("src") && node.innerHTML === "")
+  ) {
+    // Adapted from https://github.com/cure53/DOMPurify/blob/e0970d88053c1c564b6ccd633b4af7e7d9a10375/src/purify.js#L719-L736
+    DOMPurify.removed.push({ element: node })
+    try {
+      node.parentNode.removeChild(node)
+    } catch (e) {
+      try {
+        // eslint-disable-next-line no-param-reassign
+        node.outerHTML = ""
+      } catch (ex) {
+        node.remove()
+      }
+    }
+  }
+})
+
+// NOTE: Doing a re-export so that clients always use the correct config
+export const sanitizer = DOMPurify
+export default sanitizer
diff --git a/src/utils/file-upload-utils.js b/src/utils/file-upload-utils.js
index 55de9278d..d8e4cc68e 100644
--- a/src/utils/file-upload-utils.js
+++ b/src/utils/file-upload-utils.js
@@ -5,9 +5,8 @@ import logger from "@logger/logger"
 const CloudmersiveVirusApiClient = require("cloudmersive-virus-api-client")
 const FileType = require("file-type")
 const isSvg = require("is-svg")
-const DOMPurify = require("isomorphic-dompurify")
 
-const { BaseIsomerError } = require("@errors/BaseError")
+const { sanitizer } = require("@services/utilServices/Sanitizer")
 
 const CLOUDMERSIVE_API_KEY = config.get("cloudmersiveKey")
 
@@ -49,7 +48,7 @@ const validateAndSanitizeFileUpload = async (data) => {
   const detectedFileType = await FileType.fromBuffer(fileBuffer)
 
   if (isSvg(fileBuffer)) {
-    const sanitizedBuffer = DOMPurify.sanitize(fileBuffer)
+    const sanitizedBuffer = sanitizer.sanitize(fileBuffer)
     return Buffer.from(sanitizedBuffer, "utf8").toString("base64")
   }
   if (
@@ -62,4 +61,8 @@ const validateAndSanitizeFileUpload = async (data) => {
   return undefined
 }
 
-module.exports = { validateAndSanitizeFileUpload, scanFileForVirus, ALLOWED_FILE_EXTENSIONS }
+module.exports = {
+  validateAndSanitizeFileUpload,
+  scanFileForVirus,
+  ALLOWED_FILE_EXTENSIONS,
+}
diff --git a/src/utils/markdown-utils.js b/src/utils/markdown-utils.js
index 1b1d317d2..15fb42cb1 100644
--- a/src/utils/markdown-utils.js
+++ b/src/utils/markdown-utils.js
@@ -1,4 +1,3 @@
-const DOMPurify = require("isomorphic-dompurify")
 const _ = require("lodash")
 
 const {
@@ -6,14 +5,14 @@ const {
   sanitizedYamlStringify,
 } = require("@utils/yaml-utils")
 
+const { sanitizer } = require("@services/utilServices/Sanitizer")
+
 const getTrailingSlashWithPermalink = (permalink) =>
   permalink.endsWith("/") ? permalink : `${permalink}/`
 
 const retrieveDataFromMarkdown = (fileContent) => {
   // eslint-disable-next-line no-unused-vars
-  const [unused, encodedFrontMatter, ...pageContent] = DOMPurify.sanitize(
-    fileContent
-  ).split("---")
+  const [unused, encodedFrontMatter, ...pageContent] = fileContent.split("---")
   const frontMatter = sanitizedYamlParse(encodedFrontMatter)
   return { frontMatter, pageContent: pageContent.join("---").trim() }
 }
@@ -34,8 +33,7 @@ const convertDataToMarkdown = (originalFrontMatter, pageContent) => {
   }
   const newFrontMatter = sanitizedYamlStringify(frontMatter)
   const newContent = ["---\n", newFrontMatter, "---\n", pageContent].join("")
-
-  return DOMPurify.sanitize(newContent)
+  return sanitizer.sanitize(newContent)
 }
 
 module.exports = {
diff --git a/src/utils/yaml-utils.ts b/src/utils/yaml-utils.ts
index 55f2da3ba..c15a6f01d 100644
--- a/src/utils/yaml-utils.ts
+++ b/src/utils/yaml-utils.ts
@@ -1,11 +1,12 @@
-import DOMPurify from "isomorphic-dompurify"
 import yaml from "yaml"
 
+import { sanitizer } from "@services/utilServices/Sanitizer"
+
 // Note: `yaml.parse()` and `yaml.stringify()` should not be used anywhere
 // else in the codebase.
 export const sanitizedYamlParse = (
   unparsedContent: string
-): Record<string, unknown> => yaml.parse(DOMPurify.sanitize(unparsedContent))
+): Record<string, unknown> => yaml.parse(sanitizer.sanitize(unparsedContent))
 
 export const sanitizedYamlStringify = (prestringifiedContent: object): string =>
-  DOMPurify.sanitize(yaml.stringify(prestringifiedContent))
+  sanitizer.sanitize(yaml.stringify(prestringifiedContent))