Die Payment Handler API erfordert CSP „connect-src“

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Die Payment Handler API ermöglicht es Zahlungsdienstleistern, Händler und die Payment Request API.

Die Informationen auf dieser Seite gelten nur für Websites, die sowohl Content-Security-Policy (CSP) und die Payment Request API. Wenn Sie keine der beiden oder nur eine der beiden Methoden verwenden, können Sie diese Anleitung überspringen.

Wenn du prüfen möchtest, ob dein Zahlungsanbieter die Payment Handler API verwendet, wende dich an ihn und folgen Sie der jeweiligen Anleitung.

Wenn Sie die Payment Handler API und CSP (Content-Security-Policy) für besser geschützt werden, müssen Sie dafür sorgen, dass die Domains der von werden der Anweisung connect-src des CSP-Headers hinzugefügt.

Wenn Ihr JavaScript-Code beispielsweise new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) aufruft, dann: Ihre CSP-connect-src muss https://example.com enthalten oder https://example.com/pay:

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

Wenn https://example.com/pay eine ursprungsübergreifende Weiterleitung ist, hat das Ziel „origin“ auch in der CSP enthalten sein. Wenn beispielsweise https://example.com/pay leitet zu https://pay.example.com weiter, dann beide müssen in der CSP enthalten sein:

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

Lokal testen

So aktivieren Sie die Funktion lokal, bevor sie ausgeliefert wird:

  1. Rufen Sie in Chrome chrome://flags/#web-payment-api-csp auf.
  2. Änderung der CSP-Richtlinie für die Web Payment API von „Standard“ auf „Aktiviert“.
  3. Starten Sie Chrome neu.

Anfrage-URLs prüfen

So überprüfen Sie die URLs der Anfragen, die von der Payment Handler API gesendet wurden:

  1. chrome://flags/#web-payment-api-csp aktivieren.
  2. Rufen Sie die Zahlungsseite auf und öffnen Sie die Entwicklertools von Chrome.
  3. Suchen Sie nach Fehlermeldungen wie den folgenden: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Fügt Ihrer CSP die angegebene Methodenkennung hinzu.

Foto von Eduardo Soares auf Unsplash