खास जानकारी
सुविधा से जुड़ी नीति की मदद से वेब डेवलपर, ब्राउज़र में चुनिंदा एपीआई और वेब सुविधाओं को चुन सकते हैं, बंद कर सकते हैं, और उनके काम करने के तरीके में बदलाव कर सकते हैं. यह सीएसपी की तरह है. हालांकि, यह सुरक्षा को कंट्रोल करने के बजाय सुविधाओं को कंट्रोल करता है!
सुविधा से जुड़ी नीतियां, डेवलपर और ब्राउज़र के बीच ऑप्ट-इन करने के छोटे-छोटे कानूनी समझौते हैं. इनसे अच्छी क्वालिटी वाले वेब ऐप्लिकेशन बनाने (और उनका रखरखाव करने) के हमारे लक्ष्यों को पूरा करने में मदद मिलती है.
शुरुआती जानकारी
वेब के लिए निर्माण करना एक रोमांचक चुनौती है. एक बेहतरीन वेब ऐप्लिकेशन बनाना काफ़ी मुश्किल है, जो आपके परफ़ॉर्मेंस को बेहतर बनाता है और सभी नए और सबसे सही तरीकों का इस्तेमाल करता है. उस अनुभव को समय के साथ बढ़िया बनाए रखना और भी मुश्किल है. जैसे-जैसे आपका प्रोजेक्ट आगे बढ़ता है, डेवलपर आपके साथ उस पर काम करते हैं, नई सुविधाएं लॉन्च होती हैं और कोडबेस बढ़ता है. एक बार हासिल किए गए बेहतरीन अनुभव की स्थिति खराब हो सकती है और UX पर असर पड़ना शुरू हो जाएगा! सुविधा नीति को आपको ट्रैक पर रखने के लिए डिज़ाइन किया गया है.
सुविधा की नीति की मदद से, अपनी पूरी साइट पर इस्तेमाल की जाने वाली खास सुविधाओं को लागू करने के लिए, ब्राउज़र में "नीतियों" के सेट के लिए ऑप्ट-इन करें. इन नीतियों से तय होता है कि साइट किन एपीआई को ऐक्सेस कर सकती है या कुछ सुविधाओं के लिए ब्राउज़र के डिफ़ॉल्ट व्यवहार में बदलाव कर सकती है.
सुविधा नीति की मदद से किए जा सकने वाले कामों के उदाहरण यहां दिए गए हैं:
- मोबाइल और तीसरे पक्ष के वीडियो पर
autoplay
की डिफ़ॉल्ट सेटिंग बदलें. - किसी साइट को
camera
याmicrophone
जैसे संवेदनशील एपीआई का इस्तेमाल करने से रोकें. - iframe को
fullscreen
एपीआई का इस्तेमाल करने की अनुमति दें. - सिंक्रोनस XHR और
document.write()
जैसे पुराने एपीआई के इस्तेमाल को ब्लॉक करें. - पक्का करें कि इमेज का साइज़ सही हो (जैसे कि लेआउट को थ्रैशिंग से रोकना) और वे व्यूपोर्ट के लिए बहुत बड़ी न हों (जैसे कि उपयोगकर्ता का बैंडविथ वेस्ट होना).
नीतियां, डेवलपर और ब्राउज़र के बीच का एक अनुबंध हैं. इनसे ब्राउज़र को डेवलपर के मकसद के बारे में पता चलता है. साथ ही, जब हमारा ऐप्लिकेशन किसी गलत काम के लिए किसी गड़बड़ी का पता चलने की कोशिश करता है, तो हमें सही जानकारी देने में मदद मिलती है. अगर साइट या एम्बेड किए गए तीसरे पक्ष का कॉन्टेंट, डेवलपर के पहले से चुने गए किसी नियम का उल्लंघन करने की कोशिश करता है, तो ब्राउज़र उस तरीके को बेहतर उपयोगकर्ता अनुभव के साथ बदल देता है या एपीआई को पूरी तरह से ब्लॉक कर देता है.
सुविधा नीति का इस्तेमाल करना
सुविधा की नीति में सुविधाओं को कंट्रोल करने के दो तरीके हैं:
Feature-Policy
एचटीटीपी हेडर के ज़रिए.- iframe पर
allow
एट्रिब्यूट के साथ.
Feature-Policy
एचटीटीपी हेडर
किसी पेज के जवाब के साथ Feature-Policy
एचटीटीपी हेडर भेजकर, सुविधा नीति को इस्तेमाल करने का सबसे आसान तरीका है. इस हेडर की वैल्यू, नीति या उन नीतियों का सेट होती है जिन्हें ब्राउज़र में बताए गए ऑरिजिन के लिए इस्तेमाल किया जाता है:
Feature-Policy: <feature> <allow list origin(s)>
ऑरिजिन की अनुमति वाली सूची में कई अलग-अलग वैल्यू हो सकती हैं:
*
: इस सुविधा का इस्तेमाल, टॉप-लेवल ब्राउज़िंग कॉन्टेक्स्ट और नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट (iframe) में करने की अनुमति है.'self'
: इस सुविधा का इस्तेमाल, टॉप लेवल ब्राउज़िंग के कॉन्टेक्स्ट और एक ही ऑरिजिन वाले नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में किया जा सकता है. नेस्ट की गई ब्राउज़िंग वाली कॉन्टेक्स्ट में, क्रॉस-ऑरिजिन दस्तावेज़ों में इसकी अनुमति नहीं है.'none'
: इस सुविधा की अनुमति टॉप-लेवल ब्राउज़िंग कॉन्टेक्स्ट में नहीं दी जाती है. साथ ही, नेस्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट में इस सुविधा की अनुमति नहीं है.<origin(s)>
: वह ऑरिजिन जिसके लिए नीति लागू की जानी है. उदाहरण के लिए,https://example.com
.
उदाहरण
मान लें कि आपको अपनी पूरी साइट पर Geolocation API
का इस्तेमाल करने से हर तरह के कॉन्टेंट को ब्लॉक करना है. ऐसा करने के लिए, geolocation
सुविधा के लिए 'none'
की पूरी अनुमति वाली सूची भेजें:
Feature-Policy: geolocation 'none'
अगर कोई कोड या iframe, जियोलोकेशन एपीआई इस्तेमाल करने की कोशिश करता है, तो ब्राउज़र उसे ब्लॉक कर देता है. भले ही, उपयोगकर्ता ने पहले से अपनी जगह की जानकारी शेयर करने की अनुमति दी हो.
अन्य मामलों में, इस नीति में थोड़ी छूट देना सही रहेगा. हम अपने ऑरिजिन को Geolocation API का इस्तेमाल करने की अनुमति दे सकते हैं. हालांकि, अनुमति वाली सूची में '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()
एपीआई का इस्तेमाल करने की अनुमति देता है. पेमेंट के अनुरोध वाले एपीआई और 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 API
Chrome 60 ने iframe पर Feature-Policy
एचटीटीपी हेडर और allow
एट्रिब्यूट के लिए सहायता जोड़ी, लेकिन JavaScript API को Chrome 74 में जोड़ा गया.
इस एपीआई की मदद से, क्लाइंट-साइड कोड यह तय कर सकता है कि पेज, फ़्रेम या ब्राउज़र पर किन सुविधाओं का इस्तेमाल करने की अनुमति है. मुख्य दस्तावेज़ के लिए document.featurePolicy
या iframe के लिए 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"]
नीतियों की सूची
सुविधा नीति के ज़रिए किन सुविधाओं को कंट्रोल किया जा सकता है?
फ़िलहाल, लागू की गई नीतियों और उन्हें इस्तेमाल करने के तरीके के बारे में दस्तावेज़ की कमी है. समय के साथ यह सूची भी बढ़ती जाएगी, क्योंकि अलग-अलग ब्राउज़र विनिर्देशों को अपनाते हैं और अलग-अलग नीतियों को लागू करते हैं. सुविधा नीति एक गतिशील लक्ष्य होगी और अच्छे संदर्भ दस्तावेज़ों की निश्चित रूप से ज़रूरत होगी.
फ़िलहाल, यह देखने के कई तरीके हैं कि किन सुविधाओं को कंट्रोल किया जा सकता है.
- इसके डेमो के लिए, Feature Policy किचन सिंक देखें. इसमें 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
जैसी अन्य नीतियों का इस्तेमाल सावधानी से किया जाना चाहिए. इन सेटिंग को चालू करने पर, तीसरे पक्ष के कॉन्टेंट का इस्तेमाल नहीं किया जा सकता, जैसे कि विज्ञापन. वहीं दूसरी ओर, सुविधा से जुड़ी नीति के तहत कुछ जांच की जा सकती है, ताकि यह पक्का किया जा सके कि आपके पेज कभी भी इन खराब एपीआई का इस्तेमाल न करें!
क्या मैं डेवलपमेंट या प्रोडक्शन में सुविधा की नीति का इस्तेमाल करता/करती हूं?
दोनों. हमारा सुझाव है कि डेवलपमेंट के दौरान नीतियों को चालू रखें और प्रोडक्शन के दौरान नीतियों को चालू रखें. डेवलपमेंट के दौरान नीतियों को चालू करने से, बेहतर तरीके से शुरुआत करने में मदद मिलती है. इससे आपको ऐसे जोखिमों के होने से पहले ही उन्हें पहचानने में मदद मिलेगी. उपयोगकर्ताओं को एक खास अनुभव देने के लिए प्रोडक्शन में नीतियों को चालू रखें.
क्या मेरे सर्वर पर, नीति के उल्लंघनों की शिकायत करने का कोई तरीका है?
एक रिपोर्टिंग API हैइस काम में! जिस तरह साइटें, सीएसपी के उल्लंघनों या सेवा के बंद होने की रिपोर्ट पाने के लिए ऑप्ट-इन कर सकती हैं, उसी तरह आपको सुविधा की नीति के उल्लंघनों से जुड़ी रिपोर्ट भी मिल सकती हैं.
iframe कॉन्टेंट के लिए इनहेरिटेंस के क्या नियम हैं?
स्क्रिप्ट (पहले या तीसरे पक्ष) पर, ब्राउज़िंग कॉन्टेक्स्ट की नीति लागू होती है. इसका मतलब है कि टॉप लेवल की स्क्रिप्ट, मुख्य दस्तावेज़ की नीतियों को इनहेरिट करती हैं.
iframe
पर उनके पैरंट पेज की नीतियां लागू होती हैं. अगर iframe
में allow
एट्रिब्यूट का इस्तेमाल किया गया है, तो पैरंट पेज और allow
सूची के बीच जो सख्त नीति लागू होगी उसे स्वीकार किया जाएगा. iframe
के इस्तेमाल के बारे में ज़्यादा जानकारी के लिए, iframe पर allow
एट्रिब्यूट देखें.
अगर मैं कोई नीति लागू करूं, तो क्या वह सभी पेज नेविगेशन पर सेव रहती है?
नहीं. सिर्फ़ एक पेज वाले नेविगेशन से मिले रिस्पॉन्स के लिए, नीति लागू होने का समय तय करता है. अगर उपयोगकर्ता किसी नए पेज पर जाता है, तो नए रिस्पॉन्स में Feature-Policy
हेडर साफ़ तौर पर भेजा जाना चाहिए, ताकि नीति लागू हो.
सुविधा की नीति किन ब्राउज़र पर काम करती है?
ब्राउज़र से जुड़ी सहायता के बारे में नई जानकारी के लिए, caniuse.com पर जाएं.
फ़िलहाल, सुविधा नीति का इस्तेमाल करने के लिए सिर्फ़ Chrome ब्राउज़र है. एपीआई का पूरा प्लैटफ़ॉर्म ऑप्ट-इन है या सुविधा की पहचान की जा सकती है. इसलिए, सुविधा से जुड़ी नीति का इस्तेमाल करके, उसे बेहतर बनाने में मदद मिलती है.
नतीजा
सुविधा से जुड़ी नीति की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाने और अच्छी परफ़ॉर्मेंस पाने के लिए, सही जानकारी दी जा सकती है. यह किसी ऐप्लिकेशन को डेवलप करते समय या उसका रखरखाव करते समय खास तौर पर आसान होता है, क्योंकि यह आपके कोड बेस में छिपने से पहले संभावित फ़ुटगन से बचने में मदद कर सकता है.
दूसरे संसाधन:
- सुविधा की नीति के बारे में जानकारी
- सुविधा की नीति के बारे में खास जानकारी
- किचन सिंक के डेमो
- सुविधा के लिए DevTools एक्सटेंशन - यह किसी पेज पर सुविधा से जुड़ी नीतियों को आज़माने के लिए टेस्टर है.
- chromestatus.com एंट्री