将html代码替换为文本后，文本转换为html并执行，如何防止？

Question

在页面上您可以创建新博客，在编辑器中您可以插入例如

<p>MyWord <img src=x onerror=alert(something)></p>

如果您发布它，您将在博客页面上看到整个字符串作为文本。但是，如果我现在将 'MyWord' 替换为其他内容，则会执行 html 字符串。替换我使用的单词

function replaceWords(words) {
  const container = $('body :not(script):not(.myClass)');

  for (const key of Object.keys(words)) {
    container
      .contents()
      .filter((_, i) => {
        if (i.nodeType === 3 && i.nodeValue.match(words[key].reg)) {
          return i.nodeType === 3 && i.nodeValue.match(words[key].reg);
        }
      })
      .replaceWith(function () {
        return this.nodeValue.replace(words[key].reg, createWordTag(words[key]));
      });
  }
}

所以我怀疑编辑器阻止了 html 字符串的执行，但在我替换该词后，该字符串作为 html 代码插入回 DOM 中。有什么办法可以避免这种情况吗？

Answer 1

jQuery 的 .replaceWith() 方法将替换内容视为 HTML 如果它是字符串而不是纯文本，则要呈现。

不是替换元素，只是分配给文本节点的nodeValue。

如果您只循环一次 DOM 元素，然后执行其中的所有文本替换，也会更好。

function replaceStr(myStrArr) {
  const container = $('body :not(script)');
  container
    .contents()
    .each((_, el) => {
      if (el.nodeType == 3) {
        el.nodeValue = myStrArr.reduce(({
          reg,
          newStr
        }, text) => text.replace(reg, newStr), el.nodeValue);
      }
    });
}

将html代码替换为文本后，文本转换为html并执行，如何防止？

After replacing html code as text, the text converts to html and gets executed, how to prevent it?

javascript

html

jquery

dom

xss