How to inject data in a html string in React?

Question

I have a html string that contains a link. I need to add the attribute rel="noopener" for security purposes. The html string is injected through dangerouslySetInnerHtml:

const Component = ({ message }) => {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: message }} />
    <div>
  );
};

The string looks like: Hello check out <a href="https://my-link.com" target="_blank">this page</a>

So the desired output would be: Hello check out <a href="https://my-link.com" target="_blank" rel="noopener">this page</a>

How to do it?

Please post the code you use right now.. And what's stopping you from writing this html element explicitly (I mean, if it's not dynamic)? — k-wasilewski
– k-wasilewski, Commented May 4, 2021 at 9:04
Hi, I've updated the original post. But it's just a simple setDangerousInnerHtml div. I receive the html from an api to which I do not have access. — HelloWorldEngineer
– HelloWorldEngineer, Commented May 4, 2021 at 9:11

Mal · Accepted Answer · 2021-05-04 09:16:51Z

2

Try this:

const Component = ({ message }) => {

    function secureATags(html) {
        // Parse HTML
        let doc = (new DOMParser()).parseFromString(html, "text/html")
        // Append attribute
        doc.querySelectorAll('a').forEach(entry => {
            entry.setAttribute('rel', 'noopener')
        })

        // Reserialize to HTML
        return doc.body.innerHTML
    }

    return (
        <div>
            <div dangerouslySetInnerHTML={{ __html: secureATags(message) }} />
        <div>
    )
}

answered May 4, 2021 at 9:16

Mal

3852 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter B · Accepted Answer · 2021-05-04 09:14:08Z

0

I would use the Browser DOM to achieve this, as follows:

const div = document.createElement("div");

div.innerHTML = 'Hello check out <a href="https://my-link.com" target="_blank">this page</a>';
div.childNodes[1].setAttribute("rel", "noopener");

console.log(div.innerHTML);

If the actual HTML text is more complex than in your example, then div.childNodes[1] will need to be replaced with code that looks for and selects the proper node. But even then (or especially then?), this is probably the easiest and most reliable way to achieve your goal.

answered May 4, 2021 at 9:14

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Comments

kunal panchal · Accepted Answer · 2021-05-04 09:16:35Z

0

Direct use of setDangerousInnerHtml is strictly not recommended due to security issues. you can use a plugin on npmjs.org pkgname: React-html-parser for injecting the html safely

answered May 4, 2021 at 9:16

kunal panchal

7965 silver badges22 bronze badges

Comments

Tan Säälik · Accepted Answer · 2021-05-04 09:22:45Z

Maybe consider using a function or component that puts it all together based on the data you send in? E.g.

function App() {
  const linkBuilder = (textBefore, linkText, textAfter, href) => {
    return (
      <div>
        {textBefore}
        <a href={href} target="_blank">
          {linkText}
        </a>
        {textAfter}
      </div>
    );
  };
  return (
    <div>
      {linkBuilder("Hello check out ", "this page", "", "www.google.com")}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Also according to this you don't need rel=noopener anymore if you use target="_blank". But if it's necessary you can pass it in as a boolean and apply it on the function/component side.

Collectives™ on Stack Overflow

How to inject data in a html string in React?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related