0

I have a modal component that receives two strings from a home component, it's easy to take those strings and render them on one single string with the correct markup on the modal.tsx with this

return <>No markup: {firstString},  with markup: <strong>{secondString}<strong><>

But what I actually want to do is render the whole string first in the other component to keep the modal component agnostic and just render whatever string and its markup.

The problem is that on the home component if I store the string with markup on state, I then have to use dangerouslySetInnerHTML on the modal.

Home.tsx

const message = `No markup: {firstString},  with markup: <strong>{secondString}<strong>`

Modal.tsx

<div dangerouslySetInnerHTML={{ __html: message }}>{}</div>

Is there another way to do this, and if not is this actually dangerous?

Álvaro
  • 2,255
  • 1
  • 22
  • 48

1 Answers1

1

In terms of directly inlined HTML it is a potential XSS vulnerability. That's why React, as well as other frameworks, try to make such places explicit and conspicuous.

But in your particular case, you control "inlined HTML" by React:

const message = `No markup: {firstString},  with markup: <strong>{secondString}<strong>`

XSS vulnerability is more about user input.

You have one more option to make "inlined HTML" as safe as possible (including user input) - use Markdown for example)

Gatsby - is a good example of Markdown usage in the React world https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/

Alexander Alexandrov
  • 1,254
  • 5
  • 15
  • Thanks, I have played around with Gatsby and it's very interesting, however not an option on this project. In this example there are no inputs it is just a modal box informing with a simple strong tag. – Álvaro Jul 23 '21 at 13:00