Payment Handler API에 CSP connect-src 필요
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
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
드림
참고: URL 결제 수단 식별자는 최대 3회의 동일 사이트 리디렉션이 허용됩니다. 해당되는 경우
리디렉션이 발생하면 모든 URL이 CSP에 있어야 합니다.
로컬에서 사용해 보기
기능이 출시되기 전에 로컬에서 사용 설정하려면 다음 단계를 따르세요.
Chrome에서 chrome://flags/#web-payment-api-csp
(으)로 이동합니다.
'Web Payment API의 CSP 정책' 변경 '기본값'에서 '사용 설정됨'으로 변경합니다.
Chrome을 다시 시작합니다.
요청 URL 확인
Payment Handler API에서 보낸 요청의 URL을 확인하려면 다음 안내를 따르세요.
chrome://flags/#web-payment-api-csp
를 사용 설정합니다.
결제 페이지로 이동하여 Chrome 개발자 도구를 엽니다.
다음과 같은 오류 메시지를 확인합니다.
text
RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
지정된 메서드 식별자를 CSP에 추가합니다.
사진: 에두아르도 소아레스 , Unsplash
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2022-09-29(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2022-09-29(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2022-09-29(UTC)"]]