Iframe - การฝังเนื้อหาจากภายนอก

ในโลกของการพัฒนาเว็บไซต์ บางครั้งเราต้องการนำเนื้อหาจากเว็บไซต์อื่นมาแสดงบนหน้าเว็บของเราเอง ไม่ว่าจะเป็นวิดีโอจาก YouTube, แผนที่จาก Google Maps หรือแม้แต่หน้าเว็บทั้งหน้าจากเว็บไซต์อื่น ๆ นี่คือที่มาของ <iframe> (Inline Frame) ซึ่งเป็นแท็ก HTML ที่ช่วยให้เราสามารถฝังเนื้อหาภายนอกลงในหน้าเว็บของเราได้อย่างง่ายดาย

Iframe คืออะไร?

<iframe> เป็นแท็ก HTML ที่สร้างพื้นที่สี่เหลี่ยมผืนผ้าบนหน้าเว็บของเรา ซึ่งพื้นที่นี้จะถูกใช้เพื่อแสดงเนื้อหาจากแหล่งอื่น โดยเนื้อหาที่แสดงอาจเป็นหน้าเว็บ, วิดีโอ, แผนที่ หรืออะไรก็ได้ที่สามารถแสดงผลในเบราว์เซอร์ได้

การใช้งาน Iframe

การใช้งาน <iframe> นั้นค่อนข้างตรงไปตรงมา สิ่งที่เราต้องทำคือระบุแหล่งที่มาของเนื้อหาที่ต้องการฝังลงใน attribute src ของแท็ก <iframe>

การใช้ attribute 'src'

Attribute src (Source) เป็น attribute ที่สำคัญที่สุดของแท็ก <iframe> เพราะมันระบุ URL ของเนื้อหาที่เราต้องการฝัง

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

ตัวอย่างข้างบนเป็นการฝังวิดีโอจาก YouTube โดย URL ที่ระบุใน src เป็น URL ของวิดีโอในรูปแบบ embed ซึ่ง YouTube และผู้ให้บริการวิดีโอรายอื่น ๆ มักจะเตรียม URL นี้ไว้ให้โดยเฉพาะสำหรับการฝังวิดีโอ

ตัวอย่างการฝังแผนที่ Google Maps

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.392695507562!2d100.5652365743042!3d13.759667297815864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29e6861d33741%3A0xf00f94e9f4295989!2sSiam%20Paragon!5e0!3m2!1sen!2sth!4v1678886261134!5m2!1sen!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Google Maps ก็มีฟังก์ชันการฝังแผนที่เช่นกัน โดยเราสามารถปรับแต่งแผนที่ที่ต้องการ แล้วคัดลอกโค้ด <iframe> ที่ Google Maps สร้างให้มาใส่ในหน้าเว็บของเราได้เลย

การกำหนดขนาดของ Iframe

เมื่อเราฝังเนื้อหาลงใน <iframe> เราจำเป็นต้องกำหนดขนาดของ <iframe> เพื่อให้เนื้อหาที่ฝังแสดงผลได้อย่างเหมาะสม เราสามารถกำหนดขนาดของ <iframe> ได้ 2 วิธีหลัก ๆ คือ

• Attribute width และ height: เป็นวิธีที่ง่ายที่สุด โดยเราสามารถกำหนดความกว้างและความสูงของ <iframe> เป็นค่าพิกเซล (px) ได้โดยตรง
• CSS: เราสามารถใช้ CSS เพื่อกำหนดขนาดของ <iframe> ได้เช่นกัน วิธีนี้จะทำให้เราสามารถปรับแต่งขนาดของ <iframe> ได้อย่างยืดหยุ่นมากขึ้น เช่น กำหนดขนาดเป็นเปอร์เซ็นต์ (%) หรือใช้หน่วยวัดอื่น ๆ

ตัวอย่างการกำหนดขนาดด้วย attribute width และ height

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

ในตัวอย่างนี้ เรากำหนดความกว้างของ <iframe> เป็น 560 พิกเซล และความสูงเป็น 315 พิกเซล

ตัวอย่างการกำหนดขนาดด้วย CSS

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" style="width: 100%; height: 315px;"></iframe>

ในตัวอย่างนี้ เรากำหนดความกว้างของ <iframe> เป็น 100% ซึ่งหมายความว่า <iframe> จะมีความกว้างเท่ากับความกว้างของ container ที่มันอยู่ ส่วนความสูงเรากำหนดเป็น 315 พิกเซล

ความปลอดภัยของ Iframe

การใช้ <iframe> อาจนำมาซึ่งความเสี่ยงด้านความปลอดภัย หากเราไม่ระมัดระวัง เพราะ <iframe> สามารถถูกใช้เพื่อโจมตีเว็บไซต์ของเราได้ เช่น

• Clickjacking: เป็นเทคนิคที่ผู้โจมตีซ่อน <iframe> ที่มีเนื้อหาอันตรายไว้ใต้ปุ่มหรือลิงก์บนหน้าเว็บของเรา เมื่อผู้ใช้คลิกที่ปุ่มหรือลิงก์นั้น ผู้ใช้ก็จะคลิกที่เนื้อหาอันตรายใน <iframe> โดยไม่รู้ตัว
• Cross-Site Scripting (XSS): หากเว็บไซต์ที่เราฝัง <iframe> มีช่องโหว่ XSS ผู้โจมตีอาจใช้ <iframe> เพื่อ inject สคริปต์อันตรายลงในหน้าเว็บของเราได้

เพื่อป้องกันความเสี่ยงเหล่านี้ เราควรปฏิบัติตามแนวทางต่อไปนี้

• ใช้ sandbox attribute: Attribute sandbox ช่วยจำกัดสิทธิ์ของ <iframe> เช่น ป้องกันไม่ให้ <iframe> รันสคริปต์, ส่งฟอร์ม หรือเข้าถึง cookies
• ใช้ Content-Security-Policy (CSP): CSP เป็น HTTP header ที่ช่วยให้เรากำหนดนโยบายความปลอดภัยสำหรับเว็บไซต์ของเรา เช่น กำหนดว่าเว็บไซต์ของเราอนุญาตให้โหลดสคริปต์จากโดเมนใดบ้าง
• ตรวจสอบแหล่งที่มาของ <iframe>: ก่อนที่จะฝัง <iframe> จากเว็บไซต์ใด ๆ เราควรตรวจสอบให้แน่ใจว่าเว็บไซต์นั้นมีความน่าเชื่อถือ

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

<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>

ในตัวอย่างนี้ เราใช้ sandbox attribute เพื่ออนุญาตให้ <iframe> รันสคริปต์และเข้าถึง origin เดียวกันกับหน้าเว็บของเรา แต่เรายังคงจำกัดสิทธิ์อื่น ๆ เช่น ป้องกันไม่ให้ <iframe> ส่งฟอร์ม

ข้อควรระวัง: การใช้ sandbox attribute อาจทำให้ <iframe> ไม่สามารถทำงานได้อย่างถูกต้อง หากเว็บไซต์ที่ฝังต้องการสิทธิ์ที่ถูกจำกัด

สรุป

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

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการฝังไฟล์เสียงและวิดีโอลงในหน้าเว็บของเราด้วยแท็ก HTML5 <audio> และ <video>