ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options
ป้องกันการโจมตีแบบคลิกแจ็กกิงด้วย X-Frame-Options และ CSP
ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
การจี้การคลิกคืออะไร
การจี้การคลิก (การปรับแต่งส่วนติดต่อผู้ใช้) คือการฝังเว็บไซต์เป้าหมายไว้ในไอเฟรมโปร่งใสเหนือหน้าลวง ผู้ใช้คิดว่าตนกำลังคลิกหน้าลวง แต่จริง ๆ แล้วกลับคลิกหน้าที่ซ่อนอยู่และยืนยันตัวตนแล้วด้านล่าง ทำให้ดำเนินการต่าง ๆ บนเว็บไซต์เป้าหมายโดยที่ผู้ใช้ไม่รู้ตัว
กลไกการโจมตีแบบจี้การคลิก
ผู้โจมตีโหลด victim.com ในไอเฟรมโปร่งใสที่วางทับปุ่ม “คลิกเพื่อชนะ!” เมื่อผู้ใช้คลิก จริง ๆ แล้วผู้ใช้กำลังคลิกปุ่ม “ลบบัญชี” ของ victim.com โดยยืนยันตัวตนเป็นผู้ใช้คนนั้นผ่านคุกกี้เซสชันของ victim.com ไม่จำเป็นต้องใช้การหลอกลวงแบบฟิชชิง
ส่วนหัว X-Frame-Options
X-Frame-Options: DENY ป้องกันไม่ให้โหลดหน้าเว็บในไอเฟรมใด ๆ X-Frame-Options: SAMEORIGIN อนุญาตให้ฝังไอเฟรมได้เฉพาะหน้าเว็บจากต้นทางเดียวกัน กำหนดส่วนหัวนี้ที่ฝั่งเซิร์ฟเวอร์ในหน้าที่ต้องยืนยันตัวตนทั้งหมดเพื่อป้องกันการจี้การคลิก
คำสั่งผู้ฝังเฟรมของนโยบายความปลอดภัยเนื้อหา
Content-Security-Policy: frame-ancestors 'none' เป็นทางเลือกสมัยใหม่ที่ยืดหยุ่นกว่าสำหรับส่วนหัวตัวเลือกการฝังเฟรมแบบ DENY คำสั่งผู้ฝังเฟรมที่กำหนดเป็น ‘self’ ใช้แทน SAMEORIGIN ได้ คำสั่งผู้ฝังเฟรมยังอนุญาตต้นทางที่เชื่อถือได้แบบเจาะจงได้ด้วย: frame-ancestors https://trusted.example.com
การทำลายเฟรมด้วย JavaScript
การทำลายเฟรมแบบเก่าใช้ JavaScript เพื่อออกจากเฟรม วิธีนี้ถูกเอาชนะได้ง่ายด้วยแอตทริบิวต์แซนด์บ็อกซ์ ซึ่งจะบล็อกสคริปต์ทำลายเฟรม ควรใช้ส่วนหัวที่ฝั่งเซิร์ฟเวอร์เสมอ (ส่วนหัวตัวเลือกการฝังเฟรมหรือคำสั่งผู้ฝังเฟรมของ CSP) เนื่องจากการทำลายเฟรมด้วย JavaScript ไม่น่าเชื่อถือ
เมื่อใดจึงควรอนุญาตให้ฝังเฟรม
กรณีการใช้งานที่ถูกต้องสำหรับการฝังเฟรม ได้แก่ การฝังเนื้อหาของคุณเองบนต้นทางของคุณเอง (SAMEORIGIN) และการอนุญาตให้คู่ค้าเฉพาะรายฝังวิดเจ็ตของคุณ (ใช้คำสั่งผู้ฝังเฟรมกับต้นทางที่ระบุ) ออกแบบนโยบายให้อนุญาตกรณีเหล่านี้และปฏิเสธกรณีอื่นทั้งหมด
แนวทางแบบผสม
กำหนดทั้งส่วนหัวตัวเลือกการฝังเฟรม (สำหรับเบราว์เซอร์รุ่นเก่า) และคำสั่งผู้ฝังเฟรมของ CSP (สำหรับเบราว์เซอร์สมัยใหม่) เพื่อให้ครอบคลุมมากที่สุด เมื่อมีทั้งสองรายการ คำสั่งผู้ฝังเฟรมจะมีลำดับความสำคัญในเบราว์เซอร์ที่รองรับ CSP การส่งทั้งสองรายการช่วยให้ป้องกันการจี้การคลิกได้กับตัวแทนผู้ใช้ทุกชนิด
ความเสี่ยงของไอเฟรมจากต้นทางเดียวกัน
แม้แต่ไอเฟรมจากต้นทางเดียวกันก็อาจมีความเสี่ยงได้ เช่น XSS ที่ถูกจัดเก็บไว้ในหน้าที่ฝังอาจเข้าถึงเอกสารแม่ผ่าน parent.document หากมาจากต้นทางเดียวกัน ใช้แซนด์บ็อกซ์โดยไม่อนุญาตให้คงต้นทางเดิมสำหรับไอเฟรมจากต้นทางเดียวกันที่ไม่จำเป็นต้องเข้าถึงเอกสารแม่ เพื่อจำกัดความเสียหายจากช่องโหว่ของเนื้อหาที่ฝัง
การทดสอบการป้องกันของคุณ
ตรวจสอบการป้องกันการจี้การคลิกโดยใช้แท็บเครือข่ายของเบราว์เซอร์เพื่อตรวจสอบส่วนหัวการตอบกลับว่ามีส่วนหัวตัวเลือกการฝังเฟรมหรือคำสั่งผู้ฝังเฟรมของ CSP หรือไม่ เครื่องมืออย่าง securityheaders.com สามารถวิเคราะห์ส่วนหัวได้ สร้างหน้า HTML สำหรับการทดสอบที่มีไอเฟรมชี้ไปยังเว็บไซต์ของคุณ แล้วตรวจสอบว่าโหลดไม่สำเร็จ
เนื้อหาฝังจากบุคคลที่สาม
เมื่อฝังเนื้อหาจากบุคคลที่สาม เช่น YouTube หรือแผนที่กูเกิล คุณคือเว็บไซต์ที่ทำการฝัง จึงต้องตรวจสอบว่าบริการที่ฝังอนุญาตให้ฝังได้ตามนโยบายตัวเลือกการฝังเฟรมของตนเองหรือไม่ คุณไม่สามารถฝังเว็บไซต์ที่ป้องกันการฝังได้ ซึ่งเป็นการออกแบบโดยตั้งใจและช่วยปกป้องผู้ใช้ของบริการนั้น
คำสั่งผู้ฝังเฟรมของ CSP ในเมตาแท็ก
ต่างจากคำสั่ง CSP ส่วนใหญ่ คำสั่งผู้ฝังเฟรมไม่สามารถกำหนดผ่านเมตาแท็กที่เทียบเท่าส่วนหัว HTTP ได้ แต่ต้องส่งเป็นส่วนหัวการตอบกลับ HTTP วิธีนี้ทำให้ผู้โจมตีไม่สามารถลบการป้องกันด้วยการแก้ไข HTML ที่ฝังก่อนที่เบราว์เซอร์จะอ่านเมตาแท็ก
ตรวจสอบความรู้
เหตุใดโค้ด JavaScript สำหรับทำลายเฟรมจึงเป็นการป้องกันการจี้การคลิกที่ไม่น่าเชื่อถือ
สรุป
การจี้การคลิกฝังหน้าที่ผ่านการยืนยันตัวตนแล้วไว้ในไอเฟรมโปร่งใสเพื่อจี้การคลิก การป้องกันคือใช้ส่วนหัวตัวเลือกการฝังเฟรมที่ปฏิเสธทั้งหมด หรือส่วนหัว CSP ที่กำหนดให้คำสั่งผู้ฝังเฟรมไม่มีต้นทางที่อนุญาต กำหนดทั้งสองแบบเพื่อให้ครอบคลุมเบราว์เซอร์ต่าง ๆ การทำลายเฟรมด้วย JavaScript ไม่น่าเชื่อถือ จึงควรใช้ส่วนหัว HTTP เสมอ คำสั่งผู้ฝังเฟรมอนุญาตให้กำหนดรายชื่อต้นทางที่เชื่อถือได้อย่างละเอียด ซึ่งส่วนหัวตัวเลือกการฝังเฟรมทำไม่ได้
คำถามที่พบบ่อย
บทเรียน “ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options”
ป้องกันการโจมตีแบบคลิกแจ็กกิงด้วย X-Frame-Options และ CSP คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- องค์ประกอบ iframe: src และ sandbox
- ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options
- องค์ประกอบ embed และ object
- การโหลด iframe แบบขี้เกียจ