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 các nhà cung cấp dịch vụ thanh toán cung cấp trải nghiệm thanh toán tuỳ chỉnh của họ 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 không dùng cả hai cách hoặc chỉ sử dụng một trong hai cách, 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 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 dùng API Trình xử lý thanh toán và CSP (Chính sách bảo mật nội dung) để tăng cường bảo vệ, bạn cần đảm bảo rằng miền của các yêu cầu HTTP 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à 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 đều phải được đưa vào CSP:

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

Dùng thử tại địa phương

Cách bật tính năng trên thiết bị trước khi vận chuyển:

  1. Hãy 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

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ụ cho nhà phát triển của Chrome.
  3. Hãy 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