在没有危险的SetInnerHTML的情况下在字符串上添加标记

Posted 2023-02-22

【中文标题】在没有危险的SetInnerHTML的情况下在字符串上添加标记

【英文标题】：Adding markup on string without dangerouslySetInnerHTML

【发布时间】：2021-09-30 14:09:05

【问题描述】：

我有一个modal 组件，它接收来自home 组件的两个字符串，很容易获取这些字符串并将它们呈现在一个字符串上，并在modal.tsx 上使用正确的标记

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

但我真正想做的是首先在另一个组件中渲染整个字符串，以保持modal 组件不可知，只渲染任何字符串及其标记。

问题是，在home 组件上，如果我在状态上存储带有标记的字符串，那么我必须在模态上使用dangerouslySetInnerhtml。

Home.tsx

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

Modal.tsx

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

有没有其他方法可以做到这一点，如果没有，这真的很危险吗？

【问题讨论】：

这可能会有所帮助***.com/a/37339542/5953610

【参考方案1】：

就直接内联 HTML 而言，它是一个潜在的 XSS 漏洞。 这就是为什么 React 以及其他框架都试图使这些地方明确和显眼的原因。

但在您的特定情况下，您可以通过 React 控制“内联 HTML”：

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

XSS 漏洞更多是关于用户输入。

您还有一个选项可以使“内联 HTML”尽可能安全（包括用户输入）——例如使用 Markdown）

Gatsby - 是在 React 世界中使用 Markdown 的一个很好的例子 https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/

【讨论】：

谢谢，我玩过 Gatsby，它很有趣，但不是这个项目的选择。在这个例子中没有输入，它只是一个带有简单强标签的模态框。