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

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

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

इस दस्तावेज़ में, एक नए एचटीएमएल एलिमेंट के बारे में बताया गया है: <fencedframe>.

• Chrome में सामान्य तौर पर उपलब्ध है.
• Chrome Platform Status.

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

फ़ेंस्ड फ़्रेम (<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 पर एम्बेड किया जाता है, तो ब्राउज़र स्टोरेज शेयर किया जाएगा. ऐसा इसलिए, क्योंकि इन्हें एक ही साइट माना जाता है.

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

अलग-अलग साइटों से मिले डेटा का इस्तेमाल करना

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

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

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

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

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

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

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

फ़ेंस किए गए फ़्रेम, एम्बेड करने वाले व्यक्ति या कंपनी से कम्यूनिकेट करने के लिए postMessage का इस्तेमाल नहीं कर सकते. हालांकि, फ़ेंस किए गए फ़्रेम में postMessage का इस्तेमाल किया जा सकता है. इसके लिए, फ़ेंस किए गए फ़्रेम में iframe होने चाहिए.

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

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

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

फ़ेन्स्ड फ़्रेम, 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 प्रॉपर्टी के साथ काम नहीं करते. इसलिए, आपको अब भी यह पुष्टि करनी होगी कि नेविगेट करने से पहले, प्रॉमिस 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 फ़्लैग का इस्तेमाल करके, chrome://flags/#enable-fenced-frames पर Fenced Frame API चालू करें.

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

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

फ़ीचर का पता लगाने की सुविधा

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

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

यह पता लगाने के लिए कि फ़ेंस किए गए फ़्रेम का कॉन्फ़िगरेशन उपलब्ध है या नहीं: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

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

• एमडीएन
• Chrome Platform Status

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

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

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

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

• Chrome Platform Status
• Blink Intent to Prototype