Iframe là gì?
iFrame là gì? Iframe viết tắt của từ Inline Frame có nghĩa là Khung nội tuyến. Đây là một thành phần HTML dùng để nhúng nội dung từ một trang web hoặc tài liệu khác trên trang web vào trang của mình. iFrame là cách để hiển thị trang web hoặc một phần của trang web trong một phần website khác mà không cần chuyển đổi giữa các trang hoặc mở cửa sổ trình duyệt mới.
iFrames có thể sử dụng với hầu hết mọi thứ, từ bài viết, trang chủ trang web, mô-đun học tập,…Điển hình chúng ta hay sử dụng mã nhúng video Youtube và link google map vào website.
Các thuộc tính của Iframe
iFrame cung cấp nhiều thuộc tính khác nhau, bạn có thể sử dụng để sửa đổi hành vi của nó. Dưới đây là một số thuộc tính cơ bản của Iframe:
- Src: Chỉ định vị trí nguồn của tài liệu bên ngoài
- Chiều rộng (width): Thuộc tính này để đặt chiều rộng chủa Iframe được đo bằng Pixel
- Chiều cao (Heigh): Đặt chiều cao của phần tử Iframe, được đo bằng Pixel
- ALLOW (Cho phép): Bạn có thể chỉ định chính sách cấp phép cho các tính năng mà tài liệu bên ngoài được phép thực hiện.
- Sandbox ( hộp cát): Sử dụng để hạn chế chức năng cụ thể của Iframe nhằm áp dụng lớp bảo mật bổ sung.
- Referralpolicy ( Chính sách giới thiệu): dùng để kiểm soát chính sách liên kết giới thiệu khi tải nguồn Iframe. Có thể đặt thuộc tính này là no-referrer để ngăn trình duyệt gửi tiêu đề người giới thiệu khi tải tài nguyên.
- SRCDOC: Bạn có thể đặt nội dung của Iframe thành một chuỗi HTML nội tuyến
Đọc thêm: RDBMS là gì? Cách Thức hoạt động của Relational Database
Cách iframe HTML hoạt động như thế nào?
Khi bạn nhúng iframe vào một trang web, nó sẽ tạo ra một cửa sổ bên trong trang web hiển thị nội dung của một trang web khác. Cụ thể:
- Tạo phần tử Iframe trong HTML của bạn bằng thẻ <iframe>.
- Sử dụng phần tử “src”, cho biết URL nguồn của website muốn hiển thị trong iframe.
- Trình duyệt tải trang nguồn trong iframe và hiển thị nó trong thành phần của iframe.
- Bạn có thể điều chỉnh chiều cao, chiều rộng của cửa sổ iframe từ thuộc tính height, width
- Các thuộc tính khác như name, id có thể được thêm vào thành phần iframe để cho phép được tham chiếu trong JavaScript hoặc Css.
Mặc định, các liên kết hoặc biểu mẫu trong trang web được nhúng sẽ mở và gửi trong cửa sổ Iframe, bạn có thể sử dụng thuộc tính “target” với “_parent” để mở chúng trong cửa sổ chính.
Lưu ý: Iframe có thể gây hậu quả về bảo mật nếu không cảnh giá về nội dung nhúng. Bạn nên chỉ nhúng các nguồn được ủy quyền và đặc tiêu đề bảo mật thích hợp để ngăn chặn hoạt động tấn công.
Cách sử dụng iframe HTML
Để sử dụng Iframe HTML, bạn hãy tạo thành phần Iframe và xác định các đặc điểm của nó như nguồn, chiều rộng, chiều cao, tên của nội dung. Bạn có thể sử dụng CSS để thay đổi giao diện Iframe. Sau khi có Iframe, bạn có thể tải các dạng tài liệu từ nguồn khác vào trang của mình. Ví dụ như phim, bản đồ, nguồn cung cấp dữ liệu mạng xã hội,…
Để quyết định nội dung bạn muốn hiển thị, trước tên bạn phải thêm nội dung đó vào trang của mình. Sau đó thêm iframe HTML của bạn <iframe>, và sử dụng thuộc “src”, để chỉ ra nguồn của tài liệu bạn muốn hiển thị trong iframe.
Tiếp đến là CSS – tùy chỉnh giao diện Iframe về chiều rộng, chiều cao, đường viền và các yếu tốc về giao diện khác. Cuối cùng là kiểm tra Iframe xem nó đã hoạt động bình thường chưa, đảm bảo nội dung bạn nhúng vào được hiển thị phù hợp, các liên kết trong Iframe hoạt động bình thường và Iframe đó phản hồi trên các độ rộng màn hình khác nhau.
Xem thêm: Backdoor là gì? Các Loại Tấn Công Backdoor & Cách Ngăn Chặn
Câu hỏi thường gặp về Iframe
Iframe có ảnh hưởng đến SEO website không?
Sử dụng Iframe có thể ảnh hưởng đến SEO website của bạn. Cụ thể:
Không có nội dung trang web trong Iframe được lập chỉ mục: Bot Google không thể đọc nội dung bên trong iframe hiệu quả, do đó với nội dung quan trọng của trang web mà nằm trong Iframe thì nó khiến nội dung đó không được lập chỉ mục khi google không tìm thấy.
Mất liên kết trang website gốc: Khi bạn nhúng một trang web khác vào web bằng Iframe, các liên kết trên trang sẽ trỏ đến trang con, không phải trang gốc. Điều này khiến cho các liên kết bị đứt và ảnh hưởng đến SEO backlink của bạn.
Tốc độ tải trang: Các trình duyệt và công cụ tìm kiếm cho rằng Iframe làm tăng thời gian tải trang trên trình duyệt. Điều này sẽ gây ảnh hưởng đến trải nghiệm người dùng, dẫn đến ảnh hưởng đến SEO, thứ hạng tìm kiếm bị tụt giảm.
Ảnh hưởng tỷ lệ thoát trang: Khi người dùng mất nhiều thời gian vào trang cũng như không tìm thấy nội dung họ cần thì họ sẽ có xu hướng rời trang ngay và dẫn dến tỷ lệ thoát trang cao. Từ đó ảnh hưởng thứ hạng của website trên công cụ tìm kiếm.
Do đó, bạn cần cân nhắc khi sử dụng Iframe và cần sử dụng có hệ thống, chỉ khi thực sự cần thiết. Ngoài ra, bạn cũng nên xem xét các phương thức khác như API hoặc tích hợp nội dung mà không cần sử dụng Iframe.
Muốn đặt iframe không thể thay đổi nội dung bên trong từ trang con thì làm thế nào?
Để đặt một iframe sao cho không thể thay đổi nội dung bên trong từ trang con, bạn có thể sử dụng một số biện pháp sau đây:
- X-Frame-Options Header: Là một tiêu chuẩn bảo mật cho phép bạn kiểm soát các trang của bạn được nhúng bằng Iframe. Bạn có thể đặt giá trị của Header này để chỉ định các trang của bạn có thể được nhúng. Với 3 giá trị chính là Deny (tất cả bị cấm nhúng), sameorigin (cho phép trang cùng nguồn nhúng) và Allow – from ( cho phép chỉ định trang cụ thể).
- Content Security Policy (CSP): Là cơ chế bảo mật cho phép bạn xác định các trang web có thể tương tác với nguồn ngoại vi.
- JavaScript: Sử dụng để kiểm tra xem trang đang chạy trong Iframe và thực hiện các biện pháp bảo mật tùy chỉnh
Kết luận
Trên đây là những chia sẻ của LANIT xoay quanh Iframe là gì? cách tạo Iframe. Một lần nữa chúng tôi xin nhắc rằng bạn cần sử dụng iframe một cách cẩn trọng từ nguồn tin cậy cũng như danh tính của trang web. Nhằm đảm bảo sự an toàn bảo mật của trang website khỏi các cuộc tấn công.
LANIT là nhà cung cấp uy tín các dịch vụ lưu trữ website, ứng dụng như Vps giá rẻ, thuê server giá rẻ, hosting giá rẻ,….Khi thuê dịch vụ lưu trữ tại LANIT, quý khách hàng sẽ được đội ngũ kỹ thuật hỗ trợ các vấn đề liên quan, đảm bảo ứng dụng web hoạt động an toàn, bảo mật và tốc độ cao. Liên hệ ngay với LANIT để được tư vấn chi tiết!
