危險地設置innerHTML React

Question

我有 React 前端和 Strapi 后端。

將數據插入我的strapi后端時，我的前端中生成的 output 包含 html 元素。

如何在沒有 HTML 元素的情況下顯示 output？ 我有以下蓋茨比代碼塊，

import ReactMarkdown from "react-markdown"

<ReactMarkdown children={info_} />

{info_} 中的數據與 HTML 元素一起輸出，我如何在我的代碼中使用 Dangerously Set innerHTML 或有其他方法來實現這一點？

Answer 1

如果您在dangerouslySetInnerHTML屬性中顯示 html 節點，您的應用程序將面臨 XSS 攻擊的風險。 長話短說，html 可能包含會傷害用戶的惡意代碼。 如果這樣做，則需要在顯示內容之前對其進行清理。 最好的選擇是使用久經考驗的庫，例如sanitize-html-react 。

Answer 2

您可以使用DOMParser從您的 HTML 輸入創建一個文檔，然后像這樣提取文本：

new DOMParser().parseFromString(info_, 'text/html').body.textContent;

這是一個使用函數形式的示例：

我嘗試將其放入片段演示中，但 Stack Overflow 片段環境不喜歡語法。 ☹️你可以復制粘貼到你的JS控制台試試。

請注意，嵌入式腳本永遠不會運行，但其源文本包含在 output 中。 如果您只想要創建文檔的一部分文本，您可以在創建的文檔上使用類似Document.querySelector的方法，而不是它的body 。

function getTextFromHtml (html) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent ?? '';
}

// Use:

// assuming `info_` is a string of valid HTML like this:
const info_ = `
<div>
  <p>Some text</p>
  <p>Some more text</p>
  <script>console.log('This script executed!')</script>
</div>
`;

const textContent = getTextFromHtml(info_);
console.log(textContent);

---

之后，您將擁有純文本，因此您將不需要dangerouslySetInnerHTML 。