[Fix lỗi] Iframe bị trắng trang – Blank page khi nhúng iframe

Trong quá trình làm cho khách, mình có gặp phải vấn đề khi sử dụng iframe để nhúng trang web khác vào website của mình. Nhưng gặp phải hiện tượng trang trắng tinh, không có nội dung, không hiển thị được website đích trong iframe. Hay còn gọi là trắng trang hoạc Blank page.

Thực ra đây không phải là lỗi iframe đâu, nó là một cách thức bảo mật, bảo vệ an toàn cho website của mình, nhằm phòng tránh các cuộc tấn công mạng DDOS, lợi dụng, phá hoại hay gây hiểu lầm cho người dùng. Bằng cách cấu hình trong web config một thuộc tính, đó là: x-frame-options

Lỗi trắng trang khi nhúng iframe do thuộc tính X-frame header được bật

Ví dụ nhé, Google cũng dùng biện pháp này để chặn không cho nhúng iframe trang của họ. Bản thử nhứng iframe trang google.com.vn xem có được không nhé. Tại thời điểm mình test là trắng trang, blank luôn.

<iframe src="http://google.com.vn/" style="width:100%; height:250px;">
 <p>Trình duyệt của bạn không hỗ trợ iframe.</p>
</iframe>

Nếu bạn là chủ nhân của website đích được iframe thì bạn mới có thể cấu hình được thuộc tính này. Còn nếu không phải thì đành chấp nhận thôi nhé.

Khắc phục lỗi trắng trang khi nhúng iframe bằng cách cấu hình x-frame-options

Các thuộc tính của X-Frame-options

X-Frame-Options: DENY  //Cấm hẳn việc nhúng iframe
X-Frame-Options: SAMEORIGIN  // Chỉ cho phép nhúng trên cùng một tên miền
X-Frame-Options: ALLOW-FROM https://example.com/  // Cho phép nhúng trên một tên miền được chỉ định

Cấu hình trên Apache

Cấu hình cho phép nhúng iframe trên cùng tên miền:

Header always append X-Frame-Options SAMEORIGIN

Cấm hẳn việc sửa dụng iframe:

Header set X-Frame-Options DENY

Cho phép một site nào đó được quyền iframe website của mình:

Header set X-Frame-Options "ALLOW-FROM https://example.com/"

Cấu hình trên nginx

add_header X-Frame-Options SAMEORIGIN;

Cấu hình trên IIS

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

Cấu hình trên HAProxy

rspadd X-Frame-Options:\ SAMEORIGIN


Cho phép nhúng Iframe trên website khác

Bạn chỉ việc tìm trong file config những thuộc tính trên và xóa chúng đi là xong!

Mình đã thử trên nginx và thành công, còn bạn? Hãy để lại comment nhé!