เนื้อหาที่ฝังเป็นวิธีที่ดีที่สุดในการทำให้ผู้ใช้อยู่ในเว็บไซต์ของคุณต่อไป ขณะแชร์เนื้อหาจากหน้าเว็บหรือเว็บไซต์อื่นๆ ซึ่งอาจเล็กเท่ากับการฝังทวีตที่แสดงในสไตล์และรูปแบบของ Twitter ชิ้นงานอาจใหญ่เท่ากับเว็บไซต์แยกต่างหากที่ฝังอยู่ในเว็บไซต์ของคุณเอง เช่น ร้านค้า Shopify ที่ฝังไว้ ซึ่งผู้เข้าชมสามารถทำการซื้อได้โดยไม่ต้องออกจากเว็บไซต์
ปัจจุบันการรักษาความปลอดภัยของเว็บไซต์เมื่อฝังเนื้อหาเป็นเรื่องสำคัญยิ่งกว่าที่เคย
นักพัฒนาแอปฝังเนื้อหาในเว็บไซต์ได้หลายวิธี เทคนิคที่ใช้กันมากที่สุดคือการใช้ <iframe> ซึ่งช่วยให้คุณฝังเนื้อหาลงในเว็บไซต์ได้โดยใช้เพียง URL คุณสามารถเพิ่มแอตทริบิวต์ sandbox อยู่แล้วเพื่อให้ iframe ปลอดภัยยิ่งขึ้น
หรือจะใช้องค์ประกอบ HTML ที่แนะนำก็ได้ ดังนี้
<fencedframe>ได้รับการเสนอให้เป็นวิธีที่รักษาความเป็นส่วนตัวเพื่อฝังเนื้อหาของบุคคลที่สาม- เราขอแนะนำให้ใช้
<portal>เพื่อให้การเปลี่ยนหน้าเว็บเป็นไปอย่างราบรื่นยิ่งขึ้น
อ่านต่อเพื่อดูวิธีปรับปรุงความปลอดภัยของเนื้อหาที่ฝัง
ฝังด้วย iframe
คุณสามารถใช้ iframe สำหรับ Use Case ได้ทุกประเภท เช่น การเพิ่มแผนที่หรือแบบฟอร์มลงในหน้าติดต่อ และการแสดงโฆษณา
<iframe src="https://example.com/maps"></iframe>
IFrame แต่ละรายการมีบริบทการท่องเว็บของตัวเอง โดยมีประวัติเซสชันและเอกสารของตัวเอง บริบทที่ฝัง iframe เรียกว่าบริบทการท่องเว็บหลัก
เนื้อหาของบุคคลที่สามที่แสดงใน iframe สามารถโต้ตอบกับเว็บไซต์หลักได้ผ่าน postMessage() ซึ่งช่วยให้นักพัฒนาแอปส่งค่าที่กำหนดเองระหว่างบริบทการท่องเว็บได้ ผู้รับข้อความสามารถใช้ Listener เหตุการณ์ onmessage
เพื่อรับค่า
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
เพิ่มความปลอดภัยด้วยแอตทริบิวต์ sandbox
หากมีการใช้เนื้อหาที่เป็นอันตรายใน iframe ก็อาจมีการดําเนินการที่ไม่ตั้งใจ (เช่น การเรียกใช้ JavaScript หรือการส่งแบบฟอร์ม)
เพื่อหลีกเลี่ยงปัญหานี้ แอตทริบิวต์ sandbox จึงจํากัด API ที่เรียกใช้ได้ใน iframe และปิดใช้ฟีเจอร์ที่อาจเป็นอันตราย
<iframe src="https://example.com" sandbox></iframe>
Sandbox อาจทําให้ API บางรายการไม่พร้อมใช้งาน ซึ่งสําคัญต่อเนื้อหาที่ฝัง หากต้องการอนุญาต API ที่ปิดใช้ คุณสามารถเพิ่มอาร์กิวเมนต์ไปยังแอตทริบิวต์ sandbox ได้อย่างชัดเจน
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
ค่าที่เป็นไปได้สำหรับข้อกำหนด sandbox มีมากมาย เช่น allow-forms, allow-same-origin, allow-popups และอื่นๆ
นโยบายสิทธิ์
เมื่อมีการคิดค้นฟีเจอร์ที่มีประสิทธิภาพมากขึ้นสำหรับเว็บ นโยบายสิทธิ์จึงถูกสร้างขึ้นเพื่อจัดการสิทธิ์สำหรับฟีเจอร์ทั้งหมด นโยบายสิทธิ์ใช้ได้กับเว็บไซต์หลักและเนื้อหา iframe สิทธิ์ที่มอบให้กับเว็บไซต์หลักสามารถมอบให้กับ iframe ได้ด้วยโดยใช้แอตทริบิวต์ allow
<iframe src="https://example.com" allow="fullscreen"></iframe>
ฝังด้วยเฟรมที่มีการปิดกั้น
เฟรมที่มีขอบเขต (<fencedframe>) เป็นองค์ประกอบ HTML ที่เสนอสำหรับเนื้อหาที่ฝัง ซึ่งคล้ายกับ iframe เฟรมที่มีรั้วต่างจาก iframe เนื่องจากจะจํากัดการสื่อสารกับบริบทการฝังเพื่ออนุญาตให้เฟรมเข้าถึงข้อมูลข้ามเว็บไซต์ได้โดยไม่ต้องแชร์กับบริบทการฝัง ในทํานองเดียวกัน ข้อมูลจากบุคคลที่หนึ่งในหน้าของพร็อพเพอร์ตี้หลักจะแชร์กับเฟรมที่มีการกำหนดเขตไม่ได้
<fencedframe src="https://3rd.party.example"></fencedframe>
เฟรมที่มีรั้วล้อมเป็นข้อเสนอ Privacy Sandbox ที่แนะนําให้เว็บไซต์ระดับบนสุดแบ่งพาร์ติชันข้อมูล ข้อเสนอ Privacy Sandbox จำนวนมากมีเป้าหมายเพื่อตอบสนอง Use Case ข้ามเว็บไซต์โดยไม่ต้องใช้คุกกี้ของบุคคลที่สามหรือกลไกการติดตามอื่นๆ Privacy Sandbox API บางรายการอาจกำหนดให้ต้องเลือกเอกสารเพื่อแสดงผลภายในเฟรมที่มีขอบเขต
เช่น ระบบจะสร้างเฟรมที่มีรั้วล้อมไว้สำหรับผู้ชนะการประมูลโฆษณา FLEDGE API FLEDGE API จะให้แหล่งที่มาแบบทึบ ซึ่งเป็นรูปแบบ URN ที่ไม่ขึ้นอยู่กับตำแหน่ง ซึ่งสามารถแสดงผลภายในเฟรมที่มีการกำหนดเขต แหล่งที่มาแบบทึบช่วยให้เว็บไซต์แสดงเนื้อหาในเว็บไซต์ได้โดยไม่ต้องเปิดเผย URL แหล่งที่มาของโฆษณาต่อเจ้าของเว็บไซต์
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
เฟรมที่มีขอบเขตจะไม่มาแทนที่ iframe คุณไม่จำเป็นต้องใช้ เราขอแนะนําเฟรมที่มีรั้วล้อมสําหรับเฟรมที่ส่วนตัวมากขึ้นสําหรับการใช้งานเมื่อต้องแสดงข้อมูลจากพาร์ติชันระดับบนสุดที่แตกต่างกันในหน้าเดียวกัน
ฝังด้วยพอร์ทัล
พอร์ทัล (<portal>) คือองค์ประกอบ HTML ที่เสนอซึ่งมีบริบทการท่องเว็บอิสระ ซึ่งอาจปรับปรุงประสบการณ์การเปลี่ยนหน้าเว็บ พอร์ทัลฝังเนื้อหา เช่น iframe แต่ผู้ใช้ไม่สามารถเข้าถึงโค้ดของพอร์ทัลได้ พอร์ทัลเป็นแบบดูอย่างเดียวและผู้ใช้ไม่สามารถโต้ตอบกับพอร์ทัลได้
พอร์ทัลมีความซับซ้อนต่ำของแอปพลิเคชันหลายหน้าพร้อมด้วยการเปลี่ยนผ่านที่ราบรื่นของแอปพลิเคชันหน้าเว็บเดียว ทรานซิชันเหล่านี้สามารถเคลื่อนไหวได้ ซึ่งจะแทนที่เนื้อหาในหน้าต่างเบราว์เซอร์อย่างรวดเร็ว
<portal src="https://example.com/"></portal>
ข้อกำหนดของพอร์ทัลยังอยู่ในขั้นเริ่มต้นของการพัฒนา
องค์ประกอบ HTML อื่นๆ ที่ใช้สำหรับการฝัง
ตลอดประวัติศาสตร์ของเว็บ มีการเสนอองค์ประกอบ HTML และสร้าง API จำนวนมากเพื่อฝังเนื้อหา ในช่วงหนึ่ง การสร้างเว็บไซต์ที่มีองค์ประกอบ <frame> หลายรายการและ <frameset> เป็นเรื่องปกติ เว็บไซต์ที่มีองค์ประกอบ <frameset> หลายรายการจะแสดง URL ของหน้าหลักในแถบที่อยู่ โดยไม่คำนึงถึงแหล่งที่มาของเฟรมแต่ละเฟรม ซึ่งทำให้แชร์ลิงก์ไปยังเนื้อหาภายในเว็บไซต์ได้ยาก เราเลิกใช้งาน API เหล่านี้แล้ว
นอกจากนี้ ยังมีการใช้เทคโนโลยีปลั๊กอิน เช่น <applet>
องค์ประกอบ Java เพื่อครอบคลุมกรณีการใช้งานอื่นๆ ด้วย ต่อมาองค์ประกอบ <object> ได้เข้ามาแทนที่ โดยทั่วไปแล้ว องค์ประกอบทั้ง 2 รายการนี้ใช้เพื่อแสดงปลั๊กอิน Flash แต่ก็ยังใช้เพื่อแสดงองค์ประกอบ HTML อื่นๆ ด้วย (คล้ายกับ iframe)
องค์ประกอบอื่นๆ เช่น <canvas>, <audio>, <video> และ <svg> ทำให้องค์ประกอบทั้ง <object> และ <applet> ล้าสมัย
แม้ว่า <object> และ <embed> จะยังไม่เลิกใช้งานอย่างเป็นทางการ แต่คุณควรหลีกเลี่ยงการใช้ 2 รายการนี้ โดยเฉพาะเนื่องจากมีลักษณะการทำงานที่แปลก
<applet> ถูกนำออกจากข้อกำหนด HTML ในปี 2017
บทสรุป
คุณสามารถฝังเนื้อหาลงในเว็บไซต์ใดก็ได้อย่างปลอดภัยโดยใช้ข้อกำหนด iframe ที่มีอยู่ มีการนำองค์ประกอบ HTML อื่นๆ มาใช้ เช่น <fencedframe> และ <portal> เพื่อปรับปรุงความปลอดภัยและรูปแบบ เราจะแชร์ความคืบหน้าเกี่ยวกับข้อเสนอเฟรมที่มีรั้วล้อมต่อไปเรื่อยๆ