iframe là gì?

Tại sao Ranh giới Tài liệu Quan trọng

Một iframe ảnh hưởng đến cách các trình duyệt phơi bày trạng thái, hiển thị nội dung hoặc quyết định khi nào một hành động tự động là an toàn. Một định nghĩa chính xác ngăn cản các nhóm coi một tín hiệu hẹp là một câu trả lời phổ quát. Nó cũng làm cho việc chẩn đoán các lỗi kiểm tra trở nên dễ dàng hơn vì hành vi trình duyệt mong đợi được liên kết với một vòng đời, API hoặc ranh giới hệ thống đã được tài liệu hóa.

Đối với tự động hóa web, câu hỏi thực tiễn luôn hẹp hơn so với "liệu trang đã sẵn sàng chưa?" hoặc "liệu trình duyệt có trông thực không?" Bước tiếp theo có thể cần một điều khiển được kích hoạt, một khung hoàn thành điều hướng, một thành phần gắn cây nội bộ của nó, hoặc một bề mặt kết xuất phải giữ được tính nhất quán. Các phần dưới đây chuyển đổi khái niệm thành các kiểm tra có thể quan sát được thay vì dựa vào truyền thuyết.

iframe Được Định Nghĩa

Một iframe, hoặc khung nội tuyến, là một phần tử HTML nhúng một tài liệu khác bên trong tài liệu hiện tại. Nội dung được nhúng nhận được ngữ cảnh duyệt riêng của nó với một Cửa sổ, Tài liệu, URL, lịch sử điều hướng và vòng đời. Trang cha điều khiển khu vực hình chữ nhật nơi tài liệu con được trình bày.

Các Định nghĩa iframe tiêu chuẩn HTML xác định phần tử, thuộc tính nội dung của nó, hành vi điều hướng, cờ sandbox, tải và tích hợp với các ngữ cảnh duyệt web. Đứa trẻ có thể cùng nguồn gốc với cha hoặc có thể đến từ một nguồn gốc hoàn toàn khác.

Các ứng dụng phổ biến bao gồm các mẫu thanh toán, trình phát video, bản đồ, quảng cáo, tiện ích hỗ trợ, xem trước tài liệu và ứng dụng nhúng. Sự tách biệt có thể đơn giản hóa việc tích hợp và cách ly tài liệu, nhưng đồng thời cũng tạo ra những vấn đề liên quan đến bảo mật, hiệu suất, khả năng truy cập và tự động hóa mà HTML lồng ghép thông thường không có.

Một Ngữ Cảnh Duyệt Rời Rạc

Phần tử iframe thuộc về DOM cha, nhưng tài liệu hiển thị bên trong nó không trở thành một cây con bình thường của DOM đó. Đứa trẻ có đối tượng toàn cầu riêng và có thể điều hướng độc lập. Chu kỳ sống của cha và con có thể tiến triển với tốc độ khác nhau, và đứa trẻ có thể chứa các khung lồng bên trong nó.

Đối với nội dung cùng nguồn gốc, các script của cha có thể truy cập cửa sổ con và tài liệu thông qua các API nền tảng. Đối với nội dung khác nguồn gốc, chính sách cùng nguồn gốc chặn quyền truy cập DOM trực tiếp theo cả hai hướng. Các tài liệu vẫn có thể phối hợp thông qua việc truyền thông điệp giữa các tài liệu được kiểm soát khi cả hai bên thực hiện một giao thức đã được đồng ý.

The Tài liệu tham chiếu phần tử iframe của MDN các thuộc tính tài liệu như src, srcdoc, name, loading, referrerpolicy, allow, và sandbox. Những điều khiển này ảnh hưởng đến những gì được tải, khi nào nó được tải, thông tin nào được gửi, và khả năng nào mà trang được nhúng nhận được.

Chính sách cùng nguồn và Gửi tin nhắn

Hai tài liệu được coi là cùng nguồn khi định dạng, máy chủ và cổng của chúng khớp nhau theo quy tắc nguồn của nền tảng. Các khung cùng nguồn có thể hợp tác chặt chẽ. Các khung khác nguồn không thể tự do đọc DOM, cookie, bộ nhớ hoặc đối tượng JavaScript của nhau vì điều đó cho phép bất kỳ trang nào xem nội dung đã xác thực của người dùng trên một trang khác.

