URL 구성 요소와 CORS의 뜻

얼마전 피아노 사이트를 제작하던 중 CORS 에러를 맞닥드려 CORS가 대체 무엇인지 알아보았다.

우선 CORS를 알기 위해서는 URL과 SOP에 대해 알아야한다.

 

 

1. URL 구성

---

• 프로토콜 (Protocol(Scheme))
  • http : 하이퍼미디어 문서(HTML 등을)를 전송하기 위한 프로토콜로, 웹 브라우저와 웹 서버간 통신을 위해 설계되었다.
  • https :기본 HTTPS보다 안전해진 버전. 토큰을 암호화하여 제3자가 개인 정보를 볼 수 없게 막고, 접속한 사이트가 믿을 만한 사이트인지 확인해줘 해킹 사이트를 예방한다.
• 호스트 (Host)
  • 사이트 도메인
• 포트 (Port)
  • 포트 번호로, 웹 서버는 80번 포트를 사용하는 것이 표준이다. 보통 웹 사이트 url에는 생략되어 있다.
• 패스 (Path)
  • 사이트 내부 경로
• 쿼리 스트링(Query string)
  • 요청의 key와 value값으로 데이터 전달에 사용된다.
  • ?로 시작되며, key와 value 값은 &로 구분된다.
• 프래그먼트 (Fragment)
  • 북마크의 한 종류로 북마크된 위치에 있는 컨텐츠를 보여주기 위한 것

 

여기서 프로토콜, 호스트, 포트를 합친 것을 출처(Origin)이라고 한다. 앞으로 지속적으로 나올 개념이니 이거 하나만큼은 기억해두자.

 

 

2. SOP (Same-Origin Policy)

---

• 동일 출처 정책으로, 동일한 origin에서만 리소스를 자유롭게 가져올 수 있다.
• 이러한 정책이 필요한 이유는 해커가 사용자의 개인정보를 가로챌 수 있는 위험이 있기 때문에 이를 방지하기 위해서이다.
• 여기서 조금 신기한 점은 이 출처 비교를 서버가 아닌 브라우저에서 한다. 때문에 크롬에서 발생한 에러가 다른 브라우저에서는 발생하지 않을 수 있다.
• 사용하는 곳 예시 : request, fetch, type="module"

 

3. CORS (Cross-Origin Resource Sharing)

---

• 교차 출처 리소스 공유 정책으로, 다른 Origin의 리소스 공유에 대한 허용과 비허용 정책이다.
• 다른 출처간의 상호작용이 필요한 경우가 개발을 하다보면 발생하기 때문에 일부 허용해주는 것이다.

 

CORS의 기본 동작

1.  클라이언트에서 Origin을 HTTP 헤더에 담아 전달한다. 이때, 메서드는 OPTIONS를 사용한다.
2.  서버의 허가가 떨어지면 실제 요청을 보낸다.
3.  서버는 Access-Control-Allow-Origin을 헤더에 담아 클라이언트에게 전달한다.
4.  클라이언트에서 보낸 Origin과 서버의 Access-Control-Allow-Origin을 비교한다.

! 오류원인 중 하나

type="module"은 로컬에서 리소스를 요청할 시 origin이 null로 설정된다. 때문에 type="module"을 설정 후 서버에서 실행시키지 않을 시 오류가 발생한다.

 

접근 제어 시나리오

1. 단순 요청(Simple requests)

앞에서 설명한 기본 동작에서 1번을 생략하고 바로 서버에 요청을 보낸다. 다만, 요청조건이 까다워로 자주 사용되지 않는다.

 

2. 예비 요청(Preflight requests)

기본 동작처럼 OPTIONS 메서드를 통해 예비 요청을 보내고, 요청이 안전한지 확인 후 본 요청을 보낸다.

 

3. 인증을 포함한 요청(Credentialed Request)

클라이언트가 서버에게 자격 인증 정보(토큰 등)을 보내 요청할 때 사용된다.

쿠기 같은 인증 정보를 다른 도메인에 전달해야하는가, 아닌가를 나타내며, credentials 를 사용한다.

• omit : 절대 인증정보를 전송하거나 받지 않는다.
• same-origin : default 값으로, Origin이 같을 때만 인증 정보를 담는다.
• include : 모든 요청에 인증 정보를 담을 수 있다.

 

실행 전 요청 및 자격 증명을 하기 위해서는

• Access-Control-Allow-Credentials: true로 설정한다.
• Access-Control-Allow-Origin에 와일드카드 문자(”*”)가 아닌 출처를 지정해야한다.

 

 

 

 

참조

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/ko/docs/Web/API/Request/credentials

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