.innerHTML 스크립트 실행 불가 이유, innerAdjacentHTML

JavaScript/javascript

.innerHTML 스크립트 실행 불가 이유, innerAdjacentHTML

BBB.OOO 2023. 6. 27. 10:25

innerHTML

프로젝트 개발과정 중 html 파일 전체 내용을 리턴하여 사용하는 곳이 있었다.

항상 아래의 jquery 의 .html() 을 사용하여 넣었으나 최대한 바닐라스크립트를 사용하기 위해 변경 중에

넘긴 html 데이터 중 스크립트가 실행이 되지 않았다.

// Javascript
axios({
method: 'post',
  url: Request URL,
  params: {action_type : action_type, site_code : site_code}
}).then(function(result){
// jquery 의 .html() ==> html 내 스크립트 실행됨
$('#modalTest').html(result.data);

// innerHTML ==> html 내 스크립트 실행 안됨
document.querySelector('#modelTest').innerHTML = result.data;
let modal = new bootstrap.Modal(document.getElementById('modalTest'),{
  backdrop: 'static', keyboard : false
  });
}).catch(function(err){

});

// HTML

<div class="manager-dialog manager-site-dialog modal draggable fade in" id="modalTest" data-bs-toggle="modal" data-bs-target="#modalTest" tabindex="-1" role="modal" aria-hidden="true" >

</div>

jquery 의 .html() 은 html 코드 내의 스크립트가 실행되고 .innerHTML() 은 html 내의 스크립트가 실행되지 않았다.

이러한 오류를 찾아보니 innerHTML 은 XSS(Cross-Site Scripting) 공격에 취약한 사례로 언급되어

HTML5 에서 .innerHTML() 에 삽입된 <script></script> 태그는 실행되지 않도록 지정되었다.

프로젝트가 보안점검을 거치게 되는 프로젝트일 경우 innerHTML 코드는 거부될 가능성이 있다.

insertAdjacentHTML

insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, DOM tree 안에 특정 위치,

원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다고 한다.

취약한 innerHTML 보다 간단하면서 대신 사용할 수 있는 메서드인 것 같다.

element.insertAdjacentHTML(position, text);

//예시
document.querySelector('#modalTest').insertAdjacentHTML('position', text);

position : position 옵션은 DOM tree 의 특정 위치에 삽입하는 옵션이다.

옵션 종류 : beforebegin, afterbegin, beforeend, afterend


<body>

<div class="postion_test">test</div>
<div class="postion_test">test2</div>
<div class="postion_test">test3</div>

<body>


text : position 위치에 삽입 될 HTML 요소의 text 값