Thuộc tính nội dung, bảo mật và thiết kế cho IFRAME
Phần tử này cho phép bạn nhúng các trang Web khác trực tiếp vào trang Web của bạn. Nhưng khi sử dụng iframe thì có một số vấn đề về bảo mật và thiết kế không được giải quyết trong HTML 4.01. HTML5 mang lại ba thuộc tính mới cho phần tử này để giúp giải quyết các mối quan tâm sau:
Thuộc tính hộp cát
Thuộc tính sandbox của phần tử IFRAME là một tính năng bảo mật rất hữu ích của iframe. Khi bạn đặt nó trong một phần tử IFRAME, bạn đang hướng dẫn tác nhân người dùng không cho phép các tính năng có thể gây ra nguy cơ bảo mật cho trang web và người dùng của nó.
Ví dụ:
Yêu cầu trình duyệt không cho phép tất cả các tính năng có thể là rủi ro bảo mật. Cụ thể, các plugin không được phép. Không thể gửi biểu mẫu. Sscripts sẽ không chạy và liên kết bên ngoài IFRAME không được phép. Cuối cùng, không được phép truy cập vào cookie, bộ nhớ cục bộ và các trang khác trên cùng một tên miền (nguồn gốc).
Sau đó, bằng cách sử dụng giá trị từ khóa sandbox, bạn có thể bật lại một số tính năng. Những từ khóa này là:
- cho phép biểu mẫu —cho phép gửi biểu mẫu
- cho phép cùng một nguồn gốc —cho phép các tập lệnh để truy cập nội dung như cookie từ cùng một miền gốc
- cho phép tập lệnh —cho phép các tập lệnh chạy trong IFRAME này
- cho phép điều hướng trên cùng —cho phép liên kết IFRAME và tập lệnh đến mục tiêu _top
Không nên đặt cả từ khóa cho phép lẫn tập lệnh cho phép cùng một nguồn gốc trên cùng một IFRAME. Nếu bạn làm điều này, trang nhúng sau đó có thể loại bỏ hoàn toàn thuộc tính sandbox, phủ nhận mọi lợi ích bảo mật.
Thuộc tính srcdoc
Thuộc tính srcdoc là một thuộc tính cho phép nhà thiết kế Web kiểm soát nhiều hơn các iframe cũng như bảo mật hơn. Thay vì liên kết đến một trang Web tại một URL khác, trình thiết kế web đặt HTML để hiển thị trong một IFRAME bên trong thuộc tính srcdoc.
Đầu tiên, bạn có thể nghĩ, "Điều này khác biệt như thế nào so với việc đặt mã HTML ngay trong trang?" Và theo một số cách, nó không khác gì một cách khủng khiếp.
Nhưng bạn phải ghi nhớ một trong các chức năng của phần tử IFRAME, đó là giữ dữ liệu không tin cậy tách biệt với phần còn lại của trang web.
Bằng cách đặt HTML được tạo bởi một nguồn không đáng tin cậy, chẳng hạn như biểu mẫu, thành một IFRAME, bạn có thể "sandbox" nội dung không đáng tin cậy và vẫn hiển thị nó trên trang. Nhận xét trên blog là một ví dụ. Hầu hết các blog chỉ có một số lượng giới hạn các thẻ HTML mà người bình luận có thể sử dụng trong các bình luận của họ. Nhưng bằng cách đặt các nhận xét đó vào một IFRAME được sandbox bằng cách sử dụng thuộc tính srcdoc, các nhận xét có thể mạnh mẽ hơn trong khi vẫn bảo vệ toàn bộ trang web.
An ninh và khung nội tuyến
Hai thuộc tính trên cung cấp bảo mật cho các phần tử IFRAME của bạn, nhưng chúng không phải là bằng chứng chống lại tất cả các trang web độc hại. Nếu trang web độc hại có thể thuyết phục người dùng truy cập trực tiếp vào nội dung thù địch (chẳng hạn như bằng cách nhập URL vào trình duyệt của họ), họ vẫn có thể bị tấn công.
Nếu có thể, tốt nhất là đặt nội dung trong IFRAME được sandbox làm loại MIME text / html-sandbox.
Thuộc tính liền mạch
Thuộc tính liền mạch là thuộc tính boolean cho trình duyệt hiển thị IFRAME như thể nó là một phần của tài liệu gốc. Nếu bạn muốn IFRAME hiển thị liền mạch, chỉ cần bao gồm thuộc tính này trong phần tử:
Nhưng làm cho IFRAME liền mạch không chỉ là giao diện, nó còn là cách trang tương tác với khung hình. Ví dụ:
- Các liên kết trong IFRAME sẽ mở trong cửa sổ chính , trừ khi trang IFRAME có mục tiêu _SELF được đặt.
- CSS trong IFRAME sẽ được thêm vào tầng của toàn bộ tài liệu.
- Phần tử gốc của trang IFRAME được coi là một phần tử con của IFRAME.
- Chiều rộng và chiều cao của IFRAME được đặt theo cách tương tự như cách các phần tử cấp khối khác được đặt.
- Khi tài liệu gốc được xem bởi một công cụ hiển thị giọng nói như trình đọc màn hình, IFRAME sẽ được đọc mà không thông báo nó như một tài liệu riêng biệt.
- Bất kỳ tập lệnh nào trên tài liệu gốc cũng sẽ ảnh hưởng đến tài liệu IFRAME theo cùng một cách. Ví dụ: nếu một tập lệnh liệt kê tất cả các khung trên trang, các liên kết trong IFRAME cũng sẽ được liệt kê.
Nói cách khác, thuộc tính liền mạch làm nhiều hơn là chỉ loại bỏ các đường viền khỏi IFRAME. Nếu bạn định đặt IFRAME liền mạch, bạn nên chắc chắn về nội dung để không thêm bất kỳ nguy cơ bảo mật nào vào trang web của mình bằng cách nhúng một trang web độc hại.