html - 使用变量时危险地 react SetInnerHTML 不起作用

Question

我正在使用 React 创建一个 SPA 来搜索数据并显示结果。每个结果都遵循以下模型

{
  "title": "A Title",
  "body": " <li>escaped html <strong>that sould be rendered</strong>.</li>
    </ul>"
}

body 属性始终是应该在组件中呈现的转义 html。该组件如下所示:

代码

function SearchResult({ title, body, favourite }) {
  return (
    <article className="SearchResult">
    <section>
      <i className={`icon-star${favourite ? ' marked' : ''}`} />
      {title}
    </section>
    <section
      dangerouslySetInnerHTML={{ __html: body }}
      className="SearchResult-body"
    />
  </article>
  );
}

但每个结果的正文都没有正确呈现，而是将 html 显示为文本

问题是，只有当我创建将变量传递给 body 属性的组件时才会发生这种情况

results.map((result, index) => (
      <SearchResult key={index} title={result.title} body={result.body} />
    ))

但如果我这样做，效果很好

<SearchResult
    title="A title"
    body=" &lt;li&gt;escaped html&amp;nbsp;&lt;strong&gt;that sould be rendered&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;"
  />

为什么不一样？在将值传递到使用固定值时默认添加的属性之前，是否应该对值添加任何预处理？

演示

这个问题的demo可以看here

Answer 1

好像是这样issue只有当你给它一个转义的 html 时才会发生。

由 @sergiotapia 实现的解决方案涉及创建一个辅助函数来取消转义 html 字符串以使其工作。

htmlDecode(content) {
  let e = document.createElement('div');
  e.innerHTML = content;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

<section
  dangerouslySetInnerHTML={{ __html: htmlDecode(body) }}
  className="SearchResult-body"
/>

但是作为@brigand提到过并且我会引用“取消转义它可能会导致 XSS 攻击和不正确的呈现。”所以这可能不是完美的解决方案。

参见 working example