CS/WEB

[WEB]CORS

빈둥벤둥 2021. 7. 13. 23:51

📝 CORS

✨ 해당 글은 아래 [10분 테코톡]을 듣고 작성했습니다.✨

 

 

 

 

📌 SOP란?

 

🔎 먼저 SOP에 대해 알아보자.


- 다른 리소스를 사용하는 것을 제한하는 보안 방식을 말한다.

 

🔎 O에 해당하는 Origin이 무엇인지 알아보자.

- URL은 다음과 같이 이루어져 있다.

  • 이때 URL의 Protocol, Host, Port를 통해 같은 출처인지 확인할 수 있다.
  • 브라우저 입장에서 Host 비교시 String으로 비교를 한다. (localhost와 127.0.0.1은 다른 Host로 판단된다.)

 

 

🔎 SOP는 언제 사용할까?


- 동일한 출처의 리소스만 허용한다.

  • A출처에서 온 리소스와 B출처에서 온 리소스를 상호작용 하지 못하도록한다.
  • 사용자 모르게 해커가 접근하여 서버로 요청을 보내고, 해당 요청에 대한 응답을 해커의 서버로 보내 정보가 유출될 수 있는 상황을 막을 수 있다.



📌 CORS

 

🔎 다른 출처의 리소스가 필요하면 어떻게 할 수 있을까?


- Cross-Origin-Resource-Sharing을 사용한다. 다음과 같은 세 가지 접근제어 시나리오를 따른다.

  • 프리플라이트 요청(Preflight Request)
  • 단순 요청(Simple Request)
  • 인증 정보 포함 요청(Credentialed Request)

 


🔎 프리플라이트 요청(Preflight Request)이란 무엇인지 알아보자.


- 본 요청을 보내기 전에 사전에 물어본다.

  • 클라이언트는 서버에 사전 요청을 보내 확인하고, 서버는 해당 사전 요청에 응답을 한다.
  • 서버가 사전 요청을 허용했다면 다시 본 요청을 보낸다.
  • 총 2번의 통신을 주고 받는다.


- 프리플라이트 요청 포맷을 알아보자.

  • Origin: 요청 출처
  • Access-Control-Request-Method: 실제 요청 메소드
  • Access-Control-Request-Headers: 실제 요청의 추가 헤더


- 프리플라이트 응답 포맷을 알아보자.

  • Access-Control-Allow-Origin: 서버 측 허가 출처
  • Access-Control-Allow-Method: 서버 측 허가 헤드
  • Access-Control-Allow-Headers: 서버 측 허가 헤더
  • Access-Control-Max-Age: 프리플라이트 응답 캐시 시간


- 프리플라이트 응답 메시지가 가져야할 특징이 있다.

  • 응답 코드는 200대여야 한다.
  • 응답 body는 비어있어야 한다.

 

 

🔎 단순 요청(Simple Request)란 무엇인지 알아보자.


- 프리플라이트 없이 바로 요청을 보낸다.

  • GET, POST, HEAD 메소드만 가능하다.
  • application/x-www-..., multipart/form-data, text/plan Content-type만 가능하다.
  • Accept, Accept-Language, Content-Language, Content-type 헤더만 가능하다.

 

 

🔎 인증 정보 포함 요청(Credential Request)을 알아보자.


- 인증 관련 헤더(쿠키, JWT 등)을 포함할 때 사용하는 요청이다.

  • 클라이언트 - crudentials : include
  • 서버 - Access-Control-Allow-Credential : true (이때는 Access-Control-Allow-Origin에 모든 요청을 허용하면 안된다.)

 

 

🔎 프리플라이트는 왜 필요한 걸까?


- CORS 이전에 만들어진 SOP 서버를 보호하기 위함이다.

  • CORS 이전에는 SOP만 가능했다.
  • CORS가 등장했지만 기존의 SOP는 CORS에 대한 보안 방식을 확인할 수 있는 메커니즘이 존재하지 않는다.
  • 보안적 문제가 생길 수 있으므로 프리플라이트를 통해 서버가 CORS를 인식하고 처리할 수 있는지 먼저 확인하여 CORS를 하지 못하는 서버를 보호할 수 있다.



📌 CORS를 해결하는 방법!

 

🔎 프론트 프록시 서버를 설정해 준다.


- 프론트 서버에서 백엔드 서버로 요청을 보낼 때 target의 URL을 변경한다.

  • CORS는 브라우저에서 발생하므로 프론트 서버와 브라우저는 origin과 target을 동일하게 설정해 주고, 프론와 백엔드 통신에서 URL을 변경해 준다.

 

 

🔎 직접 헤더에 설정해 준다.


- 직접 헤더에 설정을 추가해 줄 수 있다.

 

🔎 프레임워크를 사용한다.


- 스프링부트의 경우 WebMvcConfigurer를 implements한 설정 파일을 추가하여 Allow-Origin을 추가해 줄 수 있다.