Przejdź do głównej zawartości

Skonfiguruj Content Security Policy

Na tej stronie dopuścisz w nagłówku Content-Security-Policy domeny, których potrzebuje Card SDK, i sprawdzisz politykę bez ryzyka zablokowania checkoutu.

Jeśli Twoja strona nie wysyła nagłówka CSP, SDK działa bez dodatkowej konfiguracji i możesz pominąć tę stronę. Jeśli wysyła, brak wpisów z tej strony objawia się pustym polem karty, brakiem zdarzenia ready albo powodem FRAME_LOAD_FAILED przy portfelach.

Inwentarz zasobów zewnętrznych​

Card SDK nie ma zależności npm ani własnych fontów. Wszystko, co dociąga na Twoją stronę, pochodzi z czterech hostów. W sandboxie hosty Paymentic mają wariant z członem sandbox: cards.sandbox.paymentic.com i challenge.sandbox.paymentic.com.

Hostscript-srcframe-srcconnect-src
cards.paymentic.comtaktaktak
challenge.paymentic.comtak
applepay.cdn-apple.comtak
pay.google.comtaktak

Co każdy host ładuje i kiedy:

  • cards.paymentic.com: skrypt SDK (/sdk/v1/paymentic-card.js lub .mjs), iframe hosted fields (/card-fields/…), iframe natywnego przycisku Google Pay oraz zapytania tokenizacji i pobrania konfiguracji portfeli. Potrzebny zawsze.
  • challenge.paymentic.com: strona challenge'u 3-D Secure z nextAction.url, na której klient potwierdza płatność u banku wydawcy (zob. Zrealizuj płatność tokenem). Otwierana tylko wtedy, gdy bank wymaga challenge'u; w sandboxie wymuszają go karty ze strony Testowanie kart.
  • applepay.cdn-apple.com: biblioteka Apple Pay JS. Ładuje się na Twojej stronie także przy przycisku natywnym. Potrzebny, gdy używasz Apple Pay.
  • pay.google.com: biblioteka Google Pay (pay.js) i ramka arkusza. Potrzebny wyłącznie przy własnym przycisku (requestGooglePay). Przycisk natywny uruchamia bibliotekę Google wewnątrz ramki Paymentic, więc nie wymaga tego wpisu.

Dla samego SDK nie potrzebujesz wpisów w style-src, img-src ani font-src: SDK nie wstrzykuje tagów style i nie ładuje obrazów ani fontów na Twoją stronę. Międzyprzeglądarkowy przepływ Apple Pay (Chrome, Edge, Firefox) może wymagać dodatkowych domen Apple; sprawdź aktualne wytyczne Apple, jeśli zaostrzasz te dyrektywy.

Rekomendowana polityka​

Produkcja, przycisk natywny Google Pay i Apple Pay:

Content-Security-Policy:
  default-src 'self';
  script-src  'self' https://cards.paymentic.com https://applepay.cdn-apple.com;
  frame-src   https://cards.paymentic.com https://challenge.paymentic.com;
  connect-src 'self' https://cards.paymentic.com;

Z własnym przyciskiem Google Pay dodaj https://pay.google.com do script-src i frame-src:

Content-Security-Policy:
  default-src 'self';
  script-src  'self' https://cards.paymentic.com https://applepay.cdn-apple.com https://pay.google.com;
  frame-src   https://cards.paymentic.com https://challenge.paymentic.com https://pay.google.com;
  connect-src 'self' https://cards.paymentic.com;

W sandboxie zamień hosty produkcyjne na https://cards.sandbox.paymentic.com i https://challenge.sandbox.paymentic.com (albo dopuść oba środowiska, jeśli ten sam checkout obsługuje oba).

Nie dodawaj 'unsafe-inline' dla SDK. Nie potrzebuje tego. Jeśli inne integracje na stronie ładują własne skrypty lub ramki, dopisz ich domeny obok wpisów Paymentic; CSP blokuje wszystko, czego nie wymienisz.

Co robią poszczególne dyrektywy​

DyrektywaZnaczenie
default-srcDomyślne źródła dla dyrektyw, których nie wymienisz osobno. 'self' dopuszcza tylko Twoją domenę.
script-srcSkąd wolno ładować JavaScript: skrypt SDK, biblioteka Apple Pay, opcjonalnie biblioteka Google Pay.
frame-srcJakie strony wolno osadzić w iframe: hosted fields i natywny przycisk Google Pay z cards.paymentic.com, challenge 3-D Secure z challenge.paymentic.com, opcjonalnie ramka Google Pay.
connect-srcDokąd wolno wysyłać fetch/XHR: zapytania tokenizacji i pobranie konfiguracji portfeli z domeny Paymentic.

Przetestuj politykę w trybie report-only​

Zanim włączysz politykę blokującą, wyślij ją w nagłówku Content-Security-Policy-Report-Only. Przeglądarka tylko loguje naruszenia w konsoli i nic nie blokuje, więc checkout działa jak dotąd.

Content-Security-Policy-Report-Only:
  default-src 'self';
  script-src  'self' https://cards.paymentic.com https://applepay.cdn-apple.com;
  frame-src   https://cards.paymentic.com https://challenge.paymentic.com;
  connect-src 'self' https://cards.paymentic.com;
  1. Wdróż nagłówek report-only i przejdź cały checkout: pole karty, tokenize(), płatność kartą z challenge'em 3-D Secure, przyciski portfeli.
  2. W konsoli przeglądarki poszukaj komunikatów Refused to load … lub [Report Only]. Każdy wskazuje domenę, której brakuje w polityce.
  3. Dopisz brakujące domeny, powtórz test, a potem zamień nagłówek na Content-Security-Policy.

Permissions-Policy​

Jeśli wysyłasz nagłówek Permissions-Policy, nie może on odmawiać funkcji payment. Hostowana ramka Google Pay polega na atrybucie allow="payment". Zablokowanie tej funkcji objawia się powodem FRAME_LOAD_FAILED.

Co dalej​