mirror of
https://github.com/navidrome/navidrome.git
synced 2026-10-13 04:47:17 +02:00
d7ec7355c9* Rework frontend code interacting directly with DOM Rework frontend code that uses user-supplied data to render things like comments and notes. In places where using React's built-in sanitization is possible, the feature is used. In other places, where some markup might be necessary, DOMPurify is used to sanitize the HTML before rendering it. Solves: GHSA-rh3r-8pxm-hg4w * Remove test post DOM rework * fixup! Rework frontend code interacting directly with DOM
29 lines
783 B
JavaScript
29 lines
783 B
JavaScript
import DOMPurify from 'dompurify'
|
|
import { Fragment, useMemo } from 'react'
|
|
|
|
export const SafeHTML = ({
|
|
children,
|
|
}) => {
|
|
const purified = useMemo(() => {
|
|
const purify = DOMPurify()
|
|
|
|
purify.addHook('afterSanitizeElements', async (node) => {
|
|
if (node instanceof HTMLElement) {
|
|
// Set referrer-policy for elements with src
|
|
switch (node.tagName.toLowerCase()) {
|
|
case 'a':
|
|
case 'area':
|
|
case 'img':
|
|
case 'video':
|
|
case 'iframe':
|
|
case 'script':
|
|
node.setAttribute('referrer-policy', 'no-referrer')
|
|
}
|
|
}
|
|
})
|
|
|
|
return purify.sanitize(children, { ADD_ATTR: ['referrer-policy'] })
|
|
}, [children])
|
|
|
|
return <Fragment dangerouslySetInnerHTML={{ __html: purified }} />
|
|
}
|