使用 innerHTML，安全问题是什么？

Question

有人告诉我在我的 JS 代码中使用 innerHTML 是危险的。我确实明白为什么，但是有人可以告诉我这两种使用方式之间是否有区别吗？

第一个：

const onePersonArticle = create('article');
onePersonArticle.className = 'one-person';
const content = ` <label class='info-labels' for="name">NAME: </label><label id='name' class='data-labels'>${member.name}</label>
    <label class='info-labels' for="phone">PHONE: </label><label id='phone' class='data-labels'>${member.phone}</label>
    <label class='info-labels' for="code-wars">CODEWARS: </label><label id='code-wars' class='data-labels'>${member.cwb} - ${member.cwa}</label>
    <label class='info-labels' for="free-code-camp">FREECODECAMP: </label><label id='free-code-camp' class='data-labels'>${member.fccb} - ${member.fcca}</label>
    <label class='info-labels' for="notes">NOTES: </label><label id='notes' class='data-labels'>${member.notes}</label>
    <span class="person-buttons"><button type="button" name="button" class="button delete-button">⌘</button>
    <button type="button" name="button" class="button edit-button">✎</button></span>`;
onePersonArticle.innerHTML = content;

第二个：

const onePersonArticle = create('article');
onePersonArticle.className = 'one-person';
onePersonArticle.innerHTML =
  ` <label class='info-labels' for="name">NAME: </label><label id='name' class='data-labels'>${member.name}</label>
    <label class='info-labels' for="phone">PHONE: </label><label id='phone' class='data-labels'>${member.phone}</label>
    <label class='info-labels' for="code-wars">CODEWARS: </label><label id='code-wars' class='data-labels'>${member.cwb} - ${member.cwa}</label>
    <label class='info-labels' for="free-code-camp">FREECODECAMP: </label><label id='free-code-camp' class='data-labels'>${member.fccb} - ${member.fcca}</label>
    <label class='info-labels' for="notes">NOTES: </label><label id='notes' class='data-labels'>${member.notes}</label>
    <span class="person-buttons"><button type="button" name="button" class="button delete-button">⌘</button>
    <button type="button" name="button" class="button edit-button">✎</button></span>`;
container.appendChild(onePersonArticle);

现在，如果这两种方式都容易受到代码注入的影响，是否还有其他方法可以像将字符串一样实现 HTML 标签到 HTML 页面中？

Answer 1

如果您完全控制所使用字符串的所有方面，那么两者都是安全的。

话虽如此，一般而言，.innerHTML 用于将 HTML 的小片段插入并解析到文档中，而不是大字符串（如您此处所示），因为它会成为一场噩梦支持。

当您有大量内容时，例如您在此处展示的内容，HTML <template> and JavaScript document.importNode() 可能更可取，因为您可以通过更简单的方式将内容作为一系列 DOM 节点比一堆字符串连接更容易通过 API 进行操作。这允许您动态创建元素，然后您可以使用 .textContent 而不是 .innerHTML 填充它们，这消除了安全问题，因为文本未被解析为 HTML.

使用 innerHTML，安全问题是什么？

Using innerHTML, and what are security concerns?

html

javascript

security

xss

innerhtml