javascript - Cannot replace values inside dangerouslySetInnerHTML - Stack Overflow

admin管理员组

文章数量:1302333

I have the following piece of ReactJS code that displays the value of the variable bodyHtml that contains html as a string.

I would like all links, inside the html string contained in the variable, to open in a new tab.

I am using the DOMPurify library and the following code works only if I remove purify.sanitize.

If I use purify.sanitize instead the replaceAll has no effect.

How can I get around this problem?

This doesn't work:

dangerouslySetInnerHTML={{
    __html: purify.sanitize(
        bodyHtml.replaceAll('href', 'target="_blank" href')
    )
}}

While this works:

dangerouslySetInnerHTML={{
    __html: bodyHtml.replaceAll('href', 'target="_blank" href')
}}

I have the following piece of ReactJS code that displays the value of the variable bodyHtml that contains html as a string.

I would like all links, inside the html string contained in the variable, to open in a new tab.

I am using the DOMPurify library and the following code works only if I remove purify.sanitize.

If I use purify.sanitize instead the replaceAll has no effect.

How can I get around this problem?

This doesn't work:

dangerouslySetInnerHTML={{
    __html: purify.sanitize(
        bodyHtml.replaceAll('href', 'target="_blank" href')
    )
}}

While this works:

dangerouslySetInnerHTML={{
    __html: bodyHtml.replaceAll('href', 'target="_blank" href')
}}

• javascript
• reactjs
• html-sanitizing
• dompurify

Share Follow edited Feb 11 at 14:05 DarkBee 15.6k88 gold badges7272 silver badges116116 bronze badges asked Feb 11 at 10:28 splunksplunk 6,8151717 gold badges6464 silver badges109109 bronze badges 4

• How did you import the purify library? Did you check if you can call it outside the dangerouslySetInnerHTML assignment? – Krzysztof Krzeszewski Commented Feb 11 at 10:42
• @KrzysztofKrzeszewski yes, I can call it outside the dangerouslySetInnerHTML. I imported it this way: import purify from 'dompurify'; – splunk Commented Feb 11 at 10:46
• Does it return expected value when called outside of this function? – Krzysztof Krzeszewski Commented Feb 11 at 12:31
• It doesn't return the expected value if called outside dangerouslySetInnerHTML. I don't see target="_blank" in the links – splunk Commented Feb 11 at 13:06

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

This is an expected result. Replace all has an effect, it's just that it gets removed afterwards anyway. Library by default sanitizes the content of your html. If you want to keep the target blank you have to add exceptions to the sanitization.

const dirty = "<a href='' target='_blank'/>";

console.log("W/O:", DOMPurify.sanitize(dirty));
console.log("With:", DOMPurify.sanitize(dirty, {ADD_ATTR: ['target']}));

<script src="https://cdnjs.cloudflare/ajax/libs/dompurify/3.2.3/purify.min.js"></script>

However the way you add target to the tag is questionable as well. Instead of doing it manually, maybe you should try to use features of the library you use for sanitization in the first place.

DOMPurify.addHook('afterSanitizeAttributes', (node) => {
  // you could probably check via node.tagName but to replicate your logic exactly I check for href attribute
  if ('href' in node) node.setAttribute('target', '_blank');
});

本文标签： javascriptCannot replace values inside dangerouslySetInnerHTMLStack Overflow