खास जानकारी
सुविधा नीति वेब डेवलपर को अपनी पसंद के हिसाब से इन सुविधाओं को चालू करने, बंद करने, और ब्राउज़र में कुछ एपीआई और वेब सुविधाओं के काम करने के तरीके में बदलाव कर सकता है. यह ऐसा है सीएसपी, लेकिन सुरक्षा को कंट्रोल करने के बजाय, कंट्रोल वाली सुविधाएं!
सुविधा से जुड़ी नीतियां, डेवलपर के बीच होने वाले छोटे-छोटे ऑप्ट-इन कानूनी समझौते हैं और ब्राउज़र, जो बेहतर तरीके से काम करने (और बनाए रखने) के हमारे लक्ष्यों को पूरा करने में मदद कर सके बेहतरीन वेब ऐप्लिकेशन उपलब्ध हैं.
परिचय
वेब के लिए निर्माण करना एक रोमांचक चुनौती है. एक बेहतर मक़सद बनाना ही काफ़ी मुश्किल है ऐसा वेब ऐप्लिकेशन जो परफ़ॉर्मेंस को बेहतर बनाता है और सभी नए सबसे सही तरीकों का इस्तेमाल करता है. आज भी समय के साथ उस अनुभव को बढ़िया बनाए रखना मुश्किल हो जाता है. जैसे-जैसे आपका प्रोजेक्ट आगे बढ़ेगा, डेवलपर अपने साथ जुड़ते हैं, नई सुविधाएं मिलती हैं, और कोड बेस बढ़ता जाता है. वह इस शानदार अनुभव को हासिल करने के बाद, उपयोगकर्ता को खराब अनुभव मिल सकता है और उपयोगकर्ता अनुभव खराब हो सकता है पीड़ित होने लगता है! सुविधा नीति को आपको ट्रैक पर रखने के लिए डिज़ाइन किया गया है.
सुविधा नीति की मदद से, ब्राउज़र के लिए "नीतियों" के सेट के लिए ऑप्ट-इन किया जा सकता है: अपनी पूरी साइट पर इस्तेमाल की जाने वाली खास सुविधाओं पर लागू करना. इन नीतियों के हिसाब से साइट किन एपीआई को ऐक्सेस कर सकती है या ब्राउज़र के डिफ़ॉल्ट व्यवहार में बदलाव कर सकती है कुछ सुविधाएं.
सुविधा नीति की मदद से किए जा सकने वाले कामों के उदाहरण यहां दिए गए हैं:
- डिफ़ॉल्ट व्यवहार बदलना
कुल
autoplay
में से मोबाइल और तीसरे पक्ष के वीडियो पर. - किसी साइट को
camera
याmicrophone
जैसे संवेदनशील एपीआई का इस्तेमाल करने से रोकें. - iframe को
fullscreen
एपीआई का इस्तेमाल करने की अनुमति दें. - सिंक्रोनस XHR और
document.write()
जैसे पुराने एपीआई के इस्तेमाल को ब्लॉक करें. - पक्का करें कि इमेज का साइज़ सही हो. उदाहरण के लिए, लेआउट को थ्रैशिंग से रोका जा सके बहुत बड़ा है (जैसे कि उपयोगकर्ता का बैंडविथ खराब होना).
नीतियां, डेवलपर और ब्राउज़र के बीच का एक अनुबंध हैं. ये वेबसाइट, डेवलपर का मकसद क्या है, इस बारे में ज़्यादा जानकारी पाने के लिए, हमारा ऐप पटरी से उतरकर कुछ गलत करने की कोशिश करता है. अगर साइट या एम्बेड की गई है, तीसरे पक्ष का कॉन्टेंट, डेवलपर के पहले से चुने गए किसी भी कॉन्टेंट का उल्लंघन करने की कोशिश करता है नियम, ब्राउज़र बेहतर UX के साथ व्यवहार को ओवरराइड कर देता है या एपीआई को ब्लॉक कर देता है कुल मिलाकर.
सुविधा नीति का इस्तेमाल करना
सुविधा की नीति में सुविधाओं को कंट्रोल करने के दो तरीके हैं:
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 का कोई हिस्सा जियोलोकेशन एपीआई इस्तेमाल करने की कोशिश करता है, तो ब्राउज़र उसे ब्लॉक कर देता है. यह तब भी लागू होता है, जब उपयोगकर्ता ने पहले ही अपनी जगह की जानकारी शेयर करने की अनुमति नहीं देती है.
![सेट की गई जियोलोकेशन की नीति का उल्लंघन करना](https://developer.chrome.com/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=9&hl=hi)
अन्य मामलों में, इस नीति में थोड़ी छूट देना सही रहेगा. हम इसकी अनुमति दे सकते हैं
अपनी मूल साइट का भौगोलिक स्थान 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) को बेहतर बनाने में मदद मिल सकती है अच्छा प्रदर्शन. किसी ऐप्लिकेशन को डेवलप करते या उसका रखरखाव करते समय, यह खास तौर पर काम आता है क्योंकि यह आपके कोड बेस में प्रवेश करने से पहले संभावित फ़ुटगन से बचने में आपकी सहायता कर सकता है.
दूसरे संसाधन:
- सुविधा की नीति के बारे में जानकारी
- सुविधा की नीति के बारे में खास जानकारी
- किचन सिंक के डेमो
- सुविधा के लिए DevTools एक्सटेंशन - यह किसी पेज पर सुविधा से जुड़ी नीतियों को आज़माने के लिए टेस्टर है.
- chromestatus.com एंट्री