फ़ेंस किए गए फ़्रेम की खास जानकारी

क्रॉस-साइट डेटा शेयर किए बिना, किसी पेज पर कॉन्टेंट को सुरक्षित तरीके से एम्बेड करना.

लागू करने की स्थिति

• इसे बंद करने के लिए शेड्यूल किया गया है.
• शिप करने का इरादा: FencedFrame एलिमेंट और window.fence API हटाना
• Chrome प्लैटफ़ॉर्म की स्थिति

हमें फ़ेंस्ड फ़्रेम की ज़रूरत क्यों है?

फ़ेंस्ड फ़्रेम (<fencedframe>) iframe की तरह होता है. इसे एम्बेड किए गए कॉन्टेंट के लिए एचटीएमएल एलिमेंट के तौर पर इस्तेमाल किया जाता है. iframe के ठीक उलट फ़ेंस्ड फ़्रेम, एम्बेड करने के कॉन्टेक्स्ट के साथ कम्यूनिकेशन पर पाबंदी लगाता है, ताकि फ़्रेम दूसरी साइट पर मौजूद डेटा को, एम्बेड करने के कॉन्टेक्स्ट के साथ शेयर किए बिना ऐक्सेस कर सके. Privacy Sandbox के कुछ एपीआई के लिए, चुने गए दस्तावेज़ों को फ़ेंस्ड फ़्रेम में रेंडर करना ज़रूरी हो सकता है.

इसी तरह, एम्बेड करने के कॉन्टेक्स्ट में मौजूद पहले पक्ष के किसी भी डेटा को फ़ेंस्ड फ़्रेम के साथ शेयर नहीं किया जा सकता.

उदाहरण के लिए, अगर news.example (एम्बेड करने का कॉन्टेक्स्ट) किसी फ़ेंस्ड फ़्रेम में shoes.example का विज्ञापन एम्बेड करता है, तो news.example, shoes.example के विज्ञापन से डेटा नहीं निकाल सकता. साथ ही, shoes.example, news.example से पहले पक्ष का डेटा नहीं जान सकता.

स्टोरेज पार्टीशनिंग की मदद से, क्रॉस-साइट निजता को मज़बूत बनाना

वेब पर ब्राउज़ करते समय, आपने शायद किसी एक साइट पर प्रॉडक्ट देखे होंगे. इसके बाद, आपने उन्हें किसी दूसरी साइट पर विज्ञापन में देखा होगा.

फ़िलहाल, विज्ञापन की इस तकनीक का इस्तेमाल मुख्य तौर पर ट्रैकिंग टेक्नोलॉजी की मदद से किया जाता है. यह टेक्नोलॉजी, तीसरे पक्ष की कुकी का इस्तेमाल करके, साइटों के बीच जानकारी शेयर करती है.

Chrome, स्टोरेज पार्टीशनिंग पर काम कर रहा है. इससे ब्राउज़र स्टोरेज को हर साइट के हिसाब से अलग किया जाता है. पार्टिशनिंग के बिना, अगर shoes.example से कोई iframe, news.example पर एम्बेड किया जाता है और वह iframe, स्टोरेज में कोई वैल्यू सेव करता है, तो उस वैल्यू को shoes.example साइट से पढ़ा जा सकता है. स्टोरेज को पार्टिशन करने के बाद, क्रॉस-साइट iframe अब स्टोरेज शेयर नहीं करेंगे. इसलिए, shoes.example, iframe से सेव की गई जानकारी को ऐक्सेस नहीं कर पाएगा. अगर iframe, *.shoes.example से दिखाया जाता है और *.shoes.example पर एम्बेड किया जाता है, तो ब्राउज़र स्टोरेज शेयर किया जाएगा, क्योंकि इन्हें एक ही साइट माना जाता है.

स्टोरेज पार्टीशनिंग, लोकल स्टोरेज, IndexedDB, और कुकी जैसे स्टैंडर्ड स्टोरेज एपीआई पर लागू होगी. पार्टिशन किए गए स्टोरेज में, पहले पक्ष के स्टोरेज में मौजूद जानकारी के लीक होने की संभावना काफ़ी कम हो जाएगी.

क्रॉस-साइट डेटा के साथ काम करना

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

