सुविधा नीति के बारे में जानकारी

एरिक बिडेलमैन
Twitter GitHub होम पेज

खास जानकारी

सुविधा से जुड़ी नीति की मदद से वेब डेवलपर, ब्राउज़र में कुछ एपीआई और वेब सुविधाओं को चुनिंदा तरीके से चालू कर सकते हैं, बंद कर सकते हैं, और उनमें बदलाव कर सकते हैं. यह सीएसपी की तरह है, लेकिन सुरक्षा को कंट्रोल करने की जगह यह सुविधाओं को कंट्रोल करता है!

सुविधा से जुड़ी नीतियां, डेवलपर और ब्राउज़र के बीच ऑप्ट-इन करने से जुड़े छोटे-छोटे समझौते हैं. ये अच्छी क्वालिटी वाले वेब ऐप्लिकेशन बनाने और उनका रखरखाव करने के हमारे लक्ष्यों को हासिल करने में मदद कर सकती हैं.

शुरुआती जानकारी

वेब के लिए निर्माण एक रोमांचक चुनौती है. एक ऐसा बेहतरीन वेब ऐप्लिकेशन बनाना काफ़ी मुश्किल है जो बेहतरीन परफ़ॉर्मेंस में मदद करता है और सभी नए सबसे सही तरीकों का इस्तेमाल करता है. समय के साथ उस अनुभव को बनाए रखना और भी मुश्किल हो जाता है. जैसे-जैसे आपका प्रोजेक्ट बेहतर होता है, डेवलपर इसमें आते हैं, नई सुविधाएं मिलती हैं, और कोड बेस बढ़ता है. अगर आपने आपको जो अनुभव दिया है वह खराब हो सकता है और उपयोगकर्ता अनुभव खराब होना शुरू हो सकता है! सुविधा नीति को आपको ट्रैक पर रखने के लिए बनाया गया है.

सुविधा नीति की मदद से, ब्राउज़र पर आपकी पूरी साइट पर इस्तेमाल की जाने वाली खास सुविधाओं को लागू करने के लिए, "नीतियों" के सेट के लिए ऑप्ट-इन किया जा सकता है. ये नीतियां इस बात पर पाबंदी लगाती हैं कि कुछ सुविधाओं के लिए साइट, किन एपीआई को ऐक्सेस कर सकती है या ब्राउज़र के डिफ़ॉल्ट व्यवहार में बदलाव कर सकती है.

सुविधा नीति की मदद से किए जा सकने वाले कामों के उदाहरण यहां दिए गए हैं:

  • मोबाइल पर और तीसरे पक्ष के वीडियो पर, autoplay की डिफ़ॉल्ट सेटिंग बदलें.
  • किसी साइट को, camera या microphone जैसे संवेदनशील एपीआई का इस्तेमाल करने से रोकें.
  • iframe को fullscreen API का इस्तेमाल करने की अनुमति दें.
  • सिंक्रोनस XHR और document.write() जैसे पुराने एपीआई का इस्तेमाल ब्लॉक करें.
  • पक्का करें कि इमेज का साइज़ सही है (जैसे कि लेआउट थ्रेशिंग को रोकना). साथ ही, यह भी पक्का करें कि ये इमेज, व्यूपोर्ट के हिसाब से बहुत बड़ी न हों (उदाहरण के लिए, उपयोगकर्ता की बैंडविड्थ को कम करें).

नीतियां, डेवलपर और ब्राउज़र के बीच हुआ एक कानूनी समझौता है. वे ब्राउज़र को डेवलपर के इरादे के बारे में बताते हैं और इस तरह, जब हमारा ऐप्लिकेशन बिना किसी रुकावट के कुछ गलत करने की कोशिश करता है, तो हमें ईमानदारी से जानकारी देने में मदद करता है. अगर साइट या तीसरे पक्ष का एम्बेड किया गया कॉन्टेंट, डेवलपर के पहले से चुने गए किसी भी नियम का उल्लंघन करता है, तो ब्राउज़र, बेहतर UX के साथ कार्रवाई को बदल देता है या एपीआई को पूरी तरह से ब्लॉक कर देता है.

सुविधा नीति का इस्तेमाल करना

सुविधा की नीति में सुविधाओं को कंट्रोल करने के दो तरीके हैं:

  1. Feature-Policy एचटीटीपी हेडर के ज़रिए.
  2. iframes पर allow एट्रिब्यूट के साथ.

