innerHTMLを使用していますが、セキュリティ上の懸念事項は何ですか？

Question

JSコードでinnerHTMLを使用するのは危険だと言われました。 と私は理由を理解しましたが、誰かがそれを使用するこれらの2つの方法の間に違いがあるかどうか教えてくれますか？

FIRST：

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; 

SECOND：両方の方法は、コードinjectiosに対して脆弱である場合

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の小さな断片を、大きな文字列ではなく文書に挿入して解析するためのものです（ここでのように）。これはサポートする悪夢になるためです。

あなたがそのようなあなたがここに表示されているものと大量に持っているときにあなたがより簡単な操作に向いてDOMノードのシリーズとしてコンテンツを注入するより簡単な方法を持っているように、HTML <template>とJavaScript document.importNode()が好ましいかもしれません文字列連結の束よりAPIを介して。これにより、要素が動的に作成され、.innerHTMLではなく.textContentを使用して要素を設定できます。これは、テキストがHTMLとして解析されないため、セキュリティ上の問題を取り除きます。