Công cụ kiểm tra iframe

Yếu tố quyết định việc trang web có thể được nhúng hay không

Hướng dẫn nhanh: Cấu hình tiêu đề phản hồi

Nếu bạn quản lý trang web này, hãy kiểm soát trực tiếp việc nhúng khung bằng cách thiết lập trong tiêu đề phản hồi.

Lưu ý: Tiêu đề X-Frame-Options hiện đã lỗi thời và được thay thế bằng `frame-ancestors` trong CSP. Khi cả hai cùng tồn tại, `frame-ancestors` sẽ được ưu tiên thực thi — khuyến nghị sử dụng `frame-ancestors`.

Máy chủ phát hiện yêu cầu đến từ iframe như thế nào?

• `Sec-Fetch-Dest: document` — yêu cầu điều hướng cấp cao nhất (trình duyệt đang chuyển hướng trang chính), không nằm trong bất kỳ iframe/frame nào.
• `Sec-Fetch-Dest: iframe` — yêu cầu được tải bên trong thành phần `<iframe>`.
• `Sec-Fetch-Dest: frame` — tải bên trong thành phần `<frame>` (nhóm khung) thế hệ cũ.
• `Sec-Fetch-Dest: embed/object` — tải bên trong thành phần `<embed>` hoặc `<object>`.

Ví dụ cấu hình máy chủ: Chặn nhúng iframe

Các đoạn mã bên dưới minh họa cách cấu hình máy chủ hoặc framework tương ứng để chặn hoàn toàn việc nhúng iframe (thêm `X-Frame-Options: DENY` và `Content-Security-Policy: frame-ancestors 'none'`) — đây là chế độ bảo vệ nghiêm ngặt nhất trong hướng dẫn nhanh phía trên.

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 });
  },
};

Bạn chỉ cần cho phép trang web của mình hoặc một danh sách nguồn gốc hạn chế được nhúng vào, thay vì chặn hoàn toàn? Chỉ cần thay `DENY` bằng `SAMEORIGIN`, `'none'` bằng `'self'` hoặc danh sách nguồn gốc cụ thể — các cấu hình khác vẫn giữ nguyên.

Lưu ý quan trọng về các nền tảng

Ngoài các quy tắc chung về header, một số nền tảng lớn lại có những đặc thù riêng — rất đáng để tìm hiểu trước khi chỉ dựa vào tiêu đề HTTP để mặc định cho rằng tài nguyên bị "chặn" hay "có thể nhúng".

Các trường hợp sử dụng phổ biến

• Xác định xem widget, bảng điều khiển (dashboard) hoặc tài liệu bên thứ ba có thể nhúng vào sản phẩm của bạn hay không trước khi bắt đầu viết mã tích hợp.
• Xác minh rằng site của bạn đang gửi chính sách X-Frame-Options hoặc CSP frame-ancestors đúng như mong muốn.
• Gỡ lỗi cơ chế bảo vệ chống clickjacking: tìm hiểu lý do tại sao một trang hiển thị about:blank hoặc thông báo từ chối khi được đặt trong iframe.
• Kiểm tra hàng loạt các URL ứng viên trong quá trình tổng hợp nội dung hoặc tích hợp cổng thông tin, đồng thời dùng lịch sử phiên để truy vết và xem lại kết quả.
• Chuẩn bị cho đợt rà soát bảo mật hoặc kiểm thử xâm nhập bằng cách ghi nhận chính sách nhúng khung (framing policy) của các thành phần bên thứ ba.

Câu hỏi thường gặp