如何解决想要将 HTML 附加到文档时,使用 insertAdjacentHTML 是否存在任何安全风险?
我最近发现使用 setInnerHtml 不是一个好习惯,因为有很多与之相关的性能和安全问题。所以我想知道用“insertAdjacentHTML”替换 setInnerHtml 是否可以?
另外,我应该如何完全重新填满一张桌子?就像删除父元素的子元素、表格主体,并用 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
)
另外,我应该如何完全填满一张桌子?
将文本内容或 innerHTML
设置为空字符串,然后选择任何一种安全方法重新插入元素都可以。 (什么才算是安全方法取决于您究竟要插入什么。例如,如果它来自您值得信赖的后端,innerHTML
和 insertAdjacentHTML
都可以 - 使用使逻辑最简单的方法)>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。