개요
이번 글에서는 JavaScript로 XSS 공격에 대해 방어하는 방법에 대해 이야기하고자 한다.
XSS 공격이란?
크로스 사이트 스크립팅(Cross Site Scripting, XSS)은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말한다.
예를들어 HTML의 input과 같은 입력 태그 안에 스크립트를 집어 넣어 개발자가 의도하지 않은 스크립트로 공격을 하는 것이다.
XSS 공격해보기
package com.btest.test;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class TestController {
@GetMapping("/test")
public String test() {
return "test";
}
}<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function xssTextSubmit() {
var xssText = $("#xssText").val();
$("#submittedText").html(xssText).html();
}
</script>
<body>
<input type="text" id="xssText" required="required"/>
<button type="submit" onclick="xssTextSubmit()">제출</button>
<div id='submittedText'></div>
</body>
</html>위와 같이 스프링에서 TestController와 test.html 파일을 하나씩 만들어준다.
이후 input 태그 안에 <script>alert('공격')</script>를 입력한 후 제출 버튼을 누른다.
제출 버튼을 누르면 위와 같이 아까 삽입한 스크립트가 그대로 실행된 것을 확인할 수 있다.
XSS 방어(JavaScript 코드)
function XSSCheck(str, level) {
if (level == undefined || level == 0) {
str = str.replace(/\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-/g,"");
} else if (level != undefined && level == 1) {
str = str.replace(/\</g, "<");
str = str.replace(/\>/g, ">");
}
return str;
}XSS 공격을 방어하기 위해 test.html 파일에 위 스크립트를 추가해준다.
여기서 매개변수 str은 우리가 입력으로 받을 문자열이고, level은 어떤 방식으로 문자열을 치환해서 리턴해줄 것인지 구분해주는 매개변수이다.
level이 0일 때는 스크립트 삽입을 초래하는 문자에 대해 공백으로 치환해주고, level이 0일 때는 문자열은 입력받은 문자열과 똑같이 리턴해주는 대신에 스크립트 삽입을 초래하는 문자들에 대해 태그를 치환해주는 것이다.
test.html 수정
function xssTextSubmit() {
var xssText = $("#xssText").val();
$("#submitedText").html(XSSCheck(xssText, 0)).html();
}XSSCheck의 level을 0으로 설정해준 후 아까와 같이 input 태그 안에 스크립트를 입력해보면
아까와 달리 삽입된 스크립트가 실행되지 않고, 스크립트 삽입을 초래하는 문자들이 공백으로 치환된 형태로 반환되어 나오는 것을 확인할 수 있다.
레벨 1도 마찬가지로 삽입된 스크립트가 실행되지 않고, 입력 받은 문자열이 그대로 나오는 것을 확인할 수 있다.
또 다른 XSS 방어 방법
일단 위에서 설명한 자바스크립트 코드로 XSS 공격을 방지하는 것은 그렇게 좋지는 않은 방법이다. (사용자가 어떻게든 우회해서 공격이 가능하기 때문)
서버쪽에서 추가로 방어할 수 있도록 2차 검증 시스템을 구축하거나 CSP(Content Security Policy) 정책을 설정해주는 것도 방법이 될 수 있다.
참고
https://nordvpn.com/ko/blog/xss-attack/
크로스 사이트 스크립팅의 정의 및 공격 유형
크로스 사이트 스크립팅(XSS)은 피해자가 친숙하게 생각하는 사이트에 해커가 악성 스크립트를 주입하는 행위를 말합니다. 크로스 사이트 스크립팅이라는 용어의 의미와 공격 사례, 반사형 XSS,
nordvpn.com
https://doctorson0309.tistory.com/601
[jsp/java] XSS를 1초 만에 해결하는 방법
안녕하세요. 이사작전.com의 플랫폼공작소입니다. 오늘은 XSS공격의 개념과 해당 공격을 방어하는 방법에 대해서 공유하려합니다. XSS공격이란 무엇인가? XSS란 Cross-site Scripting의 약어로, 사이트
doctorson0309.tistory.com
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] Fetch API 사용시 Request Body를 인식하지 못하는 문제 해결하기 (0) | 2023.08.01 |
|---|---|
| [JavaScript] JavaScript 수정 사항 미반영 오류 해결하기 (0) | 2022.05.11 |
