एम्बेड किया गया कॉन्टेंट, अन्य पेजों या साइटों का कॉन्टेंट शेयर करते समय, उपयोगकर्ताओं को अपनी साइट पर बनाए रखने का सबसे अच्छा तरीका है. यह एम्बेड किए गए ट्वीट जितना छोटा हो सकता है, जो 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 के कई प्रस्तावों का मकसद, तीसरे पक्ष की कुकी या ट्रैकिंग के अन्य तरीकों के बिना, क्रॉस-साइट इस्तेमाल के उदाहरणों को पूरा करना है. 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> एलिमेंट से बदल दिया गया. इन दोनों एलिमेंट का इस्तेमाल आम तौर पर फ़्लैश प्लग इन दिखाने के लिए किया जाता था. हालांकि, इनका इस्तेमाल iframes जैसे अन्य एचटीएमएल एलिमेंट दिखाने के लिए भी किया जाता था.
<canvas>, <audio>, <video>, और <svg> जैसे अन्य एलिमेंट की वजह से, <object> और <applet>, दोनों एलिमेंट अब काम के नहीं हैं.
<object> और <embed> को आधिकारिक तौर पर अब तक बंद नहीं किया गया है. हालांकि, इनका इस्तेमाल न करना ही बेहतर है. ऐसा इसलिए, क्योंकि इनमें कुछ अजीब व्यवहार होते हैं.
<applet> को 2017 में एचटीएमएल स्पेसिफ़िकेशन से हटा दिया गया था.
नतीजा
मौजूदा iframe के लिए तय की गई शर्तों का इस्तेमाल करके, किसी भी वेबसाइट पर कॉन्टेंट को सुरक्षित तरीके से जोड़ा जा सकता है. सुरक्षा और स्टाइल को बेहतर बनाने के लिए, <fencedframe> और <portal> के साथ-साथ कई अन्य एचटीएमएल एलिमेंट का सुझाव दिया गया है. हम फ़ेंस किए गए फ़्रेम के प्रस्ताव के बारे में, आगे की प्रोग्रेस के बारे में आपको बताते रहेंगे.