Nội dung được nhúng là cách tốt nhất để giữ người dùng trên trang web của bạn, đồng thời chia sẻ nội dung từ các trang hoặc trang web khác. Đó có thể là một Tweet được nhúng, hiển thị theo kiểu và định dạng của Twitter. Đó có thể là một trang web hoàn toàn riêng biệt được nhúng vào trang web của riêng bạn, chẳng hạn như một cửa hàng Shopify được nhúng, nơi khách truy cập có thể mua hàng mà không cần rời khỏi trang web của bạn.
Giờ đây, điều quan trọng hơn bao giờ hết là các trang web của chúng ta phải luôn an toàn khi chúng ta nhúng nội dung.
Nhà phát triển có thể nhúng nội dung vào trang web theo nhiều cách. Kỹ thuật phổ biến nhất là sử dụng <iframe>. Kỹ thuật này cho phép bạn nhúng mọi nội dung vào trang web của mình chỉ bằng một URL. Bạn đã có thể thêm thuộc tính sandbox để tăng tính bảo mật cho iframe.
Ngoài ra, bạn có thể sử dụng một phần tử HTML được đề xuất:
<fencedframe>được đề xuất là một cách bảo đảm quyền riêng tư để nhúng nội dung của bên thứ ba.<portal>được đề xuất để chuyển đổi trang liền mạch hơn.
Hãy đọc tiếp để tìm hiểu cách cải thiện tính bảo mật của nội dung được nhúng.
Nhúng bằng iframe
Bạn có thể sử dụng iframe cho nhiều trường hợp sử dụng, chẳng hạn như thêm bản đồ hoặc biểu mẫu vào trang liên hệ và hiển thị quảng cáo.
<iframe src="https://example.com/maps"></iframe>
Mỗi iframe có một bối cảnh duyệt web riêng, với nhật ký phiên và tài liệu riêng. Ngữ cảnh nhúng iframe được gọi là ngữ cảnh duyệt web mẹ.
Nội dung của bên thứ ba xuất hiện trong iframe có thể tương tác với trang web mẹ thông qua postMessage(). Điều này cho phép nhà phát triển gửi các giá trị tuỳ ý giữa các bối cảnh duyệt web. Trình nhận thông báo có thể sử dụng trình nghe sự kiện onmessage để nhận các giá trị.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Tăng cường bảo mật bằng thuộc tính sandbox
Nếu nội dung độc hại được triển khai trong một iframe, thì có thể các hành động không mong muốn (chẳng hạn như thực thi JavaScript hoặc gửi biểu mẫu) sẽ được thực hiện.
Để tránh điều này, thuộc tính sandbox sẽ hạn chế các API có thể thực thi trong iframe và vô hiệu hoá các tính năng có khả năng gây hại.
<iframe src="https://example.com" sandbox></iframe>
Hộp cát có thể khiến một số API nhất định không hoạt động, trong khi những API này lại quan trọng đối với nội dung được nhúng của bạn. Để cho phép một API bị vô hiệu hoá, bạn có thể thêm một đối số một cách rõ ràng vào thuộc tính hộp cát.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Có một số giá trị có thể có cho quy cách sandbox, bao gồm allow-forms, allow-same-origin, allow-popups và các giá trị khác.
Chính sách về quyền
Khi các tính năng ngày càng mạnh mẽ được phát triển cho web, chính sách về quyền đã được tạo ra để quản lý quyền cho tất cả các tính năng đó. Bạn có thể áp dụng chính sách về quyền đối với một trang web mẹ và nội dung iframe. Bạn cũng có thể cấp các quyền đã cấp cho một trang web mẹ cho iframe bằng cách sử dụng thuộc tính allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Nhúng bằng khung bảo vệ
Khung được rào chắn (<fencedframe>) là một phần tử HTML được đề xuất cho nội dung được nhúng, tương tự như iframe. Không giống như iframe, khung được giới hạn sẽ hạn chế giao tiếp với ngữ cảnh nhúng để cho phép khung truy cập vào dữ liệu trên nhiều trang web mà không chia sẻ dữ liệu đó với ngữ cảnh nhúng. Tương tự, dữ liệu của bên thứ nhất trên trang của trang mẹ không thể được chia sẻ với khung được giới hạn.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames là một đề xuất của Hộp cát về quyền riêng tư, trong đó đề xuất rằng các trang web cấp cao nhất nên phân vùng dữ liệu. Nhiều đề xuất trong Hộp cát về quyền riêng tư hướng đến việc đáp ứng các trường hợp sử dụng trên nhiều trang web mà không cần cookie của bên thứ ba hoặc các cơ chế theo dõi khác. Một số API Hộp cát về quyền riêng tư có thể yêu cầu bạn chọn tài liệu để kết xuất trong một khung được bảo vệ.
Ví dụ: một khung được phân vùng sẽ được tạo cho người chiến thắng trong phiên đấu giá quảng cáo FLEDGE API. API FLEDGE sẽ cung cấp một nguồn mờ, một lược đồ URN độc lập với vị trí, có thể hiển thị trong một khung được giới hạn. Các nguồn mờ cho phép các trang web hiển thị nội dung trên trang web của họ mà không tiết lộ URL nguồn quảng cáo cho chủ sở hữu trang web.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Cuối cùng, khung được rào chắn sẽ không thay thế iframe. Bạn sẽ không phải sử dụng các tính năng này. Khung được phân vùng đề xuất một khung riêng tư hơn để sử dụng khi cần hiển thị dữ liệu từ các phân vùng cấp cao nhất khác nhau trên cùng một trang.
Nhúng bằng cổng
Cổng (<portal>) là một phần tử HTML được đề xuất với một bối cảnh duyệt web độc lập, có thể cải thiện trải nghiệm chuyển đổi trang. Cổng nhúng nội dung như iframe, nhưng người dùng không thể truy cập vào mã của cổng. Người dùng chỉ có thể xem và không thể tương tác với cổng thông tin.
Cổng cung cấp độ phức tạp thấp của một ứng dụng nhiều trang với các chuyển đổi liền mạch của một ứng dụng trang đơn. Các hiệu ứng chuyển đổi này có thể được tạo ảnh động, nhanh chóng thay thế nội dung trong cửa sổ trình duyệt.
<portal src="https://example.com/"></portal>
Quy cách cổng thông tin vẫn đang trong giai đoạn đầu phát triển.
Các phần tử HTML khác được dùng để nhúng
Trong suốt lịch sử phát triển của web, đã có một số phần tử HTML được đề xuất và API được tạo để nhúng nội dung. Trong một thời gian, việc tạo các trang web có nhiều <frame> và một phần tử <frameset> là điều phổ biến. Các trang web có nhiều phần tử <frameset> sẽ hiển thị URL của trang mẹ trong thanh địa chỉ, bất kể nguồn của nhiều khung hình riêng lẻ. Điều này khiến việc chia sẻ đường liên kết đến nội dung trong trang web trở nên khó khăn. Kể từ đó, các API này đã ngừng hoạt động.
Cũng có thời điểm các công nghệ bổ trợ, chẳng hạn như phần tử Java <applet>, được dùng để đáp ứng các trường hợp sử dụng khác. Sau này, phần tử này được thay thế bằng phần tử <object>. Cả hai phần tử này thường được dùng để hiển thị các trình bổ trợ Flash, nhưng cũng được dùng để hiển thị các phần tử HTML khác (tương tự như iframe).
Các phần tử khác, chẳng hạn như <canvas>, <audio>, <video> và <svg>, đã khiến cả phần tử <object> và <applet> trở nên lỗi thời.
Mặc dù <object> và <embed> chưa chính thức ngừng hoạt động, nhưng tốt nhất là bạn nên tránh dùng các API này, đặc biệt là vì chúng có một số hành vi lạ.
<applet> đã bị xoá khỏi quy cách HTML vào năm 2017.
Kết luận
Bạn có thể nhúng nội dung một cách an toàn vào bất kỳ trang web nào bằng cách sử dụng quy cách iframe hiện có. Nhiều phần tử HTML khác, bao gồm cả <fencedframe> và <portal> đã được đề xuất để cải thiện tính bảo mật và kiểu dáng. Chúng tôi sẽ tiếp tục chia sẻ tiến trình của đề xuất Khung được phân vùng khi đề xuất này tiến triển.