프로그램/ETC
[JavaScript] XSS 공격 방지, escape / unEscape 함수 만들기
프뚜
2023. 1. 2. 10:00
728x90
반응형
SMALL
안녕하세요! 프뚜입니다.
html에 값을 변경 또는 추가 할 때 append, html, innerHtml등을 사용하게 됩니다. 만약 <script>alert("XSS공격!");</script>이라는 문자열이 위 함수들을 통해 html에 그려지게 되면 스크립트를 인식하고 'XSS공격!'이라는 알림이 뜨게 됩니다. 이를 XSS(Cross Site Scripting) 공격이라고 합니다. 이 공격을 차단하기 위해서 escape를 해주어야합니다. 태그(< 또는 >), 더블쿼테이션("), 싱글쿼테이션(') 등의 문자는 < > 등으로 변경해주어야합니다. 변경 후 위 함수를 통해 html에 그려지게 되면 escape 문자를 정상적으로 출력해줍니다. 포스팅을 통해 자세하게 설명하도록 하겠습니다.
[개발 환경]
- OS: Windows 10 64bit
# common.js 생성하기
String.prototype.escape = function() {
var tag = {
'<': '<',
'>': '>',
'\'': ''',
'"': '"',
' ': ' ',
'&': '&'
};
return this.replace(/<|>|'|"| |&/g, function(value) {
return tag[value] || value;
});
};
String.prototype.unEscape = function() {
var tag = {
'<': '<',
'>': '>',
''': '\'',
'"': '"',
' ': ' ',
'&': '&'
};
return this.replace(/<|>|'|"| |&/g, function(value) {
return tag[value] || value;
});
};문자열 데이터를 html에 추가하기 전에 escape로 변환해야합니다. 반대로 데이터를 가공해야할 땐 unEscape로 복구시켜야합니다.
# XSS 공격 시도하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<spen>프뚜입니다.</spen>
</div>
<div id="main">
</div>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="./common.util.js"></script>
<script type="text/javascript">
var attack = '<script>alert("XSS 공격!");<';
attack += '/script>';
console.log("가공 전 -> " + attack);
$('#main').append(attack);
</script>
</body>
</html><script>alert("XSS 공격!");</script> 라는 문자열을 append 시킵니다.
스크립트가 정상적으로 실행됩니다. 태그를 넣었기 때문에 html이 실행하게 된 것입니다.
# XSS 공격 방어하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<spen>프뚜입니다.</spen>
</div>
<div id="main">
</div>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="./common.util.js"></script>
<script type="text/javascript">
var attack = '<script>alert("XSS 공격!");<';
attack += '/script>';
console.log("가공 전 -> " + attack);
attack = attack.escape();
console.log("가공 후 -> " + attack);
$('#main').append(attack);
</script>
</body>
</html>common.js에 만들어놓은 escape() 함수를 사용해서 attack 문자열을 변경합니다.
escape로 변경되었습니다.
화면에도 문자열로 정상 출력됨을 확인할 수 있습니다.
728x90
반응형
LIST