feat: sanitizeAndAddTargetBlank to body of mod
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s

This commit is contained in:
daniyal 2024-08-13 23:27:49 +05:00
parent 01af3fa72e
commit 0cc0d82e68
2 changed files with 32 additions and 3 deletions

View File

@ -1,5 +1,4 @@
import { formatDate } from 'date-fns' import { formatDate } from 'date-fns'
import DOMPurify from 'dompurify'
import { Filter, nip19 } from 'nostr-tools' import { Filter, nip19 } from 'nostr-tools'
import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react' import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom' import { useNavigate, useParams } from 'react-router-dom'
@ -16,13 +15,13 @@ import { useAppSelector, useDidMount } from '../hooks'
import '../styles/comments.css' import '../styles/comments.css'
import '../styles/downloads.css' import '../styles/downloads.css'
import '../styles/innerPage.css' import '../styles/innerPage.css'
import '../styles/popup.css'
import '../styles/post.css' import '../styles/post.css'
import '../styles/reactions.css' import '../styles/reactions.css'
import '../styles/styles.css' import '../styles/styles.css'
import '../styles/tabs.css' import '../styles/tabs.css'
import '../styles/tags.css' import '../styles/tags.css'
import '../styles/write.css' import '../styles/write.css'
import '../styles/popup.css'
import { ModDetails, PaymentRequest } from '../types' import { ModDetails, PaymentRequest } from '../types'
import { import {
abbreviateNumber, abbreviateNumber,
@ -32,6 +31,7 @@ import {
getFilenameFromUrl, getFilenameFromUrl,
log, log,
LogType, LogType,
sanitizeAndAddTargetBlank,
unformatNumber unformatNumber
} from '../utils' } from '../utils'
@ -370,7 +370,7 @@ const Body = ({
<div <div
className='IBMSMSMBSSPostTitleText' className='IBMSMSMBSSPostTitleText'
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(body) __html: sanitizeAndAddTargetBlank(body)
}} }}
/> />
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'> <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>

View File

@ -5,6 +5,7 @@ import { RelayController } from '../controllers'
import { log, LogType } from './utils' import { log, LogType } from './utils'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { MOD_FILTER_LIMIT, T_TAG_VALUE } from '../constants' import { MOD_FILTER_LIMIT, T_TAG_VALUE } from '../constants'
import DOMPurify from 'dompurify'
/** /**
* Extracts and normalizes mod data from an event. * 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 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
}