Question

我有一些用户无法控制的HTML；

我只想从此html块中提取文本（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>

这就是我的期望：

随便

随便什么

据我了解，该解决方案不应将内容附加到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))

Answer 2

如果您使用innerText属性而不是textContent，则不会返回任何

如何安全地从任意HTML

2 个答案: