องค์ประกอบ iframe: src และ sandbox

องค์ประกอบ <iframe> ใช้ฝังเอกสาร HTML อื่นไว้ภายในหน้าปัจจุบัน iframe แต่ละรายการมีบริบทการเรียกดู DOM และขอบเขตการทำงานของ JavaScript เป็นของตัวเอง เนื้อหาภายใน iframe ไม่สามารถเข้าถึง DOM ของหน้าหลักได้หากไม่ได้รับอนุญาตอย่างชัดเจน

กำหนดแอตทริบิวต์ src เป็น URL ที่ต้องการฝัง: <iframe src="https://example.com" width="800" height="600"> iframe จะสร้างบริบทการเรียกดูใหม่ แอตทริบิวต์ title จำเป็นสำหรับการเข้าถึงได้: title="Embedded map"

sandbox ใช้ข้อจำกัดกับเนื้อหาใน iframe โดยค่าเริ่มต้นจะปิดใช้สคริปต์ แบบฟอร์ม หน้าต่างป๊อปอัป และปลั๊กอิน เพิ่มสิทธิ์เฉพาะที่ต้องการเพื่อเปิดความสามารถเหล่านั้นกลับมา: sandbox="allow-scripts allow-same-origin"

allow-scripts: เปิดใช้ JavaScript, allow-same-origin: อนุญาตให้ถือว่า iframe มาจากต้นทางเดียวกัน (จำเป็นสำหรับการเข้าถึง localStorage), allow-forms: เปิดใช้การส่งแบบฟอร์ม, allow-popups: อนุญาตให้ใช้ window.open() ควรให้เฉพาะสิทธิ์ขั้นต่ำที่จำเป็น

iframe ข้ามต้นทางไม่สามารถเข้าถึง DOM ของหน้าหลักได้ โดย parent.document จะทำให้เกิดข้อผิดพลาดด้านความปลอดภัย การสื่อสารระหว่างเฟรมข้ามต้นทางใช้ postMessage: iframe.contentWindow.postMessage(data, origin)

ส่งข้อความจากหน้าหลักไปยัง iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com") ภายใน iframe ให้รอฟังข้อความด้วย: window.addEventListener("message", handler) ตรวจสอบ event.origin ทุกครั้งก่อนประมวลผล

loading="lazy" บน iframe จะเลื่อนการโหลดออกไปจนกว่า iframe จะอยู่ใกล้วิวพอร์ต ช่วยลดเวลาโหลดหน้าเริ่มต้น เหมาะสำหรับแผนที่ วิดีโอที่ฝังไว้ และวิดเจ็ตโซเชียลมีเดียที่อยู่ถัดลงไปจากส่วนที่มองเห็นและยังไม่จำเป็นต้องแสดงทันที

ไอเฟรมแต่ละรายการโหลดเอกสาร HTML, CSS, JavaScript และทรัพยากรประกอบแยกกัน ซึ่งใช้ทรัพยากรอย่างมาก หลีกเลี่ยงการใช้ไอเฟรมกับเนื้อหาที่สามารถฝังเป็นส่วนย่อยได้ ใช้การโหลดแบบช้ากับไอเฟรมที่อยู่ต่ำกว่าส่วนที่มองเห็น พิจารณารูปแบบฉากบังหน้า (แสดงตัวแทน แล้วโหลดเมื่อคลิก)

ควบคุมพฤติกรรมการเลื่อนของไอเฟรม: scrolling="no" จะปิดแถบเลื่อน (เลิกใช้แล้ว ควรใช้ CSS overflow: hidden กับไอเฟรม) แนวทางสมัยใหม่คือกำหนดความสูงของไอเฟรมให้ตรงกับความสูงของเนื้อหา เพื่อไม่ต้องใช้แถบเลื่อนภายใน

แอตทริบิวต์การอนุญาตมอบคุณลักษณะของนโยบายสิทธิ์ให้ไอเฟรม: allow="camera; microphone; fullscreen" ทำให้ไอเฟรมร้องขอการเข้าถึงกล้อง การเข้าถึงไมโครโฟน และส่วนต่อประสานโปรแกรมเต็มหน้าจอได้ แม้ต้นทางของเอกสารแม่จะไม่ได้ใช้คุณลักษณะเหล่านี้

YouTube และแผนที่กูเกิลมีโค้ดสำหรับฝังไอเฟรมให้ใช้งาน โดยมีแอตทริบิวต์การอนุญาตสำหรับโหมดเต็มหน้าจอและการเล่นอัตโนมัติ ควรเพิ่ม title="Video title" เสมอเพื่อให้โปรแกรมอ่านหน้าจอเข้าถึงได้ แอตทริบิวต์แซนด์บ็อกซ์มักไม่ได้เพิ่มมาในโค้ดฝังจากบุคคลที่สาม ตรวจสอบเอกสารของผู้ให้บริการเพื่อดูคำแนะนำด้านความปลอดภัย

แอตทริบิวต์แซนด์บ็อกซ์จะทำอะไรกับไอเฟรมเป็นค่าเริ่มต้นเมื่อไม่กำหนดค่าใด ๆ

ไอเฟรมใช้ฝังเอกสารภายนอกในบริบทการเรียกดูที่แยกออกจากกัน แอตทริบิวต์แซนด์บ็อกซ์จะจำกัดความสามารถของไอเฟรม จึงควรมอบเฉพาะสิทธิ์ขั้นต่ำที่จำเป็น postMessage ช่วยให้สื่อสารข้ามต้นทางได้อย่างปลอดภัย การโหลดแบบช้าจะเลื่อนต้นทุนด้านทรัพยากรของไอเฟรมที่อยู่ต่ำกว่าส่วนที่มองเห็นออกไป แอตทริบิวต์การอนุญาตมอบคุณลักษณะของนโยบายสิทธิ์ให้เนื้อหาฝังจากบุคคลที่สามที่เชื่อถือได้