เนื้อหาที่ฝังเป็นวิธีที่ดีที่สุดเพื่อให้ผู้ใช้อยู่ในเว็บไซต์ต่อไป ในขณะเดียวกันก็แชร์เนื้อหาจากหน้าเว็บหรือเว็บไซต์อื่นๆ ซึ่งอาจเป็นขนาดเล็กเท่าๆ กับทวีตที่ฝัง ซึ่งจะแสดงในรูปแบบและรูปแบบของ Twitter อาจมีขนาดใหญ่เท่าๆ กับที่เว็บไซต์แยกต่างหากทั้งหมดฝังอยู่ในเว็บไซต์ของคุณเอง เช่น ร้านค้า Shopify ที่ฝังอยู่ภายในที่ซึ่งผู้เข้าชมสามารถทำการซื้อโดยไม่ต้องออกจากเว็บไซต์
สิ่งที่เราให้ความสำคัญมากกว่าที่เคยคือการทำให้เว็บไซต์ของเรายังคงปลอดภัยเมื่อเราฝังเนื้อหา
นักพัฒนาแอปสามารถฝังเนื้อหาในเว็บไซต์ได้หลายวิธี เทคนิคที่ใช้กันมากที่สุดคือการใช้ <iframe> ซึ่งช่วยให้คุณฝังเนื้อหาในเว็บไซต์โดยใช้เพียง URL ได้ ทั้งนี้คุณเพิ่มแอตทริบิวต์ sandbox เพื่อทำให้ iframe ปลอดภัยยิ่งขึ้นได้อยู่แล้ว
หรือคุณจะใช้องค์ประกอบ HTML ที่เสนอก็ได้ ดังนี้
- มีการเสนอ
<fencedframe>เพื่อฝังเนื้อหาของบุคคลที่สามในลักษณะที่รักษาความเป็นส่วนตัว - มีการเสนอ
<portal>เพื่อให้การเปลี่ยนหน้าเป็นไปอย่างราบรื่นยิ่งขึ้น
อ่านต่อเพื่อดูวิธีเพิ่มความปลอดภัยให้กับเนื้อหาที่ฝัง
ฝังด้วย iframe
คุณสามารถใช้ iframe กับกรณีการใช้งานทุกประเภท เช่น การเพิ่มแผนที่หรือแบบฟอร์มลงในหน้าติดต่อและการแสดงโฆษณา
<iframe src="https://example.com/maps"></iframe>
iframe แต่ละรายการมีบริบทการท่องเว็บของตัวเอง โดยมีประวัติเซสชันและเอกสารของตัวเอง บริบทที่ฝัง iframe ไว้เรียกว่าบริบทการท่องเว็บparent
เนื้อหาของบุคคลที่สามที่แสดงใน 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>
แซนด์บ็อกซ์อาจทําให้ API บางรายการที่สําคัญต่อเนื้อหาที่ฝังไว้ไม่พร้อมใช้งาน หากต้องการอนุญาต API ที่ปิดใช้ไปแล้ว ให้เพิ่มอาร์กิวเมนต์ลงในแอตทริบิวต์แซนด์บ็อกซ์อย่างชัดแจ้ง
<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>
Fenced Frames เป็นข้อเสนอ Privacy Sandbox ที่แนะนำว่าเว็บไซต์ระดับบนสุดควรแบ่งพาร์ติชันข้อมูล ข้อเสนอ Privacy Sandbox จำนวนมากมีเป้าหมายเพื่อตอบสนองกรณีการใช้งานข้ามเว็บไซต์โดยไม่มีคุกกี้ของบุคคลที่สามหรือกลไกการติดตามอื่นๆ 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> มาแทนที่ องค์ประกอบทั้งสองนี้มักใช้เพื่อแสดงปลั๊กอิน Flash
แต่ใช้เพื่อแสดงองค์ประกอบ HTML อื่นๆ ด้วย (คล้ายกับ iframe)
องค์ประกอบอื่นๆ เช่น <canvas>, <audio>, <video> และ <svg> แสดงผลทั้งองค์ประกอบ <object> และ <applet> ที่ล้าสมัย
แม้ว่า <object> และ <embed> จะยังไม่ได้เลิกใช้งานอย่างเป็นทางการ แต่เราขอแนะนำให้หลีกเลี่ยง โดยเฉพาะเนื่องจากมีลักษณะการทำงานที่แปลกๆ
<applet> ถูกนำออกจากข้อกำหนด HTML ในปี 2017
บทสรุป
คุณจะฝังเนื้อหาลงในเว็บไซต์ต่างๆ ได้อย่างปลอดภัยโดยใช้ข้อกำหนดของ iframe ที่มีอยู่ มีการเสนอองค์ประกอบ HTML เพิ่มเติม ซึ่งรวมถึง <fencedframe> และ <portal> เพื่อปรับปรุงความปลอดภัยและสไตล์ เราจะมาแชร์ความคืบหน้าในข้อเสนอเฟรมที่ล้อมรั้วอย่างต่อเนื่อง
รูปภาพหลักโดย Jackson So