คุณลักษณะด้านความปลอดภัยและการออกแบบสำหรับ IFRAME
องค์ประกอบช่วยให้คุณสามารถฝังเว็บเพจอื่น ๆ ลงในเว็บเพจของคุณได้โดยตรง แต่เมื่อ ใช้ iframes มีประเด็นด้านความปลอดภัยและการออกแบบบางอย่างที่ไม่ได้ระบุไว้ใน HTML 4.01 HTML5 นำแอตทริบิวต์นี้มาใช้ใหม่ 3 องค์ประกอบเพื่อช่วยแก้ปัญหาดังกล่าว:
แอ็ตทริบิวต์ sandbox
แอตทริบิวต์ sandbox ขององค์ประกอบ IFRAME เป็นคุณลักษณะด้านความปลอดภัยที่มีประโยชน์มากของ iframe เมื่อคุณวางไว้ในองค์ประกอบ IFRAME คุณจะแนะนำให้เอเจนต์ผู้ใช้ไม่อนุญาตคุณลักษณะที่อาจทำให้เกิดความเสี่ยงด้านความปลอดภัยแก่ไซต์และผู้ใช้ของไซต์
ตัวอย่างเช่น:
บอกเบราว์เซอร์ว่าไม่อนุญาตให้คุณลักษณะทั้งหมดที่อาจมีความเสี่ยงด้านความปลอดภัย โดยเฉพาะปลั๊กอินไม่ได้รับอนุญาต ไม่สามารถส่งแบบฟอร์มได้ Sscripts จะไม่ทำงานและไม่อนุญาตการเชื่อมโยงภายนอก IFRAME สุดท้ายไม่อนุญาตให้เข้าถึงคุกกี้ที่เก็บข้อมูลในเครื่องและหน้าอื่น ๆ ในโดเมนเดียวกัน (ต้นทาง)
จากนั้นใช้ค่าคำหลักของ Sandbox คุณสามารถเปิดใช้งานคุณลักษณะบางอย่างได้ คำหลักเหล่านี้คือ
- อนุญาต - ฟอร์ม - อนุญาตให้ส่งฟอร์ม
- allow-same-origin- อนุญาตให้เข้าถึงเนื้อหาเช่นคุกกี้จากโดเมนต้นทางเดียวกัน
- allow-scripts อนุญาตให้สคริปต์ทำงานใน IFRAME นี้
- allow-top-navigation- อนุญาตให้ลิงก์ IFRAME และสคริปต์ไปยังเป้าหมาย _top
ไม่ควรตั้งทั้งอนุญาตสคริปต์และอนุญาต - คำหลักที่มาเดียวกันใน IFRAME เดียวกัน หากทำเช่นนี้หน้าฝังตัวจะสามารถลบแอตทริบิวต์ sandbox ออกได้อย่างสมบูรณ์โดยไม่ให้เกิดประโยชน์ด้านความปลอดภัยใด ๆ
แอตทริบิวต์ srcdoc
แอ็ตทริบิวต์ srcdoc เป็นแอ็ตทริบิวต์ที่ช่วยให้นักออกแบบเว็บสามารถควบคุม iframes รวมทั้งความปลอดภัยมากขึ้นได้ แทนที่จะเชื่อมโยงไปยังเว็บเพจที่ URL อื่นนักออกแบบเว็บไซต์จะวาง HTML ไว้ใน IFRAME ภายในแอตทริบิวต์ srcdoc
ตอนแรกคุณอาจจะคิดว่า "วิธีนี้แตกต่างจากการใส่ HTML ลง ในเพจ" และในบางวิธีก็ไม่แตกต่างกันอย่างมาก
แต่คุณต้องระลึกถึงหนึ่งในหน้าที่ขององค์ประกอบ IFRAME ซึ่งจะเก็บข้อมูลที่ไม่น่าเชื่อถือแยกจากส่วนที่เหลือของไซต์
การวาง HTML ที่สร้างขึ้นโดยแหล่งที่มาที่ไม่น่าเชื่อถือเช่นแบบฟอร์มลงใน IFRAME คุณสามารถ "แซนด์บ็อกซ์" เนื้อหาที่ไม่น่าเชื่อถือและยังคงแสดงบนหน้าเว็บ ความคิดเห็นของ Blog เป็นตัวอย่าง บล็อกส่วนใหญ่มีเพียงจำนวน จำกัด ที่ผู้แสดงความคิดเห็นในแท็ก HTML สามารถใช้ในความคิดเห็นได้ แต่โดยการใส่ความคิดเห็นเหล่านั้นใน IFRAME แบบ sandboxed โดยใช้แอ็ตทริบิวต์ srcdoc ความคิดเห็นจะมีประสิทธิภาพมากขึ้นในขณะที่ยังคงปกป้องไซต์โดยรวม
ความปลอดภัยและ Iframes
แอตทริบิวต์สองข้อดังกล่าวให้การรักษาความปลอดภัยสำหรับองค์ประกอบ IFRAME ของคุณ แต่ไม่ได้เป็นหลักฐานยืนยันไซต์ที่เป็นอันตรายทั้งหมด หากไซต์ที่เป็นอันตรายสามารถโน้มน้าวให้ผู้ใช้เข้าถึงเนื้อหาที่เป็นปฏิปักษ์โดยตรง (เช่นพิมพ์ URL ลงในเบราว์เซอร์) ระบบจะยังสามารถโจมตีได้
ถ้าเป็นไปได้ควรตั้งเนื้อหาที่อยู่ใน IFRAME แบบ sandbox เป็นแบบ MIME แบบ text / html-sandboxed
แอตทริบิวต์ที่ราบรื่น
แอตทริบิวต์แบบไม่มีรอยต่อคือแอตทริบิวต์แบบบูลีนซึ่งบอกให้เบราว์เซอร์แสดง IFRAME ราวกับว่ามันเป็นส่วนหนึ่งของเอกสารหลัก หากคุณต้องการให้ IFRAME ของคุณแสดงต่อเนื่องเพียงใส่แอตทริบิวต์นี้ในองค์ประกอบ:
แต่การทำให้ IFRAME ราบรื่นไม่ใช่เพียงแค่รูปลักษณ์ก็เป็นวิธีที่เพจโต้ตอบกับเฟรม ตัวอย่างเช่น:
- ลิงก์ใน IFRAME จะเปิดขึ้นใน หน้าต่างหลัก เว้นแต่หน้า IFRAME จะมีชุดเป้าหมาย _SELF
- CSS ใน IFRAME จะถูกเพิ่มลงในน้ำตกของเอกสารทั้งหมด
- องค์ประกอบรากของหน้า IFRAME ถือว่าเป็นลูกของ IFRAME
- ความกว้างและความสูงของ IFRAME มีการตั้งค่าในแบบเดียวกับที่จะตั้งค่า องค์ประกอบระดับบล็อคอื่น ๆ
- เมื่อมีการดูเอกสารหลักโดยเครื่องมือการแสดงคำพูดเช่นโปรแกรมอ่านหน้าจอ IFRAME จะอ่านได้โดยไม่ต้องประกาศเป็นเอกสารแยกต่างหาก
- สคริปต์ใด ๆ ในเอกสารหลักจะส่งผลต่อเอกสาร IFRAME ในลักษณะเดียวกัน ตัวอย่างเช่นหากสคริปต์ระบุเฟรมทั้งหมดบนหน้าเว็บลิงก์ใน IFRAME จะแสดงด้วย
กล่าวอีกนัยหนึ่งแอ็ตทริบิวต์ไร้รอยต่อทำได้มากกว่าเพียงแค่เอาเส้นขอบออกจาก IFRAME หากคุณต้องการกำหนด IFRAME ให้ราบรื่นคุณควรตรวจสอบเนื้อหาให้มากเพื่อไม่ให้เกิดความเสี่ยงด้านความปลอดภัยต่อเว็บไซต์ของคุณโดยการฝังไซต์ที่เป็นอันตราย