使用innerHTML，安全问题是什么? [英] Using innerHTML, and what are security concerns?

问题描述

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

I've been told it's dangerous to use innerHTML in my JS codes. and I did understand why, but can someone tell me if there is a difference between these two ways of using it?

第一:

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标签吗?

and now, if both ways are vulnerable to code injectios, is there anyother way to implement HTML tags in the same way as a string into HTML Pages?

推荐答案

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

Both are safe if you are in complete control of all aspects of the string being used.

总而言之，.innerHTML是用于将HTML的小片段插入并解析到文档中，而不是大的字符串(如此处所示)，因为它成为支持的噩梦.

Having said that, in general, .innerHTML is for small fragments of HTML to be inserted and parsed into a document, not large strings (as you have here) because it becomes a nightmare to support.

当您显示此处显示的内容很多时，

When you have large amounts, such as what you are showing here, the HTML <template> and JavaScript document.importNode() may be preferable as you have a more simple way of injecting content as a series of DOM nodes that lend themselves to easier manipulation via an API than a bunch of string concatenations. This allows you to have the elements created dynamically and then you can populate them using .textContent, rather than .innerHTML, which removes the security issues since the text is not parsed as HTML.

这篇关于使用innerHTML，安全问题是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！