想要将 HTML 附加到文档时使用 insertAdjacentHTML 是否存在任何安全风险？

Are there any security risks with using insertAdjacentHTML when wanting append HTML to a document?

我最近发现使用 setInnerHtml 不是好的做法，因为它会带来很多性能和安全问题。所以我想知道用“insertAdjacentHTML”替换 setInnerHtml 是否可以？

此外，我应该如何完全重新填充 table？就像删除父元素的子元素一样，table 正文，并使用 insertAdjacentHTML 重新填充它。

我现在在做什么

document.getElementById('myid').innerHTML = "";
const elm = document.getElementById("myid");
elm.insertAdjacentHTML('beforeend', '<div></div>');

这种做法是否违背了使用 insertAdjacentHTML 的目的，因为我仍在使用 innerHTML。当我使用 innerHTML 将其设置为空时，我没有进行任何复杂的 DOM 操作，是吗？

如果要插入的 HTML 不可信，insertAdjacentHTML 可能允许任意代码执行。

const evilInput = `<img src onerror="alert('evil')">`;
document.body.insertAdjacentHTML('beforeend', evilInput);

在安全性方面，insertAdjacentHTML 并不真的比 innerHTML 好 - insertAdjacentHTML 的用处是什么时候

  • 容器中的其他元素附加了一个侦听器，您不想通过分配给 innerHTML 来破坏侦听器。或者
  • 当您有一个元素的引用并想在它旁边插入一些东西而不是采用更长的方法（例如选择父元素然后使用 insertBefore）

Also, how should I go about completely refilling a table?

将文本内容或 innerHTML 设置为空字符串，然后选择任何 safe 方法重新插入元素都可以。 （什么才是安全的方法取决于你究竟插入了什么。例如，如果它来自你值得信赖的后端，innerHTML 和 insertAdjacentHTML 都很好 - 使用任何使逻辑最简单的方法）