결제창에서 CORS 대응하기- tosspayments.log (velog)

[punchdrunkard]

내용 공유

• CORS 가 발생하는 이유

  • 브라우저가 내 서버가 아닌 다른 서버의 리소스를 요청
  • 브라우저는 기본적으로 다른 서버를 신뢰하지 않아서 다른 서버에 요청을 보내거나 응답을 받는 것을 차단한다.
  • SOP (Same-Origin Policy, 동일 출처 정책, 서로 다른 서버 리소스는 공유하지 않음) ☁️ 브라우저에서 기본적으로 정해져 있는 듯
  • CORS (Cross-Origin Policy) 즉 서로 다른 출처끼리의 정책 (서로 다른 서버끼리의 리소스 공유 정책, 서로 다른 출처라도 리소스 요청, 응답을 허용할 수 있도록 한다.) ⇒ CORS 에러는 SOP 기준에 맞춰 CORS 정책을 적용하지 않아서 발생 ☁️ 즉 브라우저 기준(SOP)과 CORS가 달라서 발생. CORS 정책을 브라우저 정책(SOP)에 맞춰줘야 하는 듯

• CORS 배경

  • 과거에는 프론트엔드와 백엔드를 한 번에 구성 → 모든 처리가 같은 도메인에서 가능하였음.
  • 현재는 클라이언트에서 API를 호출. → API 도메인과 클라이언트의 도메인이 다를 수 밖에 없음
  • 따라서 CORS로 서로 다른 출처 (백엔드 도메인과 클라이언트 도메인) 끼리 리소스 공유를 어떻게 해야할지 정함.

• origin(출처)을 구성하는 세 요소 : 프로토콜, 도메인(호스트이름), 포트

  ⇒ 이 중 하나라도 다르면 CORS 에러가 발생 (=출처가 교차한다.)

• CORS 에러 대응

  • 서버에서 Access-Control-Allow-Origin 응답 헤더 설정

  ⇒ 요청을 수락할 출처를 명시적으로 지정

  ⇒ * (와일드카드) 설정 시 보안에 취약

  • 프록시 서버 사용 : 웹 애플리케이션 → 프록시 서버 → 리소스로의 요청

    ☁️ SOP와 CORS는 브라우저를 위한 정책이므로 서버끼리는 CORS 에러가 발생하지 않음

관련 자료

결제창에서 CORS 대응하기- tosspayments.log (velog)

[punchdrunkard]

• 해당 게시글에서 토스페이먼츠 API를 예시로 들었습니다. (결제창 연동하기 | 토스페이먼츠 개발자센터)

successUrl과 failUrl을 파라미터로 넘기는데, 파라미터로 넘기면 api 배포 서버 내에서 CORS 설정이 되는 것 처럼 보입니다. (다른 api들 사용할 때, url 등록하는 과정이랑 비슷하게 느껴지네요)