Payment Handler API에 CSP connect-src 필요

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Payment Handler API 을(를) 사용하면 결제 시스템 공급자가 Payment Request API와 함께 제공해야 합니다.

이 페이지의 정보는 CSP (콘텐츠 보안 정책)를 모두 사용하는 웹사이트에만 적용됩니다. Payment Request API가 포함됩니다. 둘 다 사용하지 않거나 둘 중 하나만 사용하는 경우 이 안내를 건너뛸 수 있습니다.

결제 시스템 공급자가 Payment Handler API를 사용하는지 확인하려면 제공업체에 문의하세요. 안내를 따릅니다.

결제 핸들러 API 및 CSP (Content-Security-Policy)를 더 나은 보안을 위해서는 HTTP 요청이 서버에서 전송되고 브라우저가 CSP 헤더의 connect-src 지시문에 추가됩니다.

예를 들어 JavaScript 코드가 new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)를 호출하면 CSP connect-src에 https://example.com가 포함되어야 합니다. https://example.com/pay:

Content-Security-Policy: connect-src https://example.com/pay

https://example.com/pay가 교차 출처 리디렉션인 경우 대상 출처도 CSP에 포함되어야 합니다. 예를 들어 https://example.com/pay가 https://pay.example.com로 리디렉션된 후 둘 다 출처가 CSP에 포함되어야 합니다.

Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
드림

로컬에서 사용해 보기

기능이 출시되기 전에 로컬에서 사용 설정하려면 다음 단계를 따르세요.

  1. Chrome에서 chrome://flags/#web-payment-api-csp(으)로 이동합니다.
  2. 'Web Payment API의 CSP 정책' 변경 '기본값'에서 '사용 설정됨'으로 변경합니다.
  3. Chrome을 다시 시작합니다.

요청 URL 확인

Payment Handler API에서 보낸 요청의 URL을 확인하려면 다음 안내를 따르세요.

  1. chrome://flags/#web-payment-api-csp를 사용 설정합니다.
  2. 결제 페이지로 이동하여 Chrome 개발자 도구를 엽니다.
  3. 다음과 같은 오류 메시지를 확인합니다. text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. 지정된 메서드 식별자를 CSP에 추가합니다.

사진: 에두아르도 소아레스, Unsplash