CORS 이해하기 - 웹 크로스 도메인 통신 가이드

1. CORS는 왜 탄생했는가?

1.1 JSONP이 SOP를 우회할 수 있다?

1.1.1 JSONP가 뭔데?

// 1. 클라이언트에서 콜백 함수를 미리 정의
function handleData(data) {
    console.log('환율:', data.rate);
}

// 2. script 태그로 서버에 요청 (콜백 함수명을 파라미터로 전달)
var script = document.createElement('script');
script.src = 'https://api.exchange.com/rate?callback=handleData';
document.head.appendChild(script);

// 3. 서버는 JSON 데이터가 아니라 JavaScript 코드를 응답
// 응답 내용: handleData({"rate": 1350, "currency": "KRW"});

1.2 AJAX와 CORS의 탄생의 연관관계?

2. Server에서 고려해야 될 사항들

2.1 CORS-Safelisted method와 request-header

• GET

• HEAD

• POST (다음 조건들을 모두 만족할 때만)
• Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나
• 커스텀 헤더가 없어야 함 (Accept, Accept-Language, Content-Language, Content-Type만 허용)
• XMLHttpRequest.upload에 이벤트 리스너가 등록되어 있지 않아야 함

x-www-form-urlencoded 타입이란 (multipart/form-data와의 차이점)

x-www-form-urlencoded와 multipart/form-data 차이점 //기존에 설정된 springdoc consumes default-consumes-media-type: multipart/form-data //변경된 설정 default-consumes-media-type: application/x-www-form-urlencoded 프로젝트 작업 중 동료분으로부터 'multipart/form-data'로 설정된 springdoc default-consumes-media-type을 'application/x-www-form-urlencoded'로 바꾸는 게 어떻겠냐는 제안을 받았습니다. (consumes: 클라이언트가 서버에 보내는 데이터 타입, produces: 서버가 클라이언트에게 반..

https://wildeveloperetrain.tistory.com/304

• Accept

• Accept-Language

• Content-Language

• Content-Type (application/x-www-form-urlencoded, multipart/form-data, text/plain만)

2.1.1 Access-Control-Allow-Origin

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Origin: *

2.1.2 Access-Control-Allow-Methods

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

2.1.3 Access-Control-Allow-Headers

Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With

2.1.4 Access-Control-Max-Age

Access-Control-Max-Age: 86400

2.2 request-header 옵션들

• Access-Control-Allow-Credentials: 자격 증명이 포함된 요청을 허용할지 결정합니다

• Access-Control-Expose-Headers: 클라이언트가 접근할 수 있는 응답 헤더를 지정합니다

• Vary: 캐싱을 위해 Origin 헤더를 고려하도록 합니다

2.3 Preflight Request (OPTIONS 메서드)

2.3.1 서버 리소스를 변경하는 PUT, DELETE와 같은 메서드는 안전하지 않다

// 프리플라이트 요청 예시
OPTIONS /api/users/123 HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: authorization

// 서버 응답
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: authorization
Access-Control-Max-Age: 86400

3. Client에서 고려해야 될 사항들

3.1 fetch의 다양한 옵션들

3.1.1 쿠키를 포함하는 요청 전송. credentials

fetch('https://api.example.com/data', {
    method: 'GET',
    credentials: 'include'  // 'same-origin', 'omit', 'include'
})

• same-origin: 같은 출처일 때만 자격 증명 포함

• include: 항상 자격 증명 포함

• omit: 자격 증명 포함하지 않음

3.1.2 mode

fetch('https://api.example.com/data', {
    mode: 'cors'  // 'cors', 'no-cors', 'same-origin'
})

• cors: CORS 프로토콜을 사용하여 요청

• no-cors: CORS 없이 요청 (응답 내용에 접근 불가)

• same-origin: 같은 출처에만 요청

3.2 img, script의 crossorigin (동일 출처에 의해 접근제한 되지 않는 요소들)

3.2.1 crossorigin 속성을 사용할 수 있는 요소 종류

• <img>

• <script>

• <link>

• <audio>

• <video>

<img src="https://example.com/image.jpg" crossorigin="anonymous">
<script src="https://cdn.example.com/script.js" crossorigin="use-credentials"></script>

3.2.2 fetch의 credentials과의 비교

• anonymous: fetch의 'omit'과 유사

• use-credentials: fetch의 'include'와 유사

3.2.3 iframe으로 데이터 전송하기. postMessage

// 부모 창에서 iframe으로 메시지 전송
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello', 'https://example.com');

// iframe에서 메시지 수신
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-domain.com') return;
    console.log('받은 메시지:', event.data);
});

// 응답 전송
event.source.postMessage('응답 메시지', event.origin);