티스토리 뷰
반응형
동작 원리 (1) - 기본
동작하게 만드는 것은 간단히 다음과 같이 헤더를 추가하는 방식으로 하는데,
요청 헤더를 통해 Origin에 대한 정보를 데이터를 받을 서버로 보내면,
데이터를 줄 서버에서 Origin을 검증하여 브라우저가 권한을 확인하게 한다.
동작 원리 (2)에 조금 더 자세한 내용이 있다.
단, MDN에 의하면 요청 헤더인 Origin은 프로그래밍 방식으로 변경할 수 없다.
(즉 소스코드에 의해 Origin 요청 헤더를 추가하거나 제외할 수 없다.)
A forbidden header name is the name of any HTTP header that cannot be modified programmatically;
그러므로 아래에 나올 코드(요청 단)가 아닌 서버에서 CORS를 활성화 해야한다.
HTTP 요청 헤더
| Origin | 요청을 전송한 출처를 서버에게 알림 |
| Access-Control-Request-Method | 실제 요청시 클라이언트가 사용할 HTTP 요청 메소드(GET, POST, PUT 등)를 서버에게 알림 |
| Access-Control-Request-Headers | 실제 요청시 클라이언트가 보내게 될 HTTP 헤더를 서버에게 알림 |
HTTP 응답 헤더
| Access-Control-Allow-Origin | 리소스가 공유될 수 있는 출처를 클라이언트에게 알림 |
| Access-Control-Allow-Credentials | 자격증명이 있는 요청에 대해 true로 설정 시 자바스크립트에 응답을 노출 |
| Access-Control-Allow-Methods | 리소스에 접근할 때 허용되는 HTTP 요청 메소드를 클라이언트에게 알림 |
| Access-Control-Allow-Headers | 실제 요청에 허용되는 HTTP 헤더를 클라이언트에게 알림 |
| Access-Control-Expose-Headers | 응답으로 노출될 수 있는 헤더를 클라이언트에게 알림 |
| Access-Control-Allow-Max-Age | Access-Control-Allow-Methods, Access-Control-Allow-Headers 헤더를 캐시할 수 있는 기간을 클라이언트에게 알림 |
동작 원리 (2) - Request 소스코드 구성
JavaScript 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS</title>
</head>
<body>
<!-- 안녕하세요 또야의 CORS 세계에 온 것을 환영합니다아~! -->
Welcome to 또야's CORS world~
</body>
<script>
// XMLHttpRequest 객체를 생성합니다.
var httpRequest = new XMLHttpRequest();
// 데이터를 받아올 서버 url을 선언합니다.
var url = "https://api.example.com/api/.../..."
// 받아올 데이터를 선언합니다.
var data;
// 요청에 대한 상태값이 변경될 때,
httpRequest.onreadystatechange = function() {
// 요청에 대한 처리가 완료되고 status code가 200일 때
if(httpRequest.readyState == 4 && httpRequest.status == 200) {
// 요청한 JSON 데이터를 string으로 변환해서 처리하도록 구현합니다. (예시)
data = JSON.parse(httpRequest.responseText)
}
};
// data 처리문 생략
// 위 선언한 api 서버에 GET 요청을 하도록 지정합니다.
httpRequest.open('GET', url);
// 지정한 대로 HTTP 요청을 전송합니다. 이후 서버에서 요청사항을 처리하면 httpRequest.onreadystatechange 함수가 실행됩니다.
httpRequest.send();
</script>
</html>
XHR 객체를 통한 데이터 교환 흐름은 아래 그림에 잘 설명되어 있다.
먼저 1) 객체를 생성한 후 2) open() 메서드로 어디에 보낼지 지정하고, 3) send() 메서드로 요청한다.
4) 서버에서 요청사항을 처리 후, 5) readyState 속성값이 변경되고 6) js 로직에 따라 처리한다.
위 코드의 readyState == 4는 처리가 완료되었다는 코드이다.
하나만 알아보면 안되니까 다 알아본다.
readyState 상태값
| readyState value | Description |
| 0 | XMLHttpRequest 객체만 생성되고 open 메서드는 호출되지 않음 |
| 1 | open 메서드가 호출됨 |
| 2 | send 메서드가 호출됨 |
| 3 | 데이터를 받는 중 |
| 4 | 데이터를 모두 받았음 |
다음 글에서는 요청 단이 아닌 응답 헤더를 다양한 환경에서 설정하는 방법을 작성한다.
반응형
'WEB&APP 진단 > CORS' 카테고리의 다른 글
| 2-1. 취약한 CORS 유형 (1) - 반사된 ACAO 및 True ACAC (0) | 2024.02.18 |
|---|---|
| 1-5. CORS - Credentialed Request (0) | 2024.02.17 |
| 1-4. CORS - Simple Request vs Preflighted Request (1) | 2024.02.15 |
| 1-3. 환경별 CORS Response 헤더 설정(Node / .NET / Java) (0) | 2024.02.14 |
| 1-1. CORS 개념과 Origin에 대해 (0) | 2024.02.13 |
댓글
반응형
Recent Post.
Recent Reply.
- Thanks for comming.
- 오늘은
- 명이 방문했어요
- 어제는
- 명이 방문했어요