Ödeme İşleyici API'si için CSP connect-src gerekir

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Payment Handler API, ödeme sağlayıcıların Payment Request API'nin yanı sıra satıcıların özel ödeme deneyimlerini kullanabilmesini sağlar.

Bu sayfadaki bilgiler yalnızca hem İGP (İçerik Güvenliği Politikası) hem de Ödeme İsteği API'sini kullanan web siteleri için geçerlidir. İkisinden birini veya yalnızca birini kullanmıyorsanız bu talimatları atlayabilirsiniz.

Ödeme sağlayıcınızın Payment Handler API'yi kullanıp kullanmadığını kontrol etmek için kendileriyle iletişime geçip talimatlarını uygulayın.

Daha iyi koruma için Payment Handler API ve CSP (Content-Security-Policy) kullanıyorsanız tarayıcıdan gönderilen HTTP isteği alanlarının CSP başlığının connect-src yönergesine eklendiğinden emin olmanız gerekir.

Örneğin, JavaScript kodunuz new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) yöntemini çağırıyorsa İGP connect-src'niz https://example.com veya https://example.com/pay içermelidir:

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

https://example.com/pay, çapraz kaynak yönlendirmesiyse hedef kaynak da CSP'ye dahil edilmelidir. Örneğin, https://example.com/pay, https://pay.example.com adresine yönlendiriyorsa her iki kaynak da CSP'ye dahil edilmelidir:

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

Yerel olarak deneyin

Bu özelliği gönderilmeden önce yerel olarak etkinleştirmek için:

  1. Chrome'da chrome://flags/#web-payment-api-csp adresine gidin.
  2. "Web Payment API için İGP politikası" ayarını "Varsayılan" yerine "Etkin" olarak değiştirin.
  3. Chrome'u yeniden başlatın.

İstek URL'lerini kontrol edin

Ödeme İşleyici API'sinden gönderilen isteklerin URL'lerini kontrol etmek için:

  1. chrome://flags/#web-payment-api-csp özelliğini etkinleştir.
  2. Ödeme sayfanıza gidin ve Chrome Geliştirici Araçları'nı açın.
  3. Aşağıdaki gibi hata mesajlarını arayın: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Belirtilen yöntem tanımlayıcısını İGP'nize ekleyin.

Fotoğraf: Eduardo Soares, Unsplash'ta