[DOM Hack] 특정 DOM element의 이벤트 모두 없애기(HTML Event remove)

오늘은 이벤트 덮어 쓰기에 대해서 알아보려고 합니다. 가끔 웹사이트를 이용하다 보면 스크립트 공격과 다양한 취약점들을 해결하기 위해 브라우저에서부터 폼 내부에 특수문자가 들어오지 않게 막는 경우가 있습니다. 이럴때 우리는 한자키를 이용한 특수문자로 대체하거나 아니면 해당 돔의 keyup이벤트에 걸려 있는 치환 이벤트를 지우고 입력해야됩니다.

//TAG
let tagEle = document.getElementsByTagName('input');
for(let i = 0, len = tagEle.length i < tagEle ; i++){
	tagEle[i].outerHTML = tagEle[i].outerHTML;
}

//ID
let idEle = document.getElementById('test');
idEle.outerHTML = idELe.outerHTML;

 

outerHTML을 이용하면 이러한 문제를 한번해 해결할 수 있습니다. outerHTML은 속성(어트리뷰트)과 시작과 끝 태그를 포함한 엘리먼트를 반환하는 프로퍼티입니다. 해당 프로퍼티를 덧입혀서 내부의 이벤트를 날려주면 아주 깔끔하게 이벤트가 지워집니다. 악용은 하지 않으셨으면 좋겠습니다. 전 가끔 서류 제출 시 단순 스크립트 공격을 막기위해 해놓은 것 같은 사이트에 가끔 사용합니다.