feat: sanitizeAndAddTargetBlank to body of mod
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s
This commit is contained in:
parent
01af3fa72e
commit
0cc0d82e68
@ -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'>
|
||||||
|
@ -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
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user