• Protected Audience API, निजता को सुरक्षित बनाए रखते हुए, दिलचस्पी के हिसाब से विज्ञापन दिखाने की सुविधा देता है.
• Shared Storage, सुरक्षित माहौल में, पार्टिशन न किए गए क्रॉस-साइट डेटा को ऐक्सेस करने की अनुमति देता है.

फ़ेंस्ड फ़्रेम, Protected Audience API के साथ काम करने के लिए डिज़ाइन किए गए हैं. Protected Audience API की मदद से, उपयोगकर्ता की दिलचस्पी को विज्ञापन देने वाले व्यक्ति या कंपनी की साइट पर, दिलचस्पी वाले ग्रुप में रजिस्टर किया जाता है. साथ ही, उन विज्ञापनों को भी रजिस्टर किया जाता है जिनमें उपयोगकर्ता की दिलचस्पी हो सकती है. इसके बाद, किसी दूसरी साइट (जिसे "पब्लिशर" कहा जाता है) पर, दिलचस्पी वाले काम के ग्रुप में रजिस्टर किए गए विज्ञापनों की नीलामी की जाती है. नीलामी में जीतने वाला विज्ञापन, फ़ेंस्ड फ़्रेम में दिखता है.

अगर पब्लिशर, नीलामी में जीतने वाले विज्ञापन को iframe में दिखाता है और स्क्रिप्ट, iframe के src एट्रिब्यूट को पढ़ सकती है, तो पब्लिशर, उस विज्ञापन के यूआरएल से, साइट पर आने वाले व्यक्ति की दिलचस्पी के बारे में जानकारी का अनुमान लगा सकता है. यह निजता को सुरक्षित बनाए रखने के लिहाज़ से सही नहीं है.

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

फ़ेंस्ड फ़्रेम कैसे काम करते हैं?

फ़ेंस्ड फ़्रेम, नेविगेशन के लिए FencedFrameConfig ऑब्जेक्ट का इस्तेमाल करते हैं. इस ऑब्जेक्ट को, Protected Audience API की नीलामी या Shared Storage के यूआरएल चुनने की प्रोसेस से वापस पाया जा सकता है. इसके बाद, कॉन्फ़िगरेशन ऑब्जेक्ट को, फ़ेंस्ड फ़्रेम एलिमेंट पर config एट्रिब्यूट के तौर पर सेट किया जाता है. यह iframe से अलग होता है. iframe में, src एट्रिब्यूट को कोई यूआरएल या अपारदर्शी URN असाइन किया जाता है. FencedFrameConfig ऑब्जेक्ट में, सिर्फ़ पढ़ने की अनुमति वाली url प्रॉपर्टी होती है. हालांकि, इस्तेमाल के मौजूदा उदाहरणों के लिए, इंटरनल रिसॉर्स के असली यूआरएल को छिपाना ज़रूरी है. इसलिए, इस प्रॉपर्टी को पढ़ने पर, opaque स्ट्रिंग मिलती है.

फ़ेंस्ड फ़्रेम, अपने एम्बेडर के साथ कम्यूनिकेट करने के लिए, postMessage का इस्तेमाल नहीं कर सकता. हालांकि, फ़ेंस्ड फ़्रेम, फ़ेंस्ड फ़्रेम के अंदर मौजूद iframe के साथ postMessage का इस्तेमाल कर सकता है.

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

फ़ेंस्ड फ़्रेम, टॉप-लेवल के ब्राउज़िंग कॉन्टेक्स्ट (जैसे कि ब्राउज़र टैब) की तरह काम करते हैं. इस्तेमाल के कुछ उदाहरणों (जैसे कि दिलचस्पी के हिसाब से फिर से टारगेट करने वाले विज्ञापन) में, फ़ेंस्ड फ़्रेम में क्रॉस-साइट डेटा (जैसे कि Protected Audience API का एक जैसी दिलचस्पी वाला ग्रुप) शामिल हो सकता है. हालांकि, फ़्रेम, पार्टिशन न किए गए स्टोरेज या कुकी को ऐक्सेस नहीं कर सकता. फ़ेंस्ड फ़्रेम, nonce-आधारित यूनीक कुकी और स्टोरेज पार्टीशन को ऐक्सेस कर सकता है.

फ़ेंस्ड फ़्रेम की विशेषताओं के बारे में ज़्यादा जानकारी, एक्सप्लेनर में दी गई है.

फ़ेंस्ड फ़्रेम की तुलना iframe से कैसे की जा सकती है?

