웹 보안 이해: FORM/AJAX의 작동 방식 및 CSRF 방어 전략

민준·2025년 1월 27일

ASAC web

웹페이지는 다양한 API와 요소로 홈페이지를 구성한다. 하지만 API 호출의 취약성이 있어 이를 제한하고자 SOP가 생겼고 홈페이지 구성이 극도로 제한되어 일부 API에 대해서 SOP 예외를 허용해준다.

API의 호출 방식은 크게 두가지가 있다 (FORM, AJAX)

1. FORM

HTML<form> 태그를 이용해 데이터를 서버로 전송하기 위한 기본적인 방식
동작방식
1). 사용자가 폼에 데이터를 입력하고 버튼을 클릭하면, 브라우저는 서버에 HTTP 요청(GET,POST)를 보낸다.
2). 서버는 요청을 처리하고 응답을 보낸다.
3). 응답 결과는 전체 웹 페이지를 새로고침하거나, 리다이렉션을 통해 표시된다.
특징
- 동기적 작동: 사용자가 버튼을 클릭해야 요청이 발생, 요청과 응답 사이에 페이지가 새로고침됨.
  - 왜 동기인가? FORM 요청은 요청이 끝나기 전까지 다음 작업을 진행하지 않고 페이지를 새로고침하며 데이터를 처리하기 때문입니다.
- 제한된 요청 제어: FORM 태그로 서버에 전송되는 데이터는 URL 파라미터(GET)또는 본문 데이터(POST) 형태로 고정됨.
- 간단한 데이터 전송: FORM은 서버와 데이터를 주고받는 가장 기본적이고 초기의 웹 요청 방식으로 설계
SOP(Same-Origin Policy)에서 FORM 요청을 허용한 이유

FORM 요청의 초기 설계 철학:

FORM은 HTML 표준의 일부로, 데이터 전송을 위해 설계된 기본적인 요청 방식
사용자가 직접 데이터를 입력하고 제출해야 요청이 실행되므로, 악의적인 스크립트에 의해 자동화되기 어렵습니다.

FORM 요청의 제한된 응용 범위:

FORM 요청은 데이터를 서버로 전송할 수는 있지만, 응답 데이터를 프로그래밍적으로 처리할 수 없음.
서버에서 반환된 응답은 브라우저가 자동으로 페이지 새로고침 또는 리다이렉션 형태로 처리합니다. 따라서 민감한 데이터 탈취와 같은 악용 가능성이 낮습니다.

2. AJAX (Asynchronous JavaScript and XML)

AJAX는 JavaScript를 사용해 서버와 비동기적으로 통신하는 기술입니다. 페이지를 새로고침하지 않고 데이터를 주고받음.
동작 방식:
1). 클라이언트에서 JavaScript를 이용해 서버에 HTTP 요청을 보냄.
2). 서버는 요청을 처리하고 JSON, XML, HTML 등의 데이터를 응답으로 보냄
3). JavaScript는 응답 데이터를 처리하여 페이지 일부를 업데이트
특징:
- 비동기적 작동: 페이지가 새로고침되지 않고도 서버와 데이터를 주고받을 수 있습니다.
  - 왜 비동기인가? AJAX 요청은 메인 스레드를 차단하지 않고 응답을 기다리지 않습니다.
  - 브라우저는 요청을 비동기적으로 처리하며, 응답이 오면 콜백 함수를 호출.
- 동적인 요청 제어: JavaScript를 사용해 HTTP 메서드, 헤더, 데이터 등을 세밀하게 제어할 수 있습니다.
- 고급 응답 처리: 응답 데이터를 사용자가 원하는 방식으로 화면에 출력하거나 조작할 수 있습니다.
SOP(Same-Origin Policy)에서 AJAX 요청을 제한한 이유

AJAX의 프로그래밍적 유연성:

AJAX는 요청의 헤더, 메서드, 데이터를 JavaScript로 제어할 수 있음.
- 예) 인증 토큰을 헤더에 추가하거나 민감한 정보를 포함한 데이터를 보낼 수 있음.
또한, 응답 데이터를 프로그래밍적으로 처리할 수 있어 민감 정보 탈취 위험.

자동화 및 악용 가능성:

XSS(크로스 사이트 스크립트) 공격을 통해 악성 스크립트가 사용자의 브라우저에서 자동으로 AJAX 요청을 생성하고 민감한 데이터를 외부 서버로 전송할 수 있음.
이런 위험성을 줄이기 위해 SOP는 AJAX 요청에 대해 엄격한 제한을 두고, 동일 출처에서만 요청을 허용.

