एम्बेड किए गए कॉन्टेंट की मदद से, उपयोगकर्ताओं को अपनी साइट पर बनाए रखा जा सकता है. साथ ही, अन्य पेजों या साइटों से कॉन्टेंट शेयर किया जा सकता है. यह एम्बेड किया गया कोई ट्वीट भी हो सकता है. यह ट्वीट, Twitter की स्टाइल और फ़ॉर्मैट में दिखता है. यह आपकी साइट पर एम्बेड की गई किसी दूसरी साइट के बराबर हो सकता है. जैसे, एम्बेड किया गया Shopify स्टोर. यहां आने वाले लोग, आपकी साइट छोड़े बिना खरीदारी कर सकते हैं.
कॉन्टेंट एम्बेड करते समय, हमारी साइटों को सुरक्षित रखना अब पहले से ज़्यादा ज़रूरी है.
डेवलपर, किसी वेबसाइट पर कॉन्टेंट को कई तरीकों से एम्बेड कर सकते हैं. सबसे आम तरीका, <iframe> का इस्तेमाल करना है. इसकी मदद से, सिर्फ़ यूआरएल का इस्तेमाल करके अपनी साइट पर कोई भी कॉन्टेंट एम्बेड किया जा सकता है. हालांकि, iframe को ज़्यादा सुरक्षित बनाने के लिए, sandbox एट्रिब्यूट को पहले से ही जोड़ा जा सकता है.
इसके अलावा, सुझाए गए एचटीएमएल एलिमेंट का इस्तेमाल किया जा सकता है:
<fencedframe>को निजता बनाए रखने के तरीके के तौर पर सुझाया गया है, ताकि तीसरे पक्ष के कॉन्टेंट को एम्बेड किया जा सके.<portal>का सुझाव, पेज ट्रांज़िशन को ज़्यादा आसान बनाने के लिए दिया गया है.
एम्बेड किए गए कॉन्टेंट की सुरक्षा को बेहतर बनाने का तरीका जानने के लिए, आगे पढ़ें.
iframe की मदद से एम्बेड करना
आईफ़्रेम का इस्तेमाल कई तरह के कामों के लिए किया जा सकता है. जैसे, संपर्क पेज पर मैप या फ़ॉर्म जोड़ना और विज्ञापन दिखाना.
<iframe src="https://example.com/maps"></iframe>
हर iframe का अपना ब्राउज़िंग कॉन्टेक्स्ट होता है. साथ ही, इसका अपना सेशन इतिहास और document होता है. जिस कॉन्टेक्स्ट में iframe एम्बेड किया जाता है उसे पैरंट ब्राउज़िंग कॉन्टेक्स्ट कहा जाता है.
किसी iframe में दिखाए गए तीसरे पक्ष के कॉन्टेंट को, postMessage() के ज़रिए पैरंट साइट के साथ इंटरैक्ट करने की अनुमति दी जा सकती है. इससे डेवलपर, ब्राउज़िंग कॉन्टेक्स्ट के बीच आर्बिट्ररी वैल्यू भेज सकते हैं. मैसेज पाने वाला व्यक्ति, वैल्यू पाने के लिए इवेंट लिसनर onmessage का इस्तेमाल कर सकता है.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
sandbox एट्रिब्यूट की मदद से सुरक्षा बढ़ाना
अगर किसी iframe में नुकसान पहुंचाने वाला कॉन्टेंट डिप्लॉय किया जाता है, तो ऐसा हो सकता है कि अनचाही कार्रवाइयां (जैसे कि JavaScript को लागू करना या फ़ॉर्म सबमिट करना) की जा सकें.
इससे बचने के लिए, sandbox एट्रिब्यूट, iframe में एक्ज़ीक्यूटेबल एपीआई को सीमित करता है. साथ ही, संभावित रूप से नुकसान पहुंचाने वाली सुविधाओं को बंद कर देता है.
<iframe src="https://example.com" sandbox></iframe>
सैंडबॉक्स में, कुछ ऐसे एपीआई उपलब्ध नहीं हो सकते हैं जो आपके एम्बेड किए गए कॉन्टेंट के लिए ज़रूरी हैं. बंद किए गए एपीआई को अनुमति देने के लिए, सैंडबॉक्स एट्रिब्यूट में एक आर्ग्युमेंट जोड़ा जा सकता है.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
sandbox स्पेसिफ़िकेशन के लिए कई वैल्यू उपलब्ध हैं. इनमें allow-forms, allow-same-origin, allow-popups वगैरह शामिल हैं.
अनुमतियों की नीति
वेब के लिए ज़्यादा बेहतर सुविधाएं उपलब्ध होने की वजह से, अनुमति से जुड़ी नीतियां बनाई गई हैं. इनकी मदद से, इन सभी सुविधाओं के लिए अनुमतियों को मैनेज किया जा सकता है. अनुमतियों से जुड़ी नीति को पैरंट साइट और iframe कॉन्टेंट, दोनों पर लागू किया जा सकता है. allow एट्रिब्यूट का इस्तेमाल करके, पैरंट साइट को दी गई अनुमतियां iframe को भी दी जा सकती हैं.
<iframe src="https://example.com" allow="fullscreen"></iframe>
फ़ेंस्ड फ़्रेम के साथ एम्बेड करना
फ़ेंस्ड फ़्रेम (<fencedframe>), iframe की तरह होता है. इसे एम्बेड किए गए कॉन्टेंट के लिए एचटीएमएल एलिमेंट के तौर पर सुझाया जाता है. iframe के ठीक उलट फ़ेंस्ड फ़्रेम, एम्बेड करने के कॉन्टेक्स्ट के साथ कम्यूनिकेशन पर पाबंदी लगाता है, ताकि फ़्रेम दूसरी साइट पर मौजूद डेटा को, एम्बेड करने के कॉन्टेक्स्ट के साथ शेयर किए बिना ऐक्सेस कर सके. इसी तरह, पैरंट पेज पर मौजूद पहले पक्ष के डेटा को फ़ेन्स्ड फ़्रेम के साथ शेयर नहीं किया जा सकता.
<fencedframe src="https://3rd.party.example"></fencedframe>
फ़ेन्स्ड फ़्रेम, Privacy Sandbox का एक सुझाव है. इसके तहत, टॉप-लेवल की साइटों को डेटा को अलग-अलग हिस्सों में बांटने का सुझाव दिया जाता है. Privacy Sandbox के कई प्रस्तावों का मकसद, क्रॉस-साइट इस्तेमाल के उदाहरणों को पूरा करना है. इसके लिए, तीसरे पक्ष की कुकी या अन्य ट्रैकिंग मैकेनिज़्म का इस्तेमाल नहीं किया जाता. Privacy Sandbox के कुछ एपीआई के लिए, कुछ दस्तावेज़ों को फ़ेन्स्ड फ़्रेम में रेंडर करने की ज़रूरत पड़ सकती है.
उदाहरण के लिए, FLEDGE API की मदद से होने वाली विज्ञापन नीलामी के विजेता के लिए, फ़ेंस किया गया फ़्रेम बनाया जाएगा. FLEDGE API, ओपेक सोर्स उपलब्ध कराएगा. यह एक ऐसी यूआरएन स्कीम है जो जगह के हिसाब से काम नहीं करती. इसे फ़ेंस्ड फ़्रेम में रेंडर किया जा सकता है. ओपेक सोर्स की मदद से साइटें, विज्ञापन देने वाले व्यक्ति या कंपनी को विज्ञापन के सोर्स यूआरएल की जानकारी दिए बिना, अपनी साइटों पर कॉन्टेंट दिखा सकती हैं.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
आखिरकार, फ़ेन्स्ड फ़्रेम, iframe की जगह नहीं लेंगे. आपको इनका इस्तेमाल नहीं करना पड़ेगा. फ़ेंस किए गए फ़्रेम का सुझाव, ज़्यादा निजी फ़्रेम के तौर पर दिया गया है. इसका इस्तेमाल तब किया जाता है, जब अलग-अलग टॉप-लेवल पार्टीशन का डेटा एक ही पेज पर दिखाना हो.
पोर्टल के साथ एम्बेड करना
पोर्टल (<portal>) एक प्रस्तावित एचटीएमएल एलिमेंट है. इसका ब्राउज़िंग कॉन्टेक्स्ट अलग होता है. इससे पेज ट्रांज़िशन के अनुभव को बेहतर बनाया जा सकता है. पोर्टल, iframe जैसे कॉन्टेंट को एम्बेड करते हैं. हालांकि, उपयोगकर्ता पोर्टल के कोड को ऐक्सेस नहीं कर सकता. पोर्टल को सिर्फ़ देखा जा सकता है. उपयोगकर्ता इससे इंटरैक्ट नहीं कर सकते.
पोर्टल, एक से ज़्यादा पेज वाले ऐप्लिकेशन की जटिलता को कम करते हैं. साथ ही, सिंगल पेज वाले ऐप्लिकेशन की तरह ही आसानी से ट्रांज़िशन करते हैं. इन ट्रांज़िशन को ऐनिमेट किया जा सकता है. इससे ब्राउज़र विंडो में मौजूद कॉन्टेंट तेज़ी से बदल जाता है.
<portal src="https://example.com/"></portal>
पोर्टल स्पेसिफ़िकेशन पर अब भी काम चल रहा है.
एम्बेड करने के लिए इस्तेमाल किए जाने वाले अन्य एचटीएमएल एलिमेंट
वेब इतिहास में, कॉन्टेंट को एम्बेड करने के लिए कई एचटीएमएल एलिमेंट और एपीआई बनाए गए हैं. कुछ समय पहले तक, कई <frame> और एक <frameset> एलिमेंट का इस्तेमाल करके साइटें बनाना आम बात थी. कई <frameset> एलिमेंट वाली साइटें, पता बार में पैरंट पेज का यूआरएल दिखाती थीं. भले ही, कई अलग-अलग फ़्रेम का सोर्स कुछ भी हो. इस वजह से, साइट पर मौजूद कॉन्टेंट के लिंक शेयर करना मुश्किल हो गया. इन एपीआई को अब बंद कर दिया गया है.
एक समय था, जब Java <applet>
element जैसी प्लगिन टेक्नोलॉजी का इस्तेमाल, अन्य इस्तेमाल के उदाहरणों को कवर करने के लिए किया जाता था. बाद में, इसे <object> एलिमेंट से बदल दिया गया. इन दोनों एलिमेंट का इस्तेमाल, आम तौर पर Flash प्लगिन दिखाने के लिए किया जाता था. हालांकि, इनका इस्तेमाल अन्य एचटीएमएल एलिमेंट (आईफ़्रेम की तरह) दिखाने के लिए भी किया जाता था.
अन्य एलिमेंट, जैसे कि <canvas>, <audio>, <video>, और <svg> ने <object> और <applet>, दोनों एलिमेंट को पुराना कर दिया है.
हालांकि, <object> और <embed> को आधिकारिक तौर पर अब भी इस्तेमाल किया जा सकता है, लेकिन इन्हें इस्तेमाल न करना ही बेहतर है. खास तौर पर, इसलिए क्योंकि ये अजीब तरीके से काम करते हैं.
<applet> को 2017 में, एचटीएमएल की खास बातों से हटा दिया गया था.
नतीजा
मौजूदा iframe स्पेसिफ़िकेशन का इस्तेमाल करके, किसी भी वेबसाइट पर कॉन्टेंट को सुरक्षित तरीके से एम्बेड किया जा सकता है. सुरक्षा और स्टाइल को बेहतर बनाने के लिए, ज़्यादा एचटीएमएल एलिमेंट का सुझाव दिया गया है. इनमें <fencedframe> और <portal> शामिल हैं. हम फ़ेन्स्ड फ़्रेम के सुझाव पर हुई प्रोग्रेस के बारे में आपको अपडेट देते रहेंगे.