Ö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 ile birlikte özel ödeme deneyimlerini satıcılara sunmasına olanak tanır.

Bu sayfadaki bilgiler yalnızca hem CSP (İçerik Güvenliği Politikası) hem de Payment Request API'yi kullanan web siteleri için geçerlidir. İkisinden birini veya hiç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 sağlayıcınızla iletişime geçin ve talimatlarını uygulayın.

Daha iyi koruma için Payment Handler API ve CSP'yi (İçerik Güvenliği Politikası) kullanıyorsanız tarayıcıdan gönderilen HTTP isteklerinin 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)'ü çağırıyorsa connect-src İGP'niz https://example.com veya https://example.com/pay'ı içermelidir:

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

https://example.com/pay kaynaktan kaynaka yönlendirme ise hedef kaynak da CSP'ye dahil edilmelidir. Örneğin, https://example.com/pay https://pay.example.com adresine yönlendiriyorsa her iki kaynak da İGP'ye dahil edilmelidir:

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

Yerel olarak deneyin

Özelliği, cihaz 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 CSP politikası"nı "Varsayılan"dan "Etkin" olarak değiştirin.
  3. Chrome'u yeniden başlatın.

İstek URL'lerini kontrol edin

Payment Handler API'den gönderilen isteklerin URL'lerini kontrol etmek için:

  1. chrome://flags/#web-payment-api-csp seçeneğini etkinleştirin.
  2. Ödeme sayfanıza gidin ve Chrome'un Geliştirici Araçları'nı açın.
  3. Aşağıdaki gibi hata mesajları olup olmadığını kontrol edin: 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.

Unsplash'taki Eduardo Soares tarafından çekilen fotoğraf