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

Question

我最近发现使用 setInnerHtml 并不是一个好的做法，因为存在很多与之相关的性能和安全问题。所以我想知道用“insertAdjacentHTML”替换 setInnerHtml 是否可以？

另外，我应该如何完全填满桌子？就像删除父元素的子元素（表主体）并使用 insertAdjacentHTML 重新填充它一样。

我目前正在做什么

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

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

Answer 1

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

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

就安全性而言，insertAdjacentHTML并没有真正比innerHTML-insertAdjacentHTML有用的是当

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

另外，我应该如何完全填满桌子？

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