최근 Vanilla JavaScript를 사용하여 과제나 간단한 미니 프로젝트를 자주 하고 있는데 JS를 사용하여 동적으로 DOM 요소를 건드릴 때 간편함 때문에 innerHTML을 사용하는데 이 innerHTML이 XSS 공격에 취약하기 때문에 되도록 지양하는 것을 권장한다고 한다. 그럼 XSS 공격이란 무엇이고 어떻게 막을 수 있을까?
Cross Site Scripting (XSS)
Cross-Site Scripting (XSS) 공격은 웹사이트에 악의적인 스크립트를 삽입하는 것을 말한다. 악의적인 스크립트를 통해 쿠키나 세션 토큰 또는 민감한 정보 등 브라우저가 보관하고 있는 중요한 정보에 접근할 수 있다. 또한 이런 악의적인 스크립트는 HTMP 페지의 내용을 다시 쓰는 것도 가능하다.
주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 Cross-Site 라는 말이 붙는다고 한다.
XSS 공격의 예시
input에 스크립트 코드 삽입하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="text" />
<button>submit</button>
<div></div>
<script>
document.querySelector('button').addEventListener('click', () => {
document.querySelector('div').innerHTML = document.querySelector('input').value;
});
</script>
</body>
</html>input에 <img src="x"> 를 입력하면 강제로 에러를 발생시켜 쿠키에 접근할 수 있다.
이처럼 웹사이트에 스크립트 코드나 HTML 요소를 쉽게 삽입할 수 있다.
이밖에도 해커의 의도에 따라 다양한 XSS 공격 타입이 있으며 다음 링크에 자세히 나와있다.
How JavaScript works: 5 types of XSS attacks + tips on preventing them
XSS 공격 방지하기
XSS의 취약점을 근본적으로 제거하기 위해서는 입력 및 출력 값에 대해서 유효성을 검사하고 검증해야 한다.
입력값을 제한하여 숫자만 허용하는 위치에는 숫자만 올 수 있게 한다.
그리고 XSS 공격은 기본적으로 태그를 사용하기 때문에 < 또는 > 를 동일한 의미의 HTML 문자로 치환하여 브라우저에서 일반 문자로 인식하여 스크립트로 해석되지 않게 한다.
DOMPurify라는 새니티제이션 라이브러리를 사용하는 것도 하나의 방법이다.
HTML 새니티제이션이란 HTML 문서를 검사하여 안전하다고 판단되는 태그만 보존하여 새로운 HTML 문서를 생성하는 과정이다. 사용자가 제출한 코드를 삭제하여 XSS같은 공격으로부터 보호할 수 있다.
https://en.wikipedia.org/wiki/HTML_sanitization
마무리
예상보다 XSS에 취약한 웹사이트가 많다고 한다. XSS의 공격을 안 이상 기본적으로 innerHTML의 사용을 지양하고 사용자가 입력할 수 있는 값은 최대한 데이터를 꼼꼼히 검사하여 XSS 공격을 방지할 수 있도록 해야겠다.
Reference
