Payment Handler API के लिए CSP Connect-src ज़रूरी है

Eiji Kitamura

Rouslan Solomakhin

The Payment हैंडलर API पेमेंट की सेवा देने वाली कंपनियों को यह सुविधा देता है कि वे पेमेंट के अनुरोध वाले एपीआई के साथ-साथ, कारोबारियों या कंपनियों को अपनी पसंद के मुताबिक पैसे चुकाने का अनुभव दे सकें.

इस पेज पर दी गई जानकारी सिर्फ़ उन वेबसाइटों पर लागू होती है जो सीएसपी (कॉन्टेंट की सुरक्षा से जुड़ी नीति) और पेमेंट अनुरोध एपीआई, दोनों का इस्तेमाल करती हैं. अगर आपने दोनों में से किसी एक या सिर्फ़ एक का इस्तेमाल किया है, तो इन निर्देशों को छोड़ा जा सकता है.

यह जानने के लिए कि पेमेंट की सेवा देने वाली कंपनी, Payment हैंडलर API का इस्तेमाल कर रही है या नहीं, कंपनी से संपर्क करें और उसके निर्देशों का पालन करें.

अगर बेहतर सुरक्षा के लिए, पेमेंट हैंडलर एपीआई और सीएसपी (कॉन्टेंट की सुरक्षा से जुड़ी नीति) का इस्तेमाल किया जा रहा है, तो आपको यह पक्का करना होगा कि ब्राउज़र से भेजे गए एचटीटीपी अनुरोधों के डोमेन, सीएसपी हेडर के connect-src डायरेक्टिव में जोड़े गए हों.

उदाहरण के लिए, अगर आपका JavaScript कोड new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) शुरू करता है, तो आपके सीएसपी connect-src में https://example.com या https://example.com/pay शामिल होना चाहिए:

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

अगर https://example.com/pay एक क्रॉस-ऑरिजिन रीडायरेक्ट है, तो डेस्टिनेशन ऑरिजिन को भी सीएसपी में शामिल किया जाना चाहिए. उदाहरण के लिए, अगर https://example.com/pay, https://pay.example.com पर रीडायरेक्ट करता है, तो दोनों ऑरिजिन को सीएसपी में शामिल किया जाना चाहिए:

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

ध्यान दें: यूआरएल के पेमेंट के तरीके के आइडेंटिफ़ायर के लिए, एक ही साइट पर तीन बार रीडायरेक्ट किया जा सकता है. अगर कोई रीडायरेक्ट होता है, तो सभी यूआरएल सीएसपी में होने चाहिए.

इसे स्थानीय रूप से आज़माएं

शिप किए जाने से पहले सुविधा को स्थानीय रूप से सक्षम करने के लिए:

1. Chrome में chrome://flags/#web-payment-api-csp पर जाएं.
2. "Web Payment API के लिए सीएसपी नीति" को "डिफ़ॉल्ट" से "चालू किया गया" में बदलें.
3. Chrome को रीस्टार्ट करें.

अनुरोध किए गए यूआरएल की जांच करना

Payment हैंडलर API से भेजे गए अनुरोधों के यूआरएल की जांच करने के लिए:

1. chrome://flags/#web-payment-api-csp चालू करें.
2. अपने चेकआउट पेज पर जाएं और Chrome के डेवलपर टूल खोलें.
3. इस तरह के गड़बड़ी के मैसेज देखें: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
4. अपने सीएसपी में, बताए गए तरीके के आइडेंटिफ़ायर को जोड़ें.

Unsplash पर एड्वर्डो सोअर्स की फ़ोटो