[20210221]_cors.md

CORS에 대한 이해

• Cross-Origin Resource Sharing
• 교차 출처 리소스 공유

🤓 결론

• Origin이 다른 요청을 보안상의 이유로 차단
• 하지만 다른 Origin으로부터의 리소스 공유가 필요한 경우가 많다.
• 그래서 CORS가 존재.
• CORS 표준을 지킨 요청으로 다른 Origin이더라도 요청/응답이 가능토록 함.

---

👉 Origin

URI = scheme:[//authority]path[?query][#fragment]

• Protocol + Hostname (+ Port)

👉 Same-origin policy

The same-origin policy is a critical security mechanism that restricts 
how a document or script loaded from one origin can interact with a resource 
from another origin. It helps isolate potentially malicious documents, 
reducing possible attack vectors.

• https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

• http://store.company.com/dir/page.html

URL	Outcome	Reason
http://store.company.com/dir2/other.html	Same origin	Only the path differs
http://store.company.com/dir/inner/another.html	Same origin	Only the path differs
https://store.company.com/page.html	Failure	Different protocol
http://store.company.com:81/dir/page.html	Failure	Different port (http:// is port 80 by default)
http://news.company.com/dir/page.html	Failure	Different host

👉 방법 3가지

1. Preflight Request

• 본 요청을 보내기 전 요청 유효성 검사를 위한 예비 요청

Key	Description
Origin	Indicates where a fetch originates from.
Access-Control-Request-Method	본 요청이 이루어질 때 어떤 HTTP method가 사용될지 서버에 알려주기 위함
Access-Control-Request-Headers	본 요청이 이루어질 때 어떤 HTTP headers가 사용될지 서버에 알려주기 위함
Access-Control-Allow-Origin	Indicates whether the response can be shared.
Access-Control-Allow-Methods	resource에 엑세스할 때 허용되는 메서드
Access-Control-Allow-Headers	본 요청에 사용할 수 있는 HTTP headers
Access-Control-Max-Age	Indicates how long the results of a preflight request can be cached.

• response 200과 CORS 정책 적합성 여부는 관계가 없다.
  • response를 받은 후 위반 여부를 결정하기 때문에 200이더라도 정책 위반으로 에러 처리될 수 있음.
  • 그러니 Preflight 요청에 중요한 것은 유효한 Access-Control-Allow-Origin가 response header에 내려오느냐 다.

2. Simple Request

• Preflight 요청을 보내지 않고, 본 요청을 통해 CORS 정책 적합성 여부를 판단.

다음을 모두 만족하는 요청

• 다음 중 하나의 methods
  • GET
  • HEAD
  • POST
• Headers
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width

3. Credentialed Request

• 기본적으로 브라우저는 XMLHttpRequest or Fetch 호출에 쿠키 정보, 자격 증명을 보내지 않음.
• 특정 플래그를 설정하여 자격 증명을 보낼 수 있게 해주는 요청 방식.

• 응답 헤더에 반드시 Access-Control-Allow-Credentials: true가 있어야 함.
  • MDN Web Docs - Access-Control-Allow-Credentials
• 그리고 Access-Control-Allow-Origin header 에 "*" 와일드카드 말고 반드시 값 지정해야 함.

자격증명 요청 및 와일드카드(Credentialed requests and wildcards)

credentialed request 에 응답할 때 서버는 Access-Control-Allow-Origin 헤더 
"*" 와일드카드를 사용하는 대신에 반드시 에 값을 지정해야 합니다.

위 예제의 요청 헤더에 Cookie 헤더가 포함되어 있기 때문에 Access-Control-Allow-Origin
헤더의 값이 "*"인 경우 요청이 실패합니다. 위 요청은 Access-Control-Allow-Origin 
헤더가 "*" 와일드 카드가 아니라 "http://foo.example" 본래 주소이기 때문에 
자격증명 인식 컨텐츠는 웹 호출 컨텐츠로 리턴됩니다.