TIL

22.11.30./CORS(Cross-Origin Resource Sharing) errors

개발따라김양 2022. 12. 1. 00:02

0. SOP(Same-Origin Policy)란?

  • 같은 출처에서만 리소스를 공유할 수 있는 규칙을 가진 정책
  • 몇 가지 예외 조항을 두고 다른 출처의 리소스 요청이라도 이 조항에 해당될 경우에는 허용
    • 그 중 하나가 CORS 정책을 지킨 리소스 요청
    • HTML문서 내부의 link, script, form(action), a, fontfamily, iframe 태그와 같은 호출은
      모두 Same Origin Policy를 무시
  • 동일 출처 정책이 필요한 이유
    • 제약이 없다면, 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용
      개인 정보 등을 가로챌 수 있음

 

1. 교차 출처 리소스 공유 정책(CORS)란?

  • 서버가 same origin 정책을 완화할 수 있게 해주는 표준
  • 일부 교차 출처 요청은 명시적으로 허용하고 다른 요청은 거부하는 데 사용

 

2. 출처(Origin)란?

  • 서버의 위치를 의미하는 URL들은 여러개의 구성 요소로 이루어져 있음
  • 사진의 URL
    • https://new-crystal.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F
    • 출처(origin) : Protocol + Host + Port (예시는 "https://new-crystal.tistory.com")
      • 프로토콜(protocol) : http,https(예시는 https)
      • 호스트(host) : 사이트 도메인 (예시는 "new-crystal.tistory.com")
      • 포트 번호(port): 포트 번호(예시는 생략)
  • 출처(origin)은 프로토콜(protocol)과 호스트(host), 포트 번호가 모두 합쳐 진 것을 의미
  • 서버의 위치를 찾아가기 위해 가장 기본적인 것들을 합쳐 놓은 것
    • 출처 내의 포트 번호는 생략이 가능
    • HTTP, HTTPS 프로토콜의 기본 포트 번호(80)가 정해져있기 때문
  • 따라서 같은 출처(프로토콜, 호스트, 포트)를 사용한다면, 그 뒤의 다른 요소는 다르더라도 같은 출처로 인정

 

3.  예비 요청(preflight request)

    • 브라우저는 요청을 보낼 때
      요청을 한 번에 보내지 않고 먼저 예비 요청을 보내 서버와 잘 통신되는지 확인한 후
    • 본 요청을 보냄
    • 예비 요청의 HTTP 메소드를 GET이나 POST가 아닌 OPTIONS라는 요청을 사용
    • 단, 다음 3가지 경우를 만족할 때 예비 요청을 생략하고
      바로 서버에 본 요청을 보내는 단순 요청(simple request)을 보낼 수 있음
      • 요청의 메소드가 GET, HEAD, POST 중 하나
      • Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 헤더일 경우
      • Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain중 하나
      • 단순 요청이 일어나는 상황은 드뭄

 

 

 

 

출처 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

저작자표시