외부 API호출로 인한 취약성(XSS, CSRF)

XSS (Cross-Site Scripting)

XSS는 공격자가 악성 스크립트를 신뢰할 수 있는 웹사이트에 삽입하여, 사용자 브라우저에서 실행되도록 만드는 보안 취약점입니다.
XSS 동작 과정
1). 공격자가 웹사이트의 입력 폼이나 URL 매개변수를 통해 악성 스크립트를 삽입.
```
<script>
  alert("You are hacked");
</script>
```
2). 사용자가 해당 웹사이트를 방문하거나 악성 링크를 클릭.
3). 브라우저는 공격자가 삽입한 스크립트를 실행.
4). 악성 스크립트는 사용자 데이터를 탈취하거나, 다른 악의적인 동작을 수행.
XSS의 유형
1). Stored XSS: 악성 스크립트가 서버에 저장되어, 다수의 사용자에게 영향을 미침.
예: 댓글란에 악성 스크립트 삽입.
2). Reflected XSS: 악성 스크립트가 URL 등의 입력값에 포함되어, 특정 사용자에게만 영향을 미침.
예: 피싱 링크 클릭.
3). DOM-based XSS: 브라우저의 DOM 조작을 통해 발생. 서버와 상관없이 클라이언트 측 코드만으로 작동.
XSS로 인한 피해: 세션 쿠키 탈취, 악성 코드 실행, DOM 조작을 통한 사용자 UI 변조, 키 입력 감시 등

CSRF (Cross-Site Request Forgery)

CSRF는 사용자가 신뢰하는 웹사이트에 대한 요청을 공격자가 조작하여, 의도하지 않은 동작을 수행하게 만드는 공격입니다.
CSRF 동작 과정
1). 사용자가 신뢰하는 웹사이트에 로그인하여 세션 인증 정보를 유지.
2). 공격자가 악성 링크를 생성하거나 페이지에 FORM 요청을 삽입.
3). 사용자가 링크를 클릭하거나 페이지를 방문하면, 브라우저는 자동으로 세션 쿠키를 포함하여 요청을 전송.
4). 서버는 요청이 사용자로부터 온 것으로 판단하여 처리.
CSRF로 인한 피해: 금전 거래 요청(예: 송금), 비밀번호 변경, 민감한 데이터 삭제/변경

FORM 요청을 허용하면서 생길수 있는 CSRF 문제가 발생하는 이유

FORM 요청을 허용하면서 생길 수 있는 CSRF(Cross-Site Request Forgery) 문제는 CSRF 토큰과 같은 추가적인 보안 조치를 통해 보완합니다.

1. 브라우저의 자동 인증 기능

브라우저는 HTTP 요청 시 자동으로 쿠키(Cookie)를 포함합니다.
- 사용자가 특정 웹사이트에 로그인하면, 세션 ID 또는 인증 토큰이 쿠키에 저장됩니다.
- 동일한 도메인으로의 요청 시, 브라우저는 해당 쿠키를 자동으로 서버에 전송합니다.
문제는, 공격자가 사용자를 속여 다른 출처에서 요청을 보냈더라도, 브라우저는 쿠키를 포함하여 요청을 전송한다는 점입니다.

2. FORM 요청의 특성

FORM 요청은 SOP(Same-Origin Policy)예외로 허용되기 때문에 Cross-Origin 요청이 가능.
FORM은 서버로 데이터를 전송할 수 있지만, 브라우저는 응답 데이터를 프로그래밍적으로 처리할 수 없기 때문에 보안 위험이 낮다고 판단되어 SOP 예외로 처리됩니다.
그러나, CSRF 공격에서는 FORM 요청의 전송 기능만 악용하기 때문에 SOP 예외가 공격에 악용될 수 있습니다.

FORM과 AJAX의 CSRF를 방어하는 방법

Cookie를 제약을 거는 방법도 있지만 가장 좋은것은 Anti CSRF Token이다.
Anti-CSRF Token(CSRF 방지 토큰)은 CSRF 공격을 방지하기 위해 사용되는 보안 메커니즘, 주요 개념은 요청이 합법적인 사용자로부터 발생했는지 확인하는 것, 서버와 클라이언트 간의 신뢰를 검증하는 역할을 수행 (보안 OPT와 비슷)

1. 기본 개념
Anti-CSRF Token은 사용자의 요청마다 고유하게 생성되는 토큰.
이 토큰은 서버에서 생성하고 클라이언트에게 전달된 뒤, 요청 시 클라이언트에서 다시 서버로 전송되어 요청의 정당성을 확인.

2. 동작 흐름
1) 토큰 생성: