javascript - 如何安全地从任意html中提取文本内容

Question

我有一些用户生成的 html，我无法控制；

我只想从此 html block 中提取文本(textContent、innerText 等)以在网站上显示。

考虑到此 html 内容可能包含脚本标记、iframe、样式标记或其他类似内容等恶意代码，我如何才能安全地获取文本。

这是一个输入示例:

<p style="text-align:center;"><em>whatever</em></p>
<style>body { display: none } </style>

<p><em>Some more whatever</em></p>
<script>alert('lala')</script>

这就是我所期待的:

whatever

some more whatever

据我了解，该解决方案不应将内容附加到 DOM，因为它可能会增加 XSS 攻击的机会。 使用白名单/黑名单很好，但并不理想，因为它很难维护(提出)和保持更新。

Answer 1

您可以使用*:not()选择器获取所有元素并排除script元素

const arbitraryHTML = `<p style="text-align:center;"><em>whatever</em></p>

<p><em>Some more whatever</em></p>
<script>alert('lala')<\/script>`;

function getTextFromHTML(arbitraryHTML){
  var a = document.createElement('div')
  a.innerHTML = arbitraryHTML;
  // exclude `script` elements at selector string
  return [...a.querySelectorAll('*:not(script)')]
         // filter nodes that do not have `firstElementChild`
         .filter(({firstElementChild})=> !firstElementChild)
         // return `textContent`
         .map(({textContent}) => textContent)
}

console.log(getTextFromHTML(arbitraryHTML))