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 cho phé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 những 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 không sử dụng hoặc chỉ sử dụng một trong hai, 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 API Trình xử lý thanh toán hay không, hãy liên hệ với họ và làm theo hướng dẫn của họ.

Nếu đang sử dụng API Trình xử lý thanh toán và CSP (Chính sách bảo mật nội dung) để bảo vệ tốt hơn, bạn cần đảm bảo rằng các miền của yêu cầu HTTP được gửi từ trình duyệt đượ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ì connect-src CSP 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à một lệnh chuyển hướng nhiều nguồn gốc, thì nguồn gốc đích 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, thì 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ử cục bộ

Cách bật tính năng cục bộ trước khi phát hành:

  1. Truy cập vào chrome://flags/#web-payment-api-csp trê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

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

  1. Bật chrome://flags/#web-payment-api-csp.
  2. Chuyển đến trang thanh toán và mở Công cụ dành cho nhà phát triển của Chrome.
  3. Tìm 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.

Ảnh chụp của Eduardo Soares trên Unsplash