Closed xleepy closed 8 months ago
Hmm, not sure if I understand the use case fully. What is the problem with using uponSanitizeElement
and how would overriding Array.push
which we use to populate the DOMPurify.removed
array make things different?
My idea to have something like
const { html, removed } = DOMPurify.sanitize(html, {
FORCE_BODY: true,
ADD_TAGS: ['script']
});
to check and return removed and sanitized elements in one component scope. Right now i'm trying to use Map where i collect elements by specific component id but this solution far from ideal 😅.
And i rely on uponSanitizeElement
right now but this hook can fire in other subscribed components as well. Also i know that i shouldn't rely on removed 😅 but i need to display notification to user if user really wants to run scripts.
I can prepare sandbox if it will help
I see, can you not make the hook check for the component scope and treat elements conditionally?
Codesandbox here example. 2 issues:
uponSanitizeElement
hook will not fire in any of effects on first render (this is solvable)Ah, I see. And if we had a hook registered inside _forceRemove
your problem would be solved? Like, somewhere here?
const _forceRemove = function (node) {
arrayPush(DOMPurify.removed, { element: node });
try {
// eslint-disable-next-line unicorn/prefer-dom-node-remove
node.parentNode.removeChild(node);
} catch (_) {
node.remove();
}
};
Yep, i think so. at least we can give a try 😅
I am not against adding this, if you can confirm that it works and where exactly the hook should be placed in this method, I can add it. Or a PR from you :slightly_smiling_face:
Ok, will fork project and give a try on local build. Thanks! Will let you know after
Due to some policies i cannot work on this by myself. Discovered yesterday 😅. And we will need some key for this hook as well otherwise removeNode
hook will be called for each subscription as well. So it will be
const result = DOMPurify.sanitize(hmtl, {key: `some-unique-key`})
and then in hook
DOMPurify.addHook(`removeNode`,(node, data) => {
if(data.key === 'some-unique-key') {
....do some logic here
}
})
but not sure if you will like this change 😅 . Also i found another solution to just show notification globally and for now it will be fine 😅. So we can close this issue
Oh, haha - okay :) Will do that now, let me know if we can do anything.
Hi, Is there better approach than overriding push https://stackoverflow.com/a/5100420 or using
uponSanitizeElement
hook to get removed elements after sanitize call?With this config removed will be always in array but i need to get all scripts before html rendered and store them per component.
uponSanitizeElement
can't be used because hook will fire globally and will update other elements as well