अब आपको पता चल गया है कि फ़ेंस्ड फ़्रेम क्या कर सकते हैं और क्या नहीं. इसलिए, मौजूदा iframe की सुविधाओं से इनकी तुलना करना फ़ायदेमंद है.

निजता बनाए रखने के लिए, फ़ेंस्ड फ़्रेम में बाहरी कम्यूनिकेशन के कम विकल्प उपलब्ध हैं.

क्या फ़ेंस्ड फ़्रेम, iframe की जगह इस्तेमाल किए जा सकेंगे?

फ़ेंस्ड फ़्रेम, iframe की जगह इस्तेमाल नहीं किए जा सकेंगे. साथ ही, आपको इनका इस्तेमाल करना ज़रूरी नहीं होगा. फ़ेंस्ड फ़्रेम, ज़्यादा सुरक्षित फ़्रेम होते हैं. इनका इस्तेमाल तब किया जाता है, जब अलग-अलग टॉप-लेवल के पार्टिशन से मिले डेटा को एक ही पेज पर दिखाना हो.

सेम-साइट iframe (इन्हें कभी-कभी फ़्रेंडली iframe भी कहा जाता है) को भरोसेमंद कॉन्टेंट माना जाता है.

फ़ेंस्ड फ़्रेम का इस्तेमाल करना

फ़ेंस्ड फ़्रेम, Privacy Sandbox के अन्य एपीआई के साथ मिलकर काम करेंगे, ताकि अलग-अलग स्टोरेज पार्टिशन से मिले दस्तावेज़ों को एक ही पेज पर दिखाया जा सके. संभावित एपीआई के बारे में चर्चा जारी है.

फ़िलहाल, इस कॉम्बिनेशन के लिए ये एपीआई उपलब्ध हैं:

• TURTLEDOVE API फ़ैमिली (यह Protected Audience API का आधार है) के फ़ेंस्ड फ़्रेम, कन्वर्ज़न लिफ़्ट मेज़रमेंट के साथ काम कर सकते हैं. इसके लिए, Shared Storage का इस्तेमाल किया जाता है.
• एक और विकल्प यह है कि फ़ेंस्ड फ़्रेम को सिर्फ़ पढ़ने की अनुमति दी जाए या पार्टिशन न किए गए स्टोरेज को ऐक्सेस करने की अनुमति दी जाए.

ज़्यादा जानकारी के लिए, फ़ेंस्ड फ़्रेम के इस्तेमाल के उदाहरणों का एक्सप्लेनर देखें.

उदाहरण

फ़ेंस्ड फ़्रेम का config ऑब्जेक्ट पाने के लिए, आपको Protected Audience API के runAdAuction() कॉल या Shared Storage के selectURL() कॉल में resolveToConfig: true पास करना होगा. अगर प्रॉपर्टी को नहीं जोड़ा जाता है या इसे false पर सेट किया जाता है, तो नतीजे के तौर पर मिलने वाला प्रॉमिस, ऐसे यूआरएन में रिज़ॉल्व होगा जिसका इस्तेमाल सिर्फ़ iframe में किया जा सकता है.

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

कॉन्फ़िगरेशन पाने के बाद, इसे फ़ेंस्ड फ़्रेम के config एट्रिब्यूट को असाइन किया जा सकता है, ताकि फ़्रेम को कॉन्फ़िगरेशन से दिखाए जाने वाले रिसॉर्स पर ले जाया जा सके. Chrome के पुराने वर्शन, resolveToConfig प्रॉपर्टी के साथ काम नहीं करते. इसलिए, आपको अब भी यह पुष्टि करनी होगी कि नेविगेट करने से पहले, प्रॉमिस FencedFrameConfig में रिज़ॉल्व हुआ है या नहीं:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

ज़्यादा जानने के लिए, फ़ेंस्ड फ़्रेम और फ़ेंस्ड फ़्रेम के कॉन्फ़िगरेशन के एक्सप्लेनर देखें.

हेडर

ब्राउज़र, फ़ेंस्ड फ़्रेम और फ़ेंस्ड फ़्रेम में एम्बेड किए गए iframe से किए गए अनुरोधों के लिए, Sec-Fetch-Dest: fencedframe सेट करेंगे.

Sec-Fetch-Dest: fencedframe

