使用變量時危險地反應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;"
  />

為什么有什么不同？ 使用固定值時，在將其傳遞給默認添加的屬性之前，是否應該對其進行任何預處理？

演示版

可以在此處查看此問題的演示

Answer 1

似乎僅當您給它轉義的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攻擊和錯誤的呈現。 ”因此，這可能不是完美的解決方案。

參見工作示例