เปิดใช้งานชุดข้อจำกัดเพิ่มเติมสำหรับเนื้อหาใน iframe ด้วย HTML

แอตทริบิวต์ sandbox ของแท็ก <iframe> ใช้เพื่อเปิดใช้งานชุดข้อจำกัดเพิ่มเติม (extra restrictions) สำหรับเนื้อหาที่โหลดภายใน iframe ช่วยเพิ่มความปลอดภัยโดยป้องกันการทำงานที่อาจเป็นอันตราย

ค่าที่ใช้ได้ของ sandbox

สามารถใช้ค่าเดียวหรือรวมหลายค่าได้ โดยคั่นด้วยช่องว่าง:

• allow-scripts - อนุญาตให้รัน JavaScript
• allow-forms - อนุญาตการส่งฟอร์ม
• allow-same-origin - ให้เนื้อหาถูกจัดว่าเป็น same-origin
• allow-top-navigation - อนุญาตนำทางหน้าหลัก (top-level navigation)
• allow-popups - อนุญาต popup windows
• allow-modals - อนุญาต modal dialogs
• allow-popups-to-escape-sandbox - อนุญาต popup หลุดจาก sandbox
• allow-presentation - อนุญาต presentation API

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <!-- iframe ที่มี sandbox เต็มที่ (ปลอดภัยที่สุด) -->
  <iframe src="untrusted-content.html" sandbox>
    <p>เบราว์เซอร์ของคุณไม่รองรับ iframe</p>
  </iframe>
  
  <br><br>
  
  <!-- iframe ที่อนุญาตสคริปต์และฟอร์ม -->
  <iframe src="trusted-app.html" sandbox="allow-scripts allow-forms">
    <p>เบราว์เซอร์ของคุณไม่รองรับ iframe</p>
  </iframe>
</body>
</html>

กรณีใช้งานจริง

• ฝังเนื้อหาจากแหล่งภายนอกที่ไม่น่าเชื่อถือเต็มที่
• โฆษณาแบนเนอร์หรือวิดเจ็ตจากบุคคลที่สาม
• ระบบความคิดเห็น (comment systems) ภายนอก
• ตัวอย่างโค้ดที่ผู้ใช้อัปโหลด (code playgrounds)

แนวทางปฏิบัติที่ดีที่สุด

หลักการ Principle of Least Privilege - ให้สิทธิ์เฉพาะสิ่งที่จำเป็นจริงๆ เท่านั้น อย่าใช้ allow-scripts allow-same-origin พร้อมกัน เพราะจะทำให้ sandbox ไม่มีประสิทธิภาพ