किसी दस्तावेज़ को फ़ेंस्ड फ़्रेम में लोड करने के लिए, सर्वर को Supports-Loading-Mode: fenced-frame रिस्पॉन्स हेडर सेट करना होगा. फ़ेंस्ड फ़्रेम के अंदर मौजूद किसी भी iframe के लिए भी हेडर मौजूद होना चाहिए.

Supports-Loading-Mode: fenced-frame

Shared Storage का कॉन्टेक्स्ट

फ़ेंस्ड फ़्रेम में, इवेंट-लेवल का डेटा रिपोर्ट करने के लिए, Private Aggregation का इस्तेमाल किया जा सकता है. यह डेटा, एम्बेडर के कॉन्टेक्चुअल डेटा से जुड़ा होता है. fencedFrameConfig.setSharedStorageContext() तरीके का इस्तेमाल करके, Protected Audience API से शुरू किए गए शेयर किए गए स्टोरेज के वर्कलेट में, एम्बेडर से कुछ कॉन्टेक्चुअल डेटा पास किया जा सकता है. जैसे, इवेंट आईडी.

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

एम्बेडर पेज से, कॉन्टेक्चुअल डेटा को शेयर किए गए स्टोरेज के कॉन्टेक्स्ट के तौर पर सेट किया जा सकता है:

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

फ़ेंस्ड फ़्रेम से, फ़्रेम के इवेंट-लेवल के डेटा को शेयर किए गए स्टोरेज के वर्कलेट में पास किया जा सकता है. यह डेटा, ऊपर दिए गए एम्बेडर के कॉन्टेक्चुअल डेटा से अलग होता है:

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

sharedStorage.context से, एम्बेडर की कॉन्टेक्चुअल जानकारी और data ऑब्जेक्ट से, फ़्रेम के इवेंट-लेवल के डेटा को पढ़ा जा सकता है. इसके बाद, Private Aggregation की मदद से इनकी रिपोर्ट की जा सकती है:

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

फ़ेंस्ड फ़्रेम के कॉन्फ़िगरेशन ऑब्जेक्ट में, एम्बेडर के कॉन्टेक्स्ट के बारे में ज़्यादा जानने के लिए, एक्सप्लेनर देखें.

फ़ेंस्ड फ़्रेम आज़माना

Chrome फ़्लैग का इस्तेमाल करके, Fenced Frame API को chrome://flags/#enable-fenced-frames पर चालू करें.

डायलॉग में कई विकल्प मौजूद हैं. हमारा सुझाव है कि आप *चालू करें* विकल्प चुनें. इससे Chrome, नई आर्किटेक्चर के उपलब्ध होने पर, अपने-आप अपडेट हो जाएगा.

अन्य विकल्प, ShadowDOM के साथ चालू करें और एक से ज़्यादा पेज वाले आर्किटेक्चर के साथ चालू करें, अलग-अलग लागू करने की रणनीतियां ऑफ़र करते हैं. ये रणनीतियां सिर्फ़ ब्राउज़र इंजीनियरों के लिए काम की हैं. फ़िलहाल, चालू करें विकल्प, ShadowDOM के साथ चालू करें विकल्प की तरह ही काम करता है. आने वाले समय में, चालू करें विकल्प, एक से ज़्यादा पेज वाले आर्किटेक्चर के साथ चालू करें विकल्प के साथ मैप होगा.

सुविधा का पता लगाना

यह पता लगाने के लिए कि फ़ेंस्ड फ़्रेम तय किए गए हैं या नहीं:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

यह पता लगाने के लिए कि फ़ेंस्ड फ़्रेम का कॉन्फ़िगरेशन उपलब्ध है या नहीं:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

ब्राउज़र समर्थन

• एमडीएन
• Chrome प्लैटफ़ॉर्म की स्थिति

सुझाव/राय दें या शिकायत करें

फ़ेंस्ड फ़्रेम पर चर्चा जारी है. आने वाले समय में, इनमें बदलाव हो सकता है. अगर आपने इस एपीआई को आज़माया है और आपके पास कोई सुझाव/राय है या शिकायत है, तो हमें इसके बारे में बताएं.

• GitHub: एक्सप्लेनर पढ़ें, सवाल पूछें, और चर्चा में शामिल हों.

ज़्यादा जानें

• Chrome प्लैटफ़ॉर्म की स्थिति
• Blink का प्रोटोटाइप बनाने का इरादा