The Hướng dẫn về chính sách cùng nguồn gốc của MDN giải thích ranh giới và các loại tương tác giữa các nguồn khác nhau có hạn. Window.postMessage cung cấp một kênh giao tiếp có chủ đích. Những người nhận nên xác minh nguồn gửi và xác thực cấu trúc tin nhắn thay vì chấp nhận tin nhắn từ bất kỳ nguồn nào.

Nguồn gốc không giống như thương hiệu trang hoặc văn bản miền hiển thị. Các chuyển hướng có thể thay đổi nguồn gốc cuối cùng của khung. Một khung bắt đầu cùng nguồn gốc có thể điều hướng đến nguồn gốc khác sau đó, làm vô hiệu hóa truy cập trực tiếp. Tự động hóa nên kiểm tra URL khung hiện tại và coi điều hướng như một sự thay đổi trạng thái.

Sandbox và Quyền hạn

Thuộc tính sandbox áp dụng một tập hợp các cờ hạn chế cho ngữ cảnh được khung. Không có token, nó có thể vô hiệu hóa các kịch bản, gửi biểu mẫu, popup, điều hướng cấp cao nhất, tải xuống và xử lý cùng nguồn. Các token bắt đầu bằng allow khôi phục các khả năng một cách chọn lọc. Một tập hợp token tối thiểu an toàn hơn việc cấp phát mọi khả năng theo mặc định.

Thuộc tính allow và Chính sách Quyền kiểm soát quyền truy cập vào các tính năng như camera, microphone, geolocation và chế độ toàn màn hình. Những điều khiển này bổ sung cho việc sandboxing; chúng không thay thế kiểm tra nguồn gốc hoặc ủy quyền ứng dụng. Một bên thứ ba nhúng nên chỉ nhận các khả năng mà tính năng của nó yêu cầu.

Một cấu hình nguy hiểm có thể phát sinh khi nội dung nhúng cùng nguồn nhận được cả quyền truy cập script và việc phục hồi điều trị cùng nguồn dưới sandbox. Tùy thuộc vào ngữ cảnh, trang được đóng khung có thể có khả năng xóa bỏ hoặc thoát khỏi các hạn chế. Đánh giá bảo mật phải xem xét nguồn gốc thực tế, kiểm soát nội dung và sự kết hợp token thay vì đọc từng thuộc tính một cách tách biệt.

Tải, Hiệu suất và Truy cập

Mỗi iframe có thể khởi động một tài liệu đầy đủ với các script, kiểu dáng, hình ảnh, phông chữ và khung con. Nhiều phần nhúng làm tăng bộ nhớ, CPU và chi phí mạng. Thuộc tính tải có thể trì hoãn các khung ngoài màn hình, nhưng tải lười nghĩa là nội dung của chúng có thể không tồn tại khi sự kiện tải ban đầu của cha xảy ra.

Mỗi iframe có ý nghĩa cần một thuộc tính tiêu đề ngắn gọn cho biết cho người dùng công nghệ hỗ trợ nội dung nhúng đại diện cho điều gì. Tài liệu có khung cũng cần cấu trúc có thể truy cập riêng của nó. Tránh buộc phải tập trung bàn phím vào một phần nhúng mà không có con đường rõ ràng quay lại cha, và kiểm tra thứ tự tab qua biên giới.

Kích thước phản hồi yêu cầu phối hợp vì cha kiểm soát hộp iframe trong khi con kiểm soát nội dung của nó. Các con cái thuộc miền khác không thể đơn giản phơi bày chiều cao tài liệu của mình qua truy cập DOM trực tiếp. Một giao thức nhắn tin có thể báo cáo sự thay đổi kích thước, nhưng cha phải xác thực các tin nhắn và ngăn các vòng lặp bố trí.

Mô hình Tự động hóa iframe

Tự động hóa trước tiên xác định khung bằng một thuộc tính ổn định như URL, tên, tiêu đề hoặc phần tử iframe chủ của nó. Sau đó, nó tạo một bộ định vị theo khung và tìm kiếm bên trong ngữ cảnh duyệt đó. Việc chọn phần tử con có thể nhìn thấy từ tài liệu cha mà không vào khung sẽ thất bại vì nút thuộc về một Tài liệu khác.

