[CS] CORS, SOP

SOP (Same-Origin Policy)

‘같은 출처의 리소스만 공유가 가능하다’는 정책

출처(Origin)란?

프로토콜, 호스트, 포트의 조합을 말한다.
URI를 비교했을 때 이 중 하나라도 다르면 동일한 출처로 보지 않는다.

https://velog.io:443/@jejeje 에서

• 출처(Origin) - https://velog.io:443
  • 프로토콜 - https://
  • 호스트 - velog.io:443
  • 포트 - :443

CORS (Cross-Origin Resource Sharing)

교차 출처 리소스 공유를 뜻한다.

[mdn - 교차 출처 리소스 공유 (CORS)]
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

CORS 동작 방식

1. 프리플라이트 요청 (Preflight Request)

실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것

브라우저는 서버에 실제 요청을 보내기 전에 프리플라이트 요청을 보내고, 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보낸다.

2. 단순 요청 (Simple Request)

특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것

조건

• GET, HEAD, POST 요청 중 하나여야 한다.
• 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정할 수 있다.
  (Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용된다.)

3. 인증정보를 포함한 요청 (Credentialed Request)

요청 헤더에 인증 정보를 담아 보내는 요청

출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없다. 이 경우에는 프론트, 서버 양측 모두 CORS 설정이 필요하다.

프론트 측에서는

• 요청 헤더에 withCredentials : true 를 넣어줘야 한다.

서버 측에서는

• 응답 헤더에 Access-Control-Allow-Credentials : true 를 넣어줘야 한다.
• Access-Control-Allow-Origin 을 설정할 때, 모든 출처를 허용한다는 뜻의 와일드카드(*)로 설정하면 에러가 발생한다. 인증 정보를 다루는 만큼 출처를 정확하게 설정해주어야 한다.

Node.js 예시

전송한 값을 그대로 응답하는 에코 서버

const http = require('http');

http.createServer((request, response) => {
  if (request.method === 'POST' && request.url === '/echo') {
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString();
      response.end(body);
    });
  } else {
    response.statusCode = 404;
    response.end();
  }
}).listen(8080);

Reference

nodejs - HTTP 트랜잭션 해부