एम्बेड किया गया कॉन्टेंट, दूसरे पेजों या साइटों का कॉन्टेंट शेयर करने के दौरान, उपयोगकर्ताओं को आपकी साइट पर जोड़े रखने का सबसे अच्छा तरीका है. यह ट्वीट जितना छोटा हो सकता है, जो Twitter के स्टाइल और फ़ॉर्मैट में दिखता है. यह आपकी साइट पर एम्बेड की गई पूरी तरह से अलग साइट की तरह बड़ी हो सकती है. जैसे, एम्बेड की गई Shopify शॉप, जहां विज़िटर आपकी साइट को छोड़े बिना खरीदारी कर सकते हैं.
कॉन्टेंट को एम्बेड करते समय, यह ज़रूरी है कि हमारी साइटें सुरक्षित रहें.
डेवलपर के पास, वेबसाइट पर कॉन्टेंट एम्बेड करने के कई तरीके हैं. सबसे सामान्य तरीका, <iframe> का इस्तेमाल करना है. इसकी मदद से, किसी भी कॉन्टेंट को सिर्फ़ यूआरएल की मदद से अपनी साइट पर एम्बेड किया जा सकता है. iframe को ज़्यादा सुरक्षित बनाने के लिए, sandbox एट्रिब्यूट को पहले से ही जोड़ा जा सकता है.
इसके अलावा, सुझाए गए एचटीएमएल एलिमेंट का इस्तेमाल किया जा सकता है:
<fencedframe>को तीसरे पक्ष के कॉन्टेंट को एम्बेड करने के लिए, निजता को बनाए रखने के तरीके के तौर पर प्रस्तावित किया गया है.<portal>का सुझाव, पेज ट्रांज़िशन को ज़्यादा आसान बनाने के लिए दिया गया है.
एम्बेड किए गए कॉन्टेंट की सुरक्षा को बेहतर बनाने का तरीका जानने के लिए, आगे पढ़ें.
iframes की मदद से एम्बेड करना
Iframe का इस्तेमाल अलग-अलग तरह के कामों के लिए किया जा सकता है. जैसे, किसी संपर्क पेज पर मैप या फ़ॉर्म जोड़ना और विज्ञापन दिखाना.
<iframe src="https://example.com/maps"></iframe>
हर iframe का अपना ब्राउज़िंग कॉन्टेक्स्ट होता है. इसमें सेशन का इतिहास और दस्तावेज़ शामिल होता है. 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 के कई प्रस्तावों का मकसद, तीसरे पक्ष की कुकी या ट्रैकिंग के अन्य तरीकों के बिना, क्रॉस-साइट इस्तेमाल के उदाहरणों को पूरा करना है. कुछ प्राइवसी सैंडबॉक्स एपीआई के लिए, फ़ेंस किए गए फ़्रेम के अंदर रेंडर करने के लिए, कुछ दस्तावेज़ों की ज़रूरत पड़ सकती है.
उदाहरण के लिए, FLEDGE API विज्ञापन नीलामी के विजेता के लिए, फ़ेंस किया गया एक फ़्रेम बनाया जाएगा. FLEDGE API, ओपेक सोर्स और जगह से जुड़ा यूआरएन स्कीम उपलब्ध कराएगा. इसे फ़ेंस किए गए फ़्रेम में रेंडर किया जा सकता है. ओपेक सोर्स की मदद से, साइटें अपनी साइटों पर कॉन्टेंट दिखा सकती हैं. ऐसा करने के लिए, उन्हें साइट के मालिक को विज्ञापन सोर्स का यूआरएल नहीं बताना पड़ता.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
फ़ेंस किए गए फ़्रेम, iframes की जगह नहीं ले पाएंगे. आपको इनका इस्तेमाल करने की ज़रूरत नहीं है. फ़ेंस किए गए फ़्रेम का सुझाव, ज़्यादा निजी फ़्रेम के लिए दिया जाता है. इसका इस्तेमाल तब किया जाता है, जब एक ही पेज पर अलग-अलग टॉप-लेवल सेक्शन का डेटा दिखाना हो.
पोर्टल के साथ एम्बेड करें
पोर्टल (<portal>) एक ऐसा एचटीएमएल एलिमेंट है जिसे ब्राउज़िंग के अलग-अलग संदर्भ के साथ इस्तेमाल करने का सुझाव दिया गया है. इससे पेज ट्रांज़िशन का अनुभव बेहतर हो सकता है. पोर्टल, iframe जैसे कॉन्टेंट को एम्बेड करते हैं. हालांकि, उपयोगकर्ता पोर्टल के कोड को ऐक्सेस नहीं कर सकता. पोर्टल को सिर्फ़ देखा जा सकता है और उपयोगकर्ता उससे इंटरैक्ट नहीं कर सकते.
पोर्टल, एक पेज वाले ऐप्लिकेशन के आसान ट्रांज़िशन के साथ-साथ, कई पेज वाले ऐप्लिकेशन की कम जटिलता देते हैं. इन ट्रांज़िशन को ऐनिमेशन के साथ दिखाया जा सकता है, ताकि ब्राउज़र विंडो में कॉन्टेंट तुरंत बदल जाए.
<portal src="https://example.com/"></portal>
पोर्टल की खास बातें अब भी डेवलपमेंट के शुरुआती चरणों में हैं.
एम्बेड करने के लिए इस्तेमाल किए जाने वाले दूसरे एचटीएमएल एलिमेंट
वेब के इतिहास में, कॉन्टेंट को एम्बेड करने के लिए कई एचटीएमएल एलिमेंट का सुझाव दिया गया है और एपीआई बनाए गए हैं. कुछ समय के लिए, एक से ज़्यादा <frame> और एक <frameset> एलिमेंट वाली साइटें बनाना आम बात थी. कई <frameset> एलिमेंट वाली साइटों पर, पता बार में पैरंट पेज का यूआरएल दिखता है. भले ही, अलग-अलग फ़्रेम का सोर्स कुछ भी हो. इस वजह से, साइट पर कॉन्टेंट के लिंक शेयर करना मुश्किल हो गया. इन एपीआई को तब से बंद कर दिया गया है.
एक समय था, जब Java <applet>
एलिमेंट जैसी प्लग इन टेक्नोलॉजी का इस्तेमाल, इस्तेमाल के दूसरे उदाहरणों को कवर करने के लिए किया जाता था. इसे बाद में <object> एलिमेंट से बदल दिया गया. इन दोनों एलिमेंट का इस्तेमाल आम तौर पर फ़्लैश प्लगिन
दिखाने के लिए किया जाता था. हालांकि, इनका इस्तेमाल iframe के जैसे दूसरे एचटीएमएल एलिमेंट को दिखाने के लिए भी किया जाता था.
<canvas>, <audio>, <video>, और <svg> जैसे अन्य एलिमेंट की वजह से, <object> और <applet>, दोनों एलिमेंट अब काम के नहीं हैं.
<object> और <embed> को आधिकारिक तौर पर अब तक बंद नहीं किया गया है. हालांकि, इनका इस्तेमाल न करना ही बेहतर है. ऐसा इसलिए, क्योंकि इनमें कुछ अजीब व्यवहार होते हैं.
<applet> को 2017 में, एचटीएमएल स्पेसिफ़िकेशन से हटा दिया गया.
नतीजा
मौजूदा iframe के लिए तय की गई शर्तों का इस्तेमाल करके, किसी भी वेबसाइट पर कॉन्टेंट को सुरक्षित तरीके से जोड़ा जा सकता है. सुरक्षा और स्टाइल को बेहतर बनाने के लिए, <fencedframe> और <portal> के साथ-साथ कई अन्य एचटीएमएल एलिमेंट का सुझाव दिया गया है. फ़ेंस किए गए फ़्रेम के प्रस्ताव के बारे में, हम आगे भी अपडेट देते रहेंगे.