เครื่องมือตรวจสอบ iframe

อะไรเป็นตัวกำหนดว่าหน้าเว็บสามารถฝังได้หรือไม่?

คู่มือลัด: การตั้งค่า Response Header

หากเป็นผู้ดูแลหรือเจ้าของเว็บไซต์ สามารถควบคุมการฝัง iframe ได้โดยตรงผ่าน Response Headers

ข้อควรทราบ: Directive ใน CSP อย่าง `frame-ancestors` มาแทนที่มาตรฐาน `X-Frame-Options` ในยุคปัจจุบัน เมื่อทั้งสอง Header ปรากฏพร้อมกัน ค่า CSP จะมีความสำคัญสูงกว่า จึงแนะนำให้ใช้ `frame-ancestors` เป็นหลัก

เซิร์ฟเวอร์ตรวจจับได้อย่างไรว่าคำขอมาจาก iframe?

• `Sec-Fetch-Dest: document` — เป็นการนำทางระดับบนสุด (Top-level) ไม่ใช่การโหลดภายในกรอบใดๆ
• `Sec-Fetch-Dest: iframe` — คำขอนี้ถูกโหลดภายในองค์ประกอบ `<iframe>`
• `Sec-Fetch-Dest: frame` — โหลดภายใน `<frame>` (Frameset) รุ่นเก่า
• `Sec-Fetch-Dest: embed / object` — โหลดภายในองค์ประกอบ `<embed>` หรือ `<object>`

ตัวอย่างการตั้งค่าเซิร์ฟเวอร์: ป้องกันการฝัง iframe

ตัวอย่างโค้ดด้านล่างอธิบายวิธีตั้งค่าเซิร์ฟเวอร์หรือเฟรมเวิร์กเพื่อปิดกั้นการฝัง iframe อย่างสมบูรณ์ (X-Frame-Options: DENY + CSP frame-ancestors 'none') ซึ่งเป็นแนวทางที่เข้มงวดที่สุดในคำแนะนำด่วนด้านบน

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

ต้องการอนุญาตเฉพาะเว็บไซต์ของตนเอง หรือรายชื่อเว็บไซต์สั้นๆ ให้ฝังหน้าเว็บได้ แทนการปิดกั้นทั้งหมดหรือไม่? สามารถเปลี่ยน DENY เป็น SAMEORIGIN และเปลี่ยน 'none' เป็น 'self' หรือระบุโดเมนที่ต้องการเจาะจงได้เลย โดยวิธีการตั้งค่าในส่วนอื่นๆ ยังคงเหมือนเดิม

จุดที่ต้องระวังของแพลตฟอร์มต่าง ๆ

นอกจากหลักการมาตรฐานของเฮดเดอร์ทั่วไปแล้ว แพลตฟอร์มยอดนิยมหลายแห่งยังมีความเฉพาะตัวของตัวเอง ซึ่งผู้พัฒนาควรทำความเข้าใจไว้ก่อนจะได้อาจทึกทักเองว่าเนื้อหาถูก "Blocked" หรือ "Embeddable" เพียงจากการตรวจสอบเฮดเดอร์เท่านั้น

สถานการณ์การใช้งานทั่วไป

• ช่วยตัดสินใจล่วงหน้าว่าวิดเจ็ต (Widget), แดชบอร์ด หรือเอกสารของบุคคลที่สามสามารถนำมากับงานในผลิตภัณฑ์ของคุณได้หรือไม่ ก่อนจะเริ่มลงมือเขียนโค้ดเชื่อมต่อ (Integration)
• ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณส่งนโยบาย X-Frame-Options หรือ CSP frame-ancestors ตรงตามที่ตั้งใจไว้จริง ๆ
• แก้ไขปัญหาด้านการป้องกันการคลิกจี้ (Clickjacking): ตรวจสอบสาเหตุที่ทำให้หน้าเว็บแสดงผลเป็น `about:blank` หรือแสดงข้อความปฏิเสธการทำงานเมื่ออยู่ภายใน iframe
• ตรวจสอบรายชื่อ URL ที่ผ่านการคัดกรองเบื้องต้นแบบแบตช์ ระหว่างการรวบรวมเนื้อหาหรือการผสานระบบไปยังพอร์ทัล โดยสามารถใช้ประวัติเซสชันย้อนกลับมาดูผลลัพธ์เดิมได้
• เตรียมความพร้อมสำหรับการทบทวนความปลอดภัยหรือการทดสอบเจาะระบบ (Penetration Testing) โดยการบันทึกนโยบายการควบคุมการแสดงผลในกรอบ (Framing Policy) ของ Third-party Dependencies

คำถามที่พบบ่อย (FAQs)