API Trình xử lý thanh toán sẽ yêu cầu CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

API Trình xử lý thanh toán giúp nhà cung cấp dịch vụ thanh toán cung cấp trải nghiệm thanh toán tuỳ chỉnh cho người bán cùng với API yêu cầu thanh toán.

Thông tin trên trang này chỉ áp dụng cho các trang web sử dụng cả CSP (Chính sách bảo mật nội dung) và API yêu cầu thanh toán. Nếu bạn không sử dụng hoặc chỉ sử dụng một trong hai, thì bạn có thể bỏ qua các hướng dẫn này.

Để kiểm tra xem nhà cung cấp dịch vụ thanh toán của bạn có đang sử dụng Payment Handler API hay không, hãy liên hệ với họ rồi làm theo hướng dẫn của họ.

Nếu bạn đang sử dụng Payment Handler API (API Trình xử lý thanh toán) và CSP (Chính sách bảo mật nội dung) cho bảo vệ tốt hơn, bạn cần đảm bảo rằng miền của các yêu cầu HTTP được gửi từ trình duyệt sẽ được thêm vào lệnh connect-src của tiêu đề CSP.

Ví dụ: nếu mã JavaScript của bạn gọi new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), thì CSP connect-src của bạn phải bao gồm https://example.com hoặc https://example.com/pay:

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

Nếu https://example.com/pay là lệnh chuyển hướng nhiều nguồn gốc, thì đích đến nguồn gốc cũng phải được đưa vào CSP. Ví dụ: nếu https://example.com/pay chuyển hướng đến https://pay.example.com, sau đó cả hai nguồn gốc phải được đưa vào CSP:

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

Dùng thử trên thiết bị

Để bật tính năng trên thiết bị trước khi vận chuyển, hãy làm như sau:

  1. Truy cập vào chrome://flags/#web-payment-api-csptrên Chrome.
  2. Thay đổi "Chính sách CSP cho API thanh toán trên web" từ "Mặc định" thành "Đã bật".
  3. Khởi động lại Chrome.

Kiểm tra URL yêu cầu

Để kiểm tra URL của các yêu cầu được gửi từ API Trình xử lý thanh toán, hãy làm như sau:

  1. Bật chrome://flags/#web-payment-api-csp.
  2. Chuyển đến trang thanh toán rồi mở Công cụ cho nhà phát triển của Chrome.
  3. Tìm các thông báo lỗi như sau: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Thêm giá trị nhận dạng phương thức đã chỉ định vào CSP của bạn.

Ảnh của Eduardo Soares trên Unsplash