सुविधा की नीति को इस्तेमाल करने का सबसे आसान तरीका, Feature-Policy एचटीटीपी हेडर को किसी पेज के रिस्पॉन्स के साथ भेजना है. इस हेडर की वैल्यू एक नीति या नीतियों का सेट है, जिसे ब्राउज़र में किसी दिए गए ऑरिजिन के लिए स्वीकार किया जाना चाहिए:

Feature-Policy: <feature> <allow list origin(s)>

ऑरिजिन की अनुमति वाली सूची में कई अलग-अलग वैल्यू हो सकती हैं:

  • *: टॉप लेवल के ब्राउज़िंग कॉन्टेक्स्ट में और नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट (iframe) में इस सुविधा की अनुमति है.
  • 'self': इस सुविधा को टॉप लेवल के ब्राउज़िंग कॉन्टेक्स्ट और एक ही ऑरिजिन के नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में इस्तेमाल करने की अनुमति है. नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में क्रॉस-ऑरिजिन दस्तावेज़ों में इसकी अनुमति नहीं है.
  • 'none': टॉप-लेवल के ब्राउज़िंग कॉन्टेक्स्ट में इस सुविधा की अनुमति नहीं है और नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में इसे अस्वीकार किया गया है.
  • <origin(s)>: वे खास ऑरिजिन जिनके लिए नीति चालू करनी है (जैसे, https://example.com).

उदाहरण

मान लें कि आपको अपनी पूरी साइट पर सभी कॉन्टेंट को जियोलोकेशन एपीआई का इस्तेमाल करने से रोकना है. ऐसा करने के लिए, geolocation सुविधा के लिए 'none' को अनुमति वाली सूची में शामिल करें:

Feature-Policy: geolocation 'none'

अगर कोड का कोई हिस्सा या iframe, जियोलोकेशन एपीआई का इस्तेमाल करने की कोशिश करता है, तो ब्राउज़र उसे ब्लॉक कर देता है. यह बात तब भी लागू होती है, जब उपयोगकर्ता ने पहले अपनी जगह की जानकारी शेयर करने की अनुमति दी हो.

सेट किए गए किसी भौगोलिक स्थान से जुड़ी नीति का उल्लंघन करना
सेट किए गए किसी भौगोलिक स्थान से जुड़ी नीति का उल्लंघन करना.

दूसरे मामलों में, इस नीति में थोड़ी छूट दी जा सकती है. हम अपने ऑरिजिन को जियोलोकेशन एपीआई का इस्तेमाल करने की अनुमति दे सकते हैं. हालांकि, तीसरे पक्ष के कॉन्टेंट को अनुमति की सूची में 'self' सेट करके, इसे ऐक्सेस करने से रोक सकते हैं:

Feature-Policy: geolocation 'self'

iframe allow एट्रिब्यूट

सुविधा से जुड़ी नीति का इस्तेमाल करने का दूसरा तरीका है, iframe में मौजूद कॉन्टेंट को कंट्रोल करना. एम्बेड किए गए कॉन्टेंट के लिए, नीति की सूची बताने के लिए allow एट्रिब्यूट का इस्तेमाल करें:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

मौजूदा iframe एट्रिब्यूट का क्या होगा?

सुविधा से जुड़ी नीति से कंट्रोल की जाने वाली कुछ सुविधाओं में, सुविधाओं को कंट्रोल करने के लिए पहले से एक एट्रिब्यूट होता है. उदाहरण के लिए, <iframe allowfullscreen> एक ऐसा एट्रिब्यूट है जो iframe कॉन्टेंट को HTMLElement.requestFullscreen() API का इस्तेमाल करने की अनुमति देता है. इनमें Payment अनुरोध API और getUserMedia() को अनुमति देने के लिए, allowpaymentrequest और allowusermedia एट्रिब्यूट भी होते हैं.

जहां भी हो सके, इन पुराने एट्रिब्यूट के बजाय, allow एट्रिब्यूट का इस्तेमाल करने की कोशिश करें. ऐसे मामलों में जहां आपको मिलती-जुलती लेगसी एट्रिब्यूट के साथ allow एट्रिब्यूट का इस्तेमाल करके, पुराने सिस्टम के साथ काम करने की सुविधा देनी ज़रूरी है (उदाहरण के लिए, <iframe allowfullscreen allow="fullscreen">). बस ध्यान दें कि ज़्यादा पाबंदी वाली नीति कारगर होगी. उदाहरण के लिए, नीचे दिए गए iframe को फ़ुलस्क्रीन मोड में जाने की अनुमति नहीं दी जाएगी, क्योंकि allow="fullscreen 'none'", allowfullscreen से ज़्यादा पाबंदी वाला है:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

कई नीतियों को एक साथ कंट्रोल करना

नीति के निर्देशों की ; से अलग की गई सूची के साथ, एचटीटीपी हेडर भेजकर कई सुविधाओं को एक ही समय पर कंट्रोल किया जा सकता है:

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

हर नीति का अलग हेडर भेजकर:

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

इस उदाहरण में ये कार्रवाइयां की जाएंगी:

  • यह नीति सभी ब्राउज़िंग कॉन्टेक्स्ट के लिए, unsized-media के इस्तेमाल की अनुमति नहीं देती है.
  • यह नीति, पेज के ऑरिजिन और https://example.com को छोड़कर, किसी भी अन्य ब्राउज़िंग कॉन्टेक्स्ट के लिए, geolocation के इस्तेमाल की अनुमति नहीं देती है.
  • camera को सभी ब्राउज़िंग कॉन्टेक्स्ट का ऐक्सेस देता है.

उदाहरण - iframe पर एक से ज़्यादा नीतियां सेट करना

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript एपीआई

Chrome 60 ने iframe पर, Feature-Policy एचटीटीपी हेडर और allow एट्रिब्यूट को जोड़ने की सुविधा जोड़ी है. हालांकि, Chrome 74 में JavaScript API को जोड़ा गया है.

इस एपीआई की मदद से क्लाइंट-साइड कोड यह तय करता है कि किसी पेज, फ़्रेम या ब्राउज़र पर किन सुविधाओं को इस्तेमाल करने की अनुमति है. मुख्य दस्तावेज़ के लिए, document.featurePolicy या iframes के लिए frame.featurePolicy में जाकर, इसकी आकर्षक चीज़ों को ऐक्सेस किया जा सकता है.

उदाहरण

नीचे दिए गए उदाहरण में, https://example.com साइट पर Feature-Policy: geolocation 'self' की नीति भेजने के नतीजे दिखाए गए हैं:

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

नीतियों की सूची

आइए जानते हैं कि सुविधा से जुड़ी नीति की मदद से, किन सुविधाओं को कंट्रोल किया जा सकता है?

फ़िलहाल, यह दस्तावेज़ उपलब्ध नहीं है कि कौनसी नीतियां लागू की गई हैं और उन्हें कैसे इस्तेमाल करना है. समय के साथ इस सूची में और बढ़ोतरी होगी, क्योंकि अलग-अलग ब्राउज़र इस खास जानकारी को अपनाते हैं और अलग-अलग नीतियां लागू करते हैं. सुविधा की नीति को एक जगह से दूसरी जगह ले जाया जा सकता है. साथ ही, अच्छे रेफ़रंस दस्तावेज़ों की ज़रूरत ज़रूर होगी.

फ़िलहाल, यह देखने के कई तरीके हैं कि कौनसी सुविधाएं कंट्रोल की जा सकती हैं.

  • हमारी सुविधा नीति किचन सिंक डेमो देखें. इसमें Blink में लागू की गई हर नीति के उदाहरण दिए गए हैं.
  • सुविधा के नामों की सूची देखने के लिए Chrome का सोर्स देखें.
  • सूची ढूंढने के लिए, about:blank पर document.featurePolicy.allowedFeatures() क्वेरी करें:
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • chromestatus.com पर ऐसी नीतियां देखें जिन्हें लागू किया गया है या जिन पर Blink में विचार किया जा रहा है.

इनमें से कुछ नीतियों को इस्तेमाल करने का तरीका जानने के लिए, GitHub का डेटा रेपो देखें. इस दस्तावेज़ में, कुछ नीतियों की जानकारी दी गई है.

अक्सर पूछे जाने वाले सवाल

मैं सुविधा नीति का इस्तेमाल कब करूं?

सभी नीतियां ऑप्ट-इन होती हैं. इसलिए, जब/जहां सही लगे, तब सुविधा की नीति का इस्तेमाल करें. उदाहरण के लिए, अगर आपका ऐप्लिकेशन एक इमेज गैलरी है, तो maximum-downscaling-image नीति, मोबाइल व्यूपोर्ट पर बड़ी इमेज भेजने से बचने में आपकी मदद करेगी.

document-write और sync-xhr जैसी अन्य नीतियों का इस्तेमाल ज़्यादा सावधानी से करना चाहिए. इन्हें चालू करने से, तीसरे पक्ष का कॉन्टेंट खराब हो सकता है, जैसे कि विज्ञापन. वहीं दूसरी ओर, सुविधा नीति एक गड़बड़ी की जांच हो सकती है. इससे यह पक्का किया जा सकता है कि आपके पेजों पर इन नुकसान पहुंचाने वाले एपीआई का कभी इस्तेमाल न किया जाए!

क्या मैं डेवलपमेंट या प्रोडक्शन में सुविधा नीति का इस्तेमाल करता/करती हूं?

दोनों. हमारा सुझाव है कि आप डेवलपमेंट के दौरान नीतियों को चालू रखें और प्रोडक्शन के दौरान नीतियों को ऐक्टिव रखें. डेवलपमेंट के दौरान नीतियों को चालू करने से आपको सही तरीके से शुरुआत करने में मदद मिल सकती है. इससे आपको अनचाहे रिग्रेशन के होने से पहले ही पता लगाने में मदद मिलेगी. उपयोगकर्ताओं को एक खास उपयोगकर्ता अनुभव देने के लिए, प्रोडक्शन में नीतियों को चालू रखें.

क्या मेरे सर्वर पर नीति के उल्लंघनों की शिकायत करने का कोई तरीका है?

Reporting API पर काम किया जा रहा है! जिस तरह साइटों के लिए, सीएसपी के उल्लंघनों या रोक लगाने की रिपोर्ट पाने के लिए ऑप्ट-इन किया जाता है उसी तरह, आपको जंगल में किसी भी सुविधा से जुड़ी नीति के उल्लंघनों की रिपोर्ट भी मिल सकती हैं.

iframe कॉन्टेंट के लिए इनहेरिटेंस के नियम क्या हैं?

स्क्रिप्ट (पहला या तीसरा पक्ष), अपने ब्राउज़िंग कॉन्टेक्स्ट की नीति इनहेरिट करती है. इसका मतलब है कि टॉप लेवल स्क्रिप्ट, मुख्य दस्तावेज़ की नीतियों को इनहेरिट करती हैं.

iframe पर अपने पैरंट पेज की नीतियां लागू होती हैं. अगर iframe में allow एट्रिब्यूट है, तो पैरंट पेज और allow सूची के बीच सख्त नीति का पालन करने पर सही नतीजे मिलेंगे. iframe के इस्तेमाल के बारे में ज़्यादा जानकारी के लिए, iframes पर allow एट्रिब्यूट देखें.

नहीं. किसी नीति को लागू होने की अवधि, एक पेज के नेविगेशन रिस्पॉन्स के हिसाब से होती है. अगर उपयोगकर्ता किसी नए पेज पर जाता है, तो नीति लागू होने के लिए, नए जवाब में Feature-Policy हेडर साफ़ तौर पर भेजा जाना चाहिए.

किन ब्राउज़र पर यह सुविधा नीति काम करती है?

ब्राउज़र सहायता के बारे में ताज़ा जानकारी के लिए caniuse.com देखें.

फ़िलहाल, सुविधाओं से जुड़ी नीति के लिए सिर्फ़ Chrome ही इस्तेमाल किया जा सकता है. हालांकि, एपीआई का पूरा प्लैटफ़ॉर्म ऑप्ट-इन किया गया है या सुविधा का पता लगाया जा सकता है, इसलिए सुविधा से जुड़ी नीति को बेहतर बनाने के लिए बेहतर तरीके से खुद को बेहतर बनाती है.

नतीजा

सुविधा की नीति से, उपयोगकर्ता अनुभव को बेहतर बनाने और उसकी परफ़ॉर्मेंस बेहतर बनाने में मदद मिलती है. यह ऐप्लिकेशन बनाते या उसका रखरखाव करते समय खास तौर पर काम आता है, क्योंकि इसकी मदद से आपके कोड बेस में जाने से पहले ही, आने वाले फ़ुटगनों से बचा जा सकता है.

दूसरे संसाधन: