Javascript 从html中删除标记的方法的安全性问题

我使用的是一个库，它允许您包装跨越多个标记的文本

考虑在以下html中的

标记中包装

OB

：

<p>foo <span>bar</span></p>

我的目标是将html恢复到使用findAndReplaceDOMText转换之前的状态。在“附加信息”部分，您可以看到更简单的

clearMarks

函数将如何改变文本节点的数量

我的策略是否有我遗漏的安全漏洞？是否有一种更安全/更优雅/通常更好的方式来实现我的目标

---

其他信息：

• 我正在使用选项

  预设：“散文”

  ，其中：
  忽略非文本元素（例如，
  ，
  ，

  ，

  `，等等）

• 另一方面，更简单的

  $（this）.replaceWith（$（this）.html（））

  会导致文本节点数量激增。在上面的示例中，我们将导致：

  “fo”“o”“b”“ar”
  

  （其中文本节点用

  “

  表示）。如果您尝试重新应用

  FindReplacedomText

  ，除了通常会有臭味之外，还会导致问题

• 插入的

  span

  元素有一类

  。deepSearch突出显示
  （与上面的示例相反，该示例将文本包装在
  em
  中。请参阅下面的完整代码
  

---

如果您只想删除元素并保留其文本子元素，请不要处理HTML。您应该使用移动文本和元素节点的纯DOM API。使用HTML解析器最多只能提供次优性能，最差只能造成安全漏洞

另一方面，更简单的$（this）.replaceWith（$（this）.html（））会导致文本节点数量激增

---

这可以通过应用于祖先来解决。

对于删除，您不应该使用内部/外部TML。只需在文本节点上操作并将要删除的节点替换为其子列表就可以了。

html=$node.html（）

->漏洞。这就是我从你的代码中所能说的——你会得到原始的输入。与获得

this.outerHTML

一样。然后使用

.html（contents.join（“”）将可能是恶意的
内容放在未过滤的位置这将制定任何HTML。但是，老实说，我仍然不清楚这里的实际目标。为什么你需要从某处到其他地方获取内容？你想减轻什么样的攻击向量？你提取的日期是来自同一个用户还是在其他地方？@ VLAZ我正在建造一个Chrome扩展WHI。ch允许用户在当前页面上搜索自己的正则表达式（除其他外）。我使用
findAndReplaceDOMText
将文本包装在突出显示的
span
中，以指示匹配项。
clearMarks
函数旨在将DOM恢复到运行
findAndReplaceDOMText
之前的状态。在示例中，即：
foo bar
@HenryBaughman，那么在哪一点上ld代码注入是一个问题？恶意代码从何而来？我正在尝试了解其功能。现在，听起来即使有代码注入，也可能是由用户引起的。但是，我仍然不清楚全部情况，所以我可能是错的。如果需要恢复DOM，简单地克隆它，操纵它如何克隆并隐藏原始节点？这样您就安全了。您可能需要一种找到原始节点的方法，这样您就可以添加自己的属性，如
您克隆的对象可以看起来像

<p>fo<em>o </em><span><em>b</em>ar</span></p>

import $ from 'jquery'

export default function clearMarks() {
  $(".deepSearch-highlight").parent().each(function() {
    const contents = []
    const $parent = $(this)
    $parent.contents().each(function() {
      const $node = $(this)
      let html

      if ($node.hasClass("deepSearch-highlight")) {
        html = $node.html()
      }
      else if (this.nodeName === "#text") {
        html = this.data
      }
      else {
        html = this.outerHTML
      }
      contents.push(html)
    })
    $parent.html(contents.join(""))
  })
}

import $ from "jquery"
import findAndReplaceDomText from "findandreplacedomtext"

import buildRegex from "../../shared/buildRegex"
import scrollToElement from "./scrollToElement"


export default function search(queryParams) {
  const regex = buildRegex(queryParams)
  findAndReplaceDomText($('body')[0], {
    find: regex,
    replace: createHighlight,
    preset: "prose",
    filterElements,
  })
  scrollToElement($(".deepSearch-current-highlight"))
}

function createHighlight(portion, match) {
  var wrapped = document.createElement("span")
  var wrappedClasses = "deepSearch-highlight"
  if (match.index === 0) {
    wrappedClasses += " deepSearch-current-highlight"
  }
  wrapped.setAttribute("class", wrappedClasses)
  wrapped.setAttribute("data-highlight-index", match.index)
  wrapped.appendChild(document.createTextNode(portion.text))
  return wrapped
}

function filterElements(elem) {
  const $elem = $(elem)
  return $elem.is(":visible") && !$elem.attr("aria-hidden")
}