เนื้อหาที่ฝังเป็นวิธีที่ดีที่สุดในการดึงดูดให้ผู้ใช้อยู่ในเว็บไซต์ของคุณขณะแชร์เนื้อหาจากหน้าเว็บหรือเว็บไซต์อื่นๆ ซึ่งอาจมีขนาดเล็กเพียงแค่ทวีตที่ฝัง ซึ่งแสดงในรูปแบบและสไตล์ของ Twitter ซึ่งอาจมีขนาดใหญ่เท่ากับเว็บไซต์ที่แยกต่างหากโดยสมบูรณ์ซึ่งฝังอยู่ในเว็บไซต์ของคุณเอง เช่น ร้านค้า Shopify ที่ฝังอยู่ ซึ่งผู้เข้าชมสามารถทำการซื้อได้โดยไม่ต้องออกจากเว็บไซต์ของคุณ
ปัจจุบันการรักษาความปลอดภัยของเว็บไซต์เมื่อฝังเนื้อหาเป็นสิ่งสำคัญมากกว่าที่เคย
นักพัฒนาแอปสามารถฝังเนื้อหาในเว็บไซต์ได้หลายวิธี เทคนิคที่พบบ่อยที่สุดคือการใช้ <iframe> ซึ่งช่วยให้คุณฝังเนื้อหาใดก็ได้ลงในเว็บไซต์โดยใช้เพียง URL คุณเพิ่มแอตทริบิวต์ sandbox เพื่อให้ iframe ปลอดภัยยิ่งขึ้นได้อยู่แล้ว
หรือคุณจะใช้องค์ประกอบ HTML ที่เสนอต่อไปนี้ก็ได้
<fencedframe>เป็นวิธีฝังเนื้อหาของบุคคลที่สามที่รักษาความเป็นส่วนตัว<portal>ได้รับการเสนอเพื่อการเปลี่ยนหน้าเว็บที่ราบรื่นยิ่งขึ้น
อ่านต่อเพื่อดูวิธีปรับปรุงความปลอดภัยของเนื้อหาที่ฝัง
ฝังด้วย iframe
คุณสามารถใช้ iframe สำหรับ Use Case ทุกประเภท เช่น การเพิ่มแผนที่หรือแบบฟอร์ม ลงในหน้าติดต่อ และการแสดงโฆษณา
<iframe src="https://example.com/maps"></iframe>
แต่ละ iframe มีบริบทการเรียกดูของตัวเอง พร้อมประวัติเซสชันและdocument ของตัวเอง บริบท ที่ฝัง 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 จะจำกัด API ที่เรียกใช้ได้ใน iframe และปิดใช้ฟีเจอร์ที่อาจเป็นอันตรายเพื่อหลีกเลี่ยงปัญหานี้
<iframe src="https://example.com" sandbox></iframe>
Sandbox อาจทำให้ API บางอย่างที่สำคัญต่อเนื้อหาที่ฝังไม่พร้อมใช้งาน หากต้องการอนุญาต API ที่ปิดใช้ คุณสามารถเพิ่มอาร์กิวเมนต์ลงในแอตทริบิวต์ แซนด์บ็อกซ์อย่างชัดเจนได้
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
sandbox specification
มีค่าที่เป็นไปได้หลายค่า
รวมถึง allow-forms, allow-same-origin, allow-popups และ
อื่นๆ
นโยบายสิทธิ์
เมื่อมีการพัฒนาฟีเจอร์ที่มีประสิทธิภาพมากขึ้นเรื่อยๆ สำหรับเว็บ เราจึงสร้างนโยบายสิทธิ์ขึ้นมาเพื่อจัดการสิทธิ์สำหรับฟีเจอร์ทั้งหมด นโยบายสิทธิ์
สามารถใช้กับเว็บไซต์หลักและเนื้อหา iframe ได้ สิทธิ์ที่ให้แก่เว็บไซต์หลักยังให้แก่ iframe ได้ด้วยโดยใช้แอตทริบิวต์ allow
<iframe src="https://example.com" allow="fullscreen"></iframe>
ฝังด้วยเฟรมที่มีการปิดกั้น
Fenced Frame (<fencedframe>) เป็นองค์ประกอบ HTML ที่เสนอสำหรับเนื้อหาที่ฝัง ซึ่งคล้ายกับ iframe
Fenced Frame ต่างจาก iframe ตรงที่จำกัดการสื่อสารกับบริบทการฝังเพื่อ
อนุญาตให้เฟรมเข้าถึงข้อมูลข้ามเว็บไซต์ได้โดยไม่ต้องแชร์กับบริบทการฝัง
ในทำนองเดียวกัน ระบบจะไม่แชร์ข้อมูลจากบุคคลที่หนึ่งในหน้าของหน้าเว็บหลักกับ
เฟรมที่จำกัด
<fencedframe src="https://3rd.party.example"></fencedframe>
เฟรมที่จำกัดขอบเขตเป็นข้อเสนอของ Privacy Sandbox ซึ่งแนะนำให้เว็บไซต์ระดับบนสุดแบ่งพาร์ติชันข้อมูล ข้อเสนอ Privacy Sandbox หลายข้อมีเป้าหมายเพื่อตอบสนองกรณีการใช้งานข้ามเว็บไซต์โดยไม่ต้องใช้คุกกี้ของบุคคลที่สามหรือกลไกการติดตามอื่นๆ Privacy Sandbox API บางรายการอาจต้องใช้ เอกสารบางรายการเพื่อแสดงผลภายใน Fenced Frame
เช่น ระบบจะสร้างกรอบที่จำกัดสำหรับผู้ชนะการประมูลโฆษณา FLEDGE API FLEDGE API จะมีแหล่งที่มาที่ไม่โปร่งใส รูปแบบ URN ที่ไม่ขึ้นอยู่กับตำแหน่ง ซึ่งแสดงผลได้ภายในกรอบที่จำกัด แหล่งที่มาแบบทึบแสงช่วยให้เว็บไซต์แสดงเนื้อหาในเว็บไซต์ของตนได้โดยไม่ต้องเปิดเผย URL แหล่งที่มาของโฆษณาต่อเจ้าของเว็บไซต์
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
ท้ายที่สุดแล้ว Fenced Frame จะไม่มาแทนที่ 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 แท็กนี้ โดยเฉพาะอย่างยิ่งเนื่องจากแท็กทั้ง 2 มีลักษณะการทำงานที่แปลกประหลาด
<applet> ถูกนำออกจากข้อกำหนด HTML ในปี 2017
บทสรุป
คุณฝังเนื้อหาลงในเว็บไซต์ได้อย่างปลอดภัยโดยใช้ข้อกำหนด iframe ที่มีอยู่
มีการเสนอองค์ประกอบ HTML เพิ่มเติม ซึ่งรวมถึง <fencedframe> และ <portal> เพื่อปรับปรุงด้านความปลอดภัยและสไตล์
เราจะแจ้งความคืบหน้าเกี่ยวกับข้อเสนอ Fenced Frame ให้ทราบต่อไป