2. Origin과 CORS

(1) Origin과 SOP

1) Origin

2) SOP(동일 출처 정책)

동일 출처 판단: http://example.com/dir/page.html에서 요청을 보낼 때

• http://example.com/dir/page2.html (허용)

• http://example.com/dir2/page.html (허용)

• https://example.com/dir/page.html (차단, 프로토콜 불일치)

• http://example.com:81/dir/page.html (차단, 포트 불일치)

• http://news.example.com/dir/page.html (차단, 호스트 불일치)

SOP 작동 사례

1. HTML 태그를 통한 외부 리소스 요청: SOP 제한 없음
<img>, <link>, <script>, <iframe>, <video>, <audio>, <object>, <embed> 등
• e.g., <img src="https://other-site.com/image.jpg">

2. 외부 리소스를 JavaScript로 조작: SOP 제한 적용
<iframe src="https://other-site.com"> 내부의 DOM 접근 불가
• e.g., iframe.contentDocument.body.innerHTML (차단)

3. JavaScript를 이용한 비동기 통신: SOP 제한 적용
XMLHttpRequest, Fetch API를 통한 요청의 응답 제한
• e.g., fetch('https://other-site.com/api') (차단)

4. 웹 폰트: 대체로 SOP 제한 적용
@font-face 규칙을 통해 로드되는 외부 폰트 파일은 예외적으로 SOP 제한 없음
• e.g., @font-face { src: url("https://other-site.com/font.woff2") ... } (허용)

(2) CORS

1) 이해

2) CORS 헤더

/* 서버 측 코드 */
const express = require('express');
const app = express(); // 서버 앱 생성

app.use((req, res, next) => { // CORS 헤더를 설정하는 미들웨어 등록
  res.header('Access-Control-Allow-Origin', 'https://request-origin.com'); 
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Expose-Headers', 'X-Custom-Header');
  next();
});

3) 작동 방식

① 단순 요청

단순 요청의 조건: 모두 만족하지 않으면 사전 요청 처리가 됨

• 메서드: GET, HEAD, POST 중 하나를 사용

• 헤더: 자동 설정 헤더와 Accept, Accept-Language, Content-Language, Content-Type 외의 커스텀 헤더를 사용하지 않는 경우

• Content-Type 헤더 사용시: 그 값이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나인 경우

② 사전 요청(Preflight 요청)

4) 실습

① CORS 에러 이해

에러 메시지 이해

'http://127.0.0.1:5500'으로부터 'https://www.google.com/'에 fetch 하려는 접근이 CORS 정책에 의해 차단되었습니다. Access-Control-Allow-Origin 헤더가 요청한 리소스에 없습니다. 불투명한 응답³⁾이 필요한 경우, 요청 모드⁴⁾를 no-cors로 설정하면 CORS를 비활성화한 상태로 리소스를 가져옵니다.

• 요청 출처: http://127.0.0.1:5500

• 응답 출처: https://www.google.com/

• CORS 에러 발생 이유: 서버 응답에 Access-Control-Allow-Origin 헤더가 없음

② 클라이언트 측 CORS 설정

1. Fetch API의 CORS 요청 모드
Fetch API를 사용하면 mode 옵션으로 CORS의 요청 모드를 변경할 수 있다.

fetch(url, { mode: 'cors' }); // 기본값
fetch(url, { mode: 'same-origin' });
fetch(url, { mode: 'no-cors' });

요청 모드	의미
cors(기본값)	CORS 사용. 서버의 CORS 설정에 따라 요청이 허용되거나 거부됨
same-origin	CORS 미사용. 동일 출처 요청만 허용하고, 다른 출처로의 요청은 에러 발생
no-cors	CORS 미사용. 교차 출처 요청 중 단순 요청만 허용하고, 불투명한 응답³⁾을 받음

2. HTML 요소의 crossorigin 속성
HTML 요소에서 전송되는 요청은 기본적으로 CORS를 사용하지 않지만, crossorigin 속성을 추가하면 CORS 요청을 활성화할 수 있다.

<!-- CORS 미사용 -->
<img src="https://cross-origin.com/image.jpg"> <!-- 기본값 -->

<!-- CORS 사용 -->
<img src="https://cross-origin.com/image.jpg" crossorigin> <!-- anonymous와 같음 -->
<img src="https://cross-origin.com/image.jpg" crossorigin="anonymous"> 
<img src="https://cross-origin.com/image.jpg" crossorigin="use-credentials"> 

crossorigin	의미
속성 없음(기본값)	CORS 미사용. 교차 출처 요청 중 단순 요청만 허용하고, 불투명한 응답³⁾을 받음
anonymous	CORS 사용. 쿠키, HTTP 인증 등 자격 증명 없는 CORS 요청
use-credentials	CORS 사용. 자격 증명을 포함한 CORS 요청. CORS 헤더에 특정 URL 지정 필요

③ 쿠키를 포함하는 요청의 CORS 설정

• 클라이언트 측 설정

// XMLHttpRequest 사용시
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cross-origin.com/', true);
xhr.withCredentials = true; // 기본값 false
xhr.send();

// Fetch API 사용시
fetch('https://cross-origin.com/', { 
  mode: 'cors', 
  credentials: 'include' // 기본값 'same-origin'
});

// Axios 사용시
axios.get('https://cross-origin.com/', {
  withCredentials: true // 기본값 false
});

credentials은 쿠키, HTTP 인증 등 자격 증명을 의미한다. 클라이언트 측에서는 통신에 자격 증명을 포함할 것을 직접 설정해주어야 한다. XMLHttpRequest, Axios 사용시엔 이를 불린 값으로 표현하지만, Fetch API에서는 세가지 옵션이 주어진다.

credentials	의미
omit	쿠키 전송 안 함
same-origin(기본값)	동일 출처 요청에만 쿠키 포함, 다른 출처로 쿠키 전송 방지
include	모든 요청에 쿠키 포함

• 서버 측 설정

const express = require('express');
const app = express(); // 서버 앱 생성

app.use((req, res, next) => { // CORS 헤더를 설정하는 미들웨어 등록
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Origin', 'https://specific-domain.com'); 
  next();
});

• Access-Control-Allow-Credentials: true 값으로 쿠키를 포함할 것을 설정
• Access-Control-Allow-Origin: 허용할 출처로 특정 URL 지정. *(와일드카드) 사용 불가

④ Proxy 서버를 이용한 요청 우회

프록시 우회 시나리오

1. https://example.com 사이트에서 'user'라는 사용자의 프로필 정보가 필요함

2. 브라우저는 https://example.com/api/@user 주소로 서버에 요청을 보냄

3. 2번은 동일 출처 요청이기 때문에 CORS 에러가 발생하지 않음

4. 웹 서버에서 /api 경로로 들어온 요청은 프록시 설정에 의해 애플리케이션 서버 https://cross-origin.com/@user로 우회하여 전달됨

5. 4번은 서버 간 통신이므로 브라우저의 SOP 영향을 받지 않아 CORS 제한 없음

6. 애플리케이션 서버가 응답하면 프록시가 이를 원 요청자인 클라이언트로 전달함