From 0cc0d82e680a924843db74dbe5ef1821c198aac1 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Tue, 13 Aug 2024 23:27:49 +0500
Subject: [PATCH] feat: sanitizeAndAddTargetBlank to body of mod

---
 src/pages/innerMod.tsx |  6 +++---
 src/utils/mod.ts       | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/pages/innerMod.tsx b/src/pages/innerMod.tsx
index 7d7a8d6..30720df 100644
--- a/src/pages/innerMod.tsx
+++ b/src/pages/innerMod.tsx
@@ -1,5 +1,4 @@
 import { formatDate } from 'date-fns'
-import DOMPurify from 'dompurify'
 import { Filter, nip19 } from 'nostr-tools'
 import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -16,13 +15,13 @@ import { useAppSelector, useDidMount } from '../hooks'
 import '../styles/comments.css'
 import '../styles/downloads.css'
 import '../styles/innerPage.css'
+import '../styles/popup.css'
 import '../styles/post.css'
 import '../styles/reactions.css'
 import '../styles/styles.css'
 import '../styles/tabs.css'
 import '../styles/tags.css'
 import '../styles/write.css'
-import '../styles/popup.css'
 import { ModDetails, PaymentRequest } from '../types'
 import {
   abbreviateNumber,
@@ -32,6 +31,7 @@ import {
   getFilenameFromUrl,
   log,
   LogType,
+  sanitizeAndAddTargetBlank,
   unformatNumber
 } from '../utils'
 
@@ -370,7 +370,7 @@ const Body = ({
           <div
             className='IBMSMSMBSSPostTitleText'
             dangerouslySetInnerHTML={{
-              __html: DOMPurify.sanitize(body)
+              __html: sanitizeAndAddTargetBlank(body)
             }}
           />
           <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
diff --git a/src/utils/mod.ts b/src/utils/mod.ts
index 5811756..fba673d 100644
--- a/src/utils/mod.ts
+++ b/src/utils/mod.ts
@@ -5,6 +5,7 @@ import { RelayController } from '../controllers'
 import { log, LogType } from './utils'
 import { toast } from 'react-toastify'
 import { MOD_FILTER_LIMIT, T_TAG_VALUE } from '../constants'
+import DOMPurify from 'dompurify'
 
 /**
  * Extracts and normalizes mod data from an event.
@@ -184,3 +185,31 @@ export const fetchMods = async (
       return [] as ModDetails[] // Return an empty array in case of an error
     })
 }
+
+/**
+ * Sanitizes the given HTML string and adds target="_blank" to all <a> tags.
+ *
+ * @param htmlString - The HTML string to sanitize and modify.
+ * @returns  The modified HTML string with sanitized content and updated links.
+ */
+export const sanitizeAndAddTargetBlank = (htmlString: string) => {
+  // Step 1: Sanitize the HTML string using DOMPurify.
+  // This removes any potentially dangerous content and ensures that the HTML is safe to use.
+  const sanitizedHtml = DOMPurify.sanitize(htmlString, { ADD_ATTR: ['target'] })
+
+  // Step 2: Create a temporary container (a <div> element) to parse the sanitized HTML.
+  // This allows us to manipulate the HTML content in a safe and controlled manner.
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = sanitizedHtml
+
+  // Step 3: Add target="_blank" to all <a> tags within the temporary container.
+  // This ensures that all links open in a new tab when clicked.
+  const links = tempDiv.querySelectorAll('a')
+  links.forEach((link) => {
+    link.setAttribute('target', '_blank')
+  })
+
+  // Step 4: Convert the manipulated DOM back to an HTML string.
+  // This string contains the sanitized content with the target="_blank" attribute added to all links.
+  return tempDiv.innerHTML
+}