🔥 목차 🔥

1. SOP
2. CORS

🧐 그렇다면 꼬! 🧐

💡 SOP(Some-Origin Policy)

• 같은 출처의 리소스만 공유가 가능하다 라는 정책임
  • 출처는 프로토콜, 호스트, 포트의 조합으로 되어있음
  • 이중에 하나라도 다르면 동일출처로 보지않음
• SPO가 생겨난 이유
  • 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격 받을 수 있는 경로를 줄여줌
  • 해킹등의 위협에서 더 안전 할 수 있음
  • 다른 사이트와의 리소스 공유를 제한하기 때문에 정보가 타 사이트의 코드에서 새어나가는걸 방지 할 수 있음
• 거의 모든 브라우저에서 기본적으로 사용하고있는 정책임
  • 하지만 개발을 할때 다른 출처의 리소스를 받아와야 하는 일이 빈번함 * 위 문제사항을 해결하기위해 필요한게 CORS임

💡 CORS(Cross-Origin Resource Sharing)

• 추가 HTTP 헤더를 사용해서 한 출처에서 실행중인 웹앱이 다른 출처의 선택한 자원에 접근 할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제임(MDN출처)
  • 쉽게 정리하면 브라우저는 SOP로 다른출처의 리소스는 막지만 CORS를 사용하면 접근권한을 얻을 수 있는것
• CORS 동작 방식
• 프리플라이트 요청(Preflight Request)
  • 실제 요청을 보내기 전 OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근권한이 있는지 확인하는 과정임
  • 만약 요청을 보낸 출처가 접근 권한이 없다면 브라우저에서 CORS 에러를 띄우게 되고 실제 요청은 전달되지않음
• 프리폴라이트 요청을 하는 이유
  • 실제 요청을 보내기전에 권한확인이 가능해서 리소스 측면에서 효율적
  • CORS에 대비가 되어있지 않은 서버를 보호 할 수 있음
• 단순요청
  • 단순 요청은 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는것을 말함
  • 조건
    • GET``HEAD``POST 요청중 하나여야함
    • 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Type 헤더의 값만 수동으로 설정 할 수 있음
    • Content-Type 헤더에는 application/x-www-from-urlencoded, multipart/form-data, text/plain 값만 허용됨
      
• 인증 정보를 포함한 요청 ( Credentialed Request )
  • 요청 헤더에 인증 정보를 담아 보내는 요청임
  • 출처가 다를 경우에 별도에 설정을 하지 않으면 쿠키를 보낼 수 없음 이경우에는 서버 양측 모두 CORS 설정이 필요
  • 프론트 측에서는 헤더에 withCredentials : true를 넣어줘야함
  • 서버 측에서는 응답 헤더에 Access-Control-Allow=Credentials : true 를 넣어줘야함
  • 서버 측에서 Access-Control-Allow-Origin을 설정할때 모든 출처를 허용한다는 뜻의 와일드카드(*)로 설정하면 에러가 발생함
• CORS 설정 방법
  • Node.js 서버
  • Express 서버