5주차 8/29~9/4 WIL

CORS 란?

• **교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)**는, 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
• 출처(Origin) 이란?
  • URL은 하나의 문자열 같지만 다음과 같이 구성
  • • 1.  

• 출처는 Protolcol 과 Host 그리고 Port까지 모두 합친 것을 의미
• CORS 정책에 의해 차단되는 에러가 발생하는 이유?
  • HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문
  • 예) HTML → 기본적으로 Cross-Origin 정책을 따름
  • **XMLHttpRequest, Fetch API**등 **script 태그 내** **→** 기본적으로 **Same-Origin** 정책을 따름
• SOP(Same Origin Policy) 와 CORS(Cross Origin Resurce Sharing)의 차이
  • SOP - 동일 출처 정책
    • "같은 출처에서만 리소스를 공유할 수 있다" 라는 규칙을 가진 정책
• Protocol, Host, Port 이 세가지가 동일한지 확인
• 프로토콜, 포트, 호스트 모두 일치해야 Same Origin이며, 이들중 하나라도 일치하지 않으면 Cross Origin 이 됨.
• CORS - 교차 출처 리소스 공유
  • 기본 동작 과정
    1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달한다.
    2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.
    3. 클라이언트에서, 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.
  • 작동 방식
    1. 예비요청 (Preflight Request)
       • 예비요청과 본요청으로 나누어 서버에 전달
       • 본 요청을 보내기 전에 브라우저 스스로 안전한 요청인지 확인
       • 예비 요청은 보통 PUT, DELET 같은 요청을 보낼 때 이용
    2. 단순 요청 (Simple Request)
       1. 예비 요청(Prefilght)을 보내지 않고 바로 서버에 직행으로 본 요청을 보낸 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin과 같은 같을 보내주면 브라우저가 CORS정책 위반여부를 검사하는 방식
       2. 아래 3가지 경우를 만족할때만 가능
          1. 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다.
          2. 유저 에이전트가 자동으로 설정한 헤더외에, 수동으로 설정할 수 있는 헤더는 Fetch 명세에서 "CORS-safelisted request-header "로 정의한 헤더만 사용할 수 있다.
          3. Content-Type 을 사용하는 경우에는 다음의 값들만 허용된다.
       3. 까다로운 조건들이 많기 때문에 대부분의 요청은 그냥 예비 요청으로 이루어진다 라고 이해
    3. 인증된 요청 (Credentialed Request)
       • 기존 예비요청에서 보안을 더 강화하고 싶을 때 사용

---

피곤하다...ㅎㅎㅎㅎ 팀과제는 기한이 있다는 압박감에 더욱 힘든 것 같다.

•