Chờ riêng biệt để khung gắn, điều hướng và kết xuất điều khiển mục tiêu. Sự kiện DOMContentLoaded hoặc sự kiện tải của cha không chứng minh rằng ứng dụng con đã sẵn sàng, đặc biệt khi khung tải lười hoặc thực hiện việc truy xuất dữ liệu từ phía khách hàng. Sử dụng một điều kiện mục tiêu bên trong khung.

Các khung có thể tách ra và được thay thế trong quá trình điều hướng. Giữ cho các bộ định vị bền bỉ và tránh lưu bộ đối tượng khung qua một chuyển tiếp trừ khi framework đảm bảo rằng danh tính. Đối với các khung lồng nhau, di chuyển qua một biên giới tại một thời điểm. Khi một khung thuộc miền khác từ chối quyền truy cập vào mã trang trực tiếp, framework tự động hóa vẫn có thể tương tác thông qua các nguyên tố khung cấp độ trình duyệt, tùy thuộc vào trình duyệt và mô hình bảo mật bình thường của trang.

Chọn Kiểm tra Cấp Khung

Bắt đầu với điều kiện hoặc cấu hình nhỏ nhất có thể chứng minh rằng nhiệm vụ có thể tiến hành. Bảo tồn hành vi trình duyệt tương thích tiêu chuẩn, sau đó thêm các điều khiển hồ sơ chỉ ở những nơi quy trình làm việc yêu cầu. Ghi lại bản dựng trình duyệt và trạng thái liên quan để sự khác biệt sau này có thể được giải thích. Một quan sát có thể lặp lại hữu ích hơn một tuyên bố chung rằng một trang, khung, hiển thị hoặc dấu vân tay chỉ đơn giản là 'hoàn thành' hoặc 'an toàn.'

• Xác định hành động tiếp theo. Nói chính xác những gì script hoặc người dùng cần làm sau bước chờ hoặc cấu hình.
• Chọn một tín hiệu có thể quan sát. Ưu tiên một thuộc tính trình duyệt, trạng thái vòng đời, điều kiện phần tử, hoặc kết quả kết xuất hỗ trợ trực tiếp cho hành động đó.
• Giữ các giá trị liên quan nhất quán. Trình duyệt, hệ điều hành, màn hình, ngôn ngữ, đồ họa và cài đặt phiên nên mô tả một môi trường khả thi.
• Xác thực hành vi ứng dụng bình thường. Một can thiệp về quyền riêng tư hoặc tự động hóa không nên lặng lẽ phá vỡ API hoặc thành phần mà nó thay đổi.
• Ghi lại bằng chứng chẩn đoán. Lưu các URL, trạng thái, tin nhắn bảng điều khiển và tên cấu hình liên quan khi một kiểm tra thất bại.

Kết luận

Một iframe là một tài liệu nhúng riêng biệt, không phải một container được định dạng xung quanh các nút con thông thường. Các quy tắc nguồn gốc, cờ sandbox, quyền, việc tải độc lập và yêu cầu truy cập xác định hành vi của nó. Tự động hóa đáng tin cậy chọn khung một cách rõ ràng, chờ đợi trạng thái bên trong ngữ cảnh đó, và mong đợi khung điều hướng hoặc tách ra độc lập từ cha.

Tài liệu Trình duyệt Scraping Không Thông tin giải thích cách các phiên trình duyệt quản lý được cấu hình, trong khi tổng quan về Sản phẩm Trình duyệt Scraping mô tả bề mặt tự động hóa trình duyệt. Những tài nguyên này cung cấp ngữ cảnh sản phẩm để áp dụng khái niệm trong một quy trình làm việc được ủy quyền.

Tài liệu tham khảo

• Tài liệu bắt đầu với Trình duyệt Scraping Không Thông tin
• Tổng quan về sản phẩm Trình duyệt Scraping
• Hướng dẫn tích hợp tự động hóa trình duyệt không thông tin
• Dự án mã nguồn mở không rác trên GitHub