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

खास जानकारी

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

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

परिचय

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

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

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

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

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

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

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

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

सुविधा नीति को इस्तेमाल करने का सबसे आसान तरीका, 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 का कोई हिस्सा जियोलोकेशन एपीआई इस्तेमाल करने की कोशिश करता है, तो ब्राउज़र उसे ब्लॉक कर देता है. यह तब भी लागू होता है, जब उपयोगकर्ता ने पहले ही अपनी जगह की जानकारी शेयर करने की अनुमति नहीं देती है.

सेट की गई जियोलोकेशन की नीति का उल्लंघन करना
सेट की गई जियोलोकेशन की नीति का उल्लंघन करना.

अन्य मामलों में, इस नीति में थोड़ी छूट देना सही रहेगा. हम इसकी अनुमति दे सकते हैं अपनी मूल साइट का भौगोलिक स्थान 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() एपीआई. यहां allowpaymentrequest और allowusermedia एट्रिब्यूट की मदद से, पेमेंट के अनुरोध का एपीआई और getUserMedia(), क्रम से.

इन पुराने एट्रिब्यूट के बजाय, 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 के इस्तेमाल की अनुमति नहीं देती है.
  • यह नीति, यूआरएल के अलावा सभी ब्राउज़िंग कॉन्टेक्स्ट के लिए geolocation के इस्तेमाल की अनुमति नहीं देती पेज का अपना ऑरिजिन और https://example.com है.
  • इससे 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 ने Feature-Policy एचटीटीपी हेडर और iframe पर allow एट्रिब्यूट का इस्तेमाल किया जाता है, तो JavaScript API को Chrome 74 में जोड़ा गया था.

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

उदाहरण

नीचे दिया उदाहरण दिखाता है कि की नीति को 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 में विचार किया जा रहा हो.

इनमें से कुछ नीतियों को इस्तेमाल करने का तरीका जानने के लिए, यहां जाएं: spec का GitHub रेपो. इसमें, कुछ नीतियों की जानकारी देने वाले कुछ संसाधन दिए गए हैं.

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

सुविधा से जुड़ी नीति का इस्तेमाल कब किया जा सकता है?

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

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

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

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

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

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

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

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

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

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

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

सबसे नई जानकारी के लिए caniuse.com पर जाएं ब्राउज़र सहायता पर विवरण.

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

नतीजा

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

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