安全性：'<div id="t">t</div>' 与 't' 有何不同？

Question

我读到'不建议您在插入纯文本时使用 insertAdjacentHTML()' here .
我确实看到了那些将纯文本与标签+文本+标签组合区分开来的标签。

使用insertAdjacentHTML() 方法向元素添加sibling with text 是否安全。这就是我想要做的：

<div id="one"></div>
#adding a sibling to above div with text

<div id="one"></div>
<div id="two">text here</div>

任何建议都会有所帮助。

Answer 1

您的问题的答案确实在您提供的链接中。它来自用户输入吗？如果没有适当的反 XSS 程序，那么它是不安全的。它是您从服务器键入的内容，并且只会成为您想要的内容吗？然后随意使用insertAdjacentHTML()。请参阅 Vinz243 的有关 XSS 的链接。

Answer 2

所以，据我了解，您只是将一些来自服务器的文本添加到一组子项中。并且子元素应该在父元素的末尾（在现有子元素之后）。您可以为此使用 appendChild。

通过这种方式，您可以控制要添加的 HTML（使用 document.createElement("div"); ，然后将纯文本插入其中。安全问题在于 HTML（添加标签等），但现在，您确切知道要添加的 HTML . 所以这个方法（imo）是安全的。

因为现在即使你得到一个< script > do some hacking </script > 的字符串，当使用下面的方法时，它也会像纯文本一样被添加（ textContent 只是添加文本，而不是 HTML ）。所以你不会有安全问题。但是，如果您使用像 insertAdjacentHTML() 这样的 HTML 方法插入 < script > do some hacking < /script>，那么是的，这将是一个问题 :)。

OFC 最好添加一个解析方法，例如检查脚本标签以及对从服务器获取的数据进行其他安全验证。 （在服务器端这样做会更好）

编辑：如果您想将元素添加为兄弟姐妹，请使用（正如您和 torogadude 正确所说的那样）insertBefore()。或insertAfter() 取决于你想做什么。

所以你就这样做吧。

const mockArrayText = ['abc1','abc2','abc3'];
const existingElement = document.getElementById('add-here')

for (let i=0;i< mockArrayText.length; i++ ) {
  const newElement = document.createElement("div");
  newElement.textContent = mockArrayText[i]
  existingElement.parentNode.insertBefore(newElement,existingElement.nextSibling)
}

<div id="add-here">
</div>