🌱 [Web Server] CORS, SOP

🌊 CORS, SOP

 

SOP (Same-Origin Policy)

: Same-Origin Policy의 줄임말로, 동일 출처 정책을 의미한다.

한 마디로 '같은 출처의 리소스만 공유가 가능하다'라는 정책이다.

 

출처 : 아래 세 구성요소가 하나라도 다르면 동일한 출처로 보지 않는다. 

• 프로토콜
• 호스트
• 포트

SOP (동일 출처 정책)은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주어 해킹 등의 위협에서 더욱 안전해질 수 있다.  만약 동일 출처 정책이 없다면 브라우저에 로그인 정보가 남아있는 채로 해킹 사이트에 방문하게 되면, 해커는 로그인 정보를 악용할 수 있다. SOP가 있다면 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타사이트의 코드에 의해서 새어나가는 것을 방지할 수 있다. 이런 보안상 이점 때문에 SOP는 모든 브라우저에서 기본적으로 사용하는 정책이다. 

 

하지만 다른 출처의 리소스를 사용해야 하는 일이 너무 많다. 

• github 정보 받아오기
• 지도 api 사용하기 

 

CORS (Cross-Origin Resource Sharing)

: 위 문제에서 필요한 것이 바로 CORS. 교차 출처 리소스 공유를 의미한다.

 

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

- MDN

 

 

 

CORS 동작방식

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

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

 

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

 

Preflight의 필요성

• 실제 요청 전 권한 확인을 할 수 있어 효율적이다.
• CORS에 대비되어 있지 않은 서버를 보호할 수 있다. 실행되서는 안 되는 Cross-Origin 요청이 실행되는 것을 방지할 수 있다. 

 

2. 단순 요청 (Simple Request)

조건이 만족되면 Preflight 요청을 생략하고 요청을 보내는 것 

조건

• 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 를 넣어야 한다.
  • 서버 측에성 Acess-Control-Allow-Origin 을 설정할 때 *로 설정하면 에러가 발생한다.

 

 

 

코드스테이츠 자료와 얄팍한 코딩사전을 참고하였습니다.