From 12be6ce02070f8670c8591e5219eb6e9d09ba11e Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Mon, 20 May 2024 19:41:44 +0530
Subject: [PATCH] feat: restrict the rendering of img and form tags in the logs
 content (#4905)

* feat: restrict the rendering of img tags in the logs content

* fix: forbidden tags code cleanup
---
 frontend/src/components/Logs/ListLogView/index.tsx      | 7 ++++++-
 frontend/src/components/Logs/RawLogView/index.tsx       | 5 ++++-
 frontend/src/components/Logs/TableView/useTableView.tsx | 7 ++++++-
 frontend/src/utils/app.ts                               | 3 +++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx
index 47b108e944..fa8a2fb608 100644
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -16,6 +16,7 @@ import { useCallback, useMemo, useState } from 'react';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
+import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
@@ -50,7 +51,11 @@ function LogGeneralField({
 }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(dompurify.sanitize(fieldValue)),
+			__html: convert.toHtml(
+				dompurify.sanitize(fieldValue, {
+					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+				}),
+			),
 		}),
 		[fieldValue],
 	);
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index 712b97723d..fcb8beeeec 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -21,6 +21,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
+import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
@@ -144,7 +145,9 @@ function RawLogView({
 
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(dompurify.sanitize(text)),
+			__html: convert.toHtml(
+				dompurify.sanitize(text, { FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS] }),
+			),
 		}),
 		[text],
 	);
diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
index be34e998ef..fd37132110 100644
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -8,6 +8,7 @@ import dompurify from 'dompurify';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useMemo } from 'react';
+import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
@@ -107,7 +108,11 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 					children: (
 						<TableBodyContent
 							dangerouslySetInnerHTML={{
-								__html: convert.toHtml(dompurify.sanitize(field)),
+								__html: convert.toHtml(
+									dompurify.sanitize(field, {
+										FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+									}),
+								),
 							}}
 							linesPerRow={linesPerRow}
 							isDarkMode={isDarkMode}
diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts
index 0ab9e6fca7..fdc95ee471 100644
--- a/frontend/src/utils/app.ts
+++ b/frontend/src/utils/app.ts
@@ -31,3 +31,6 @@ export const checkVersionState = (
 	const versionCore = currentVersion?.split('-')[0];
 	return versionCore === latestVersion;
 };
+
+// list of forbidden tags to remove in dompurify
+export const FORBID_DOM_PURIFY_TAGS = ['img', 'form'];