innerHTML을 사용할 때 보안 문제는 무엇입니까?

내 JS 코드에서 innerHTML을 사용하는 것은 위험하다는 말을 들었습니다. 나는 왜 그런지 이해했지만, 누군가이 두 가지 방법을 사용하는 데 차이가 있는지 말해 줄 수 있습니까?innerHTML을 사용할 때 보안 문제는 무엇입니까?

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 태그를 구현하는 anyother 방법이 HTML 페이지?

출처

2017-12-22 Sultan ABUASSI

두 방법을 사용하지 않는 것이 좋습니다. childNodes를 요소로 사용하기 위해 몇 가지 문제가 발생할 것입니다. – danielarend

자세한 내용은 [DOM 기반 XSS 예방 치트 시트] (https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet)를 참조하십시오. – showdev

사용중인 문자열의 모든 측면을 완벽하게 제어하는 경우 두 가지 모두 안전합니다.

일반적으로 .innerHTML은 HTML의 작은 조각이 큰 문자열이 아니라 문서에 삽입되고 파싱되는 것을 말합니다.

당신은 당신이 여기에서 보여주고있다 것과 많은 양을 가지고하면, HTML <template> 및 자바 스크립트 document.importNode() 당신은 쉽게 조작에 자신을 빌려 DOM 노드의 일련의 컨텐츠를 주입하는 더 간단한 방법을 가지고있는 것이 바람직 할 수있다 문자열 연결의 묶음보다 API를 통해. 이렇게하면 요소를 동적으로 생성 한 다음 .innerHTML이 아닌 .textContent을 사용하여 채울 수 있습니다. 그러면 텍스트가 HTML로 구문 분석되지 않으므로 보안 문제가 제거됩니다.

출처

2017-12-22 18:17:26

동의. [innerHTML과 createTextNode의 차이점] (https://stackoverflow.com/questions/13122760/is-there-any-major-difference-between-innerhtml-and-using-createtextnode-to-fill)도 참조하십시오. – showdev

동의하지만 두 가지 모두 안전하다고 말하는 것은 다소 잘못된 것입니다. 대부분 두 질문의 예는 XSS에 취약합니다. –

@GaborLengyel 내가 문자열을 완벽하게 제어 할 때만 둘 다 안전하다고 말했기 때문에 오해하지 않았습니다. –

innerHTML을 사용할 때 보안 문제는 무엇입니까?

답변

관련 문제