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