Nội dung nhúng là cách tốt nhất để giữ chân 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. Nội dung này có thể nhỏ như một Tweet được nhúng, hiển thị theo kiểu và định dạng của Twitter. Mục này có thể lớn đến mức là một trang web hoàn toàn riêng biệt được nhúng vào trang web của bạn, chẳng hạn như một cửa hàng Shopify được nhúng mà 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 tôi phải luôn an toàn khi chúng tôi nhúng nội dung.
Nhà phát triển có thể nhúng nội dung trên trang web theo một số 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 bất kỳ nội dung nào 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 cường bảo mật cho iframe.
Ngoài ra, bạn có thể sử dụng phần tử HTML được đề xuất:
<fencedframe>được đề xuất là một cách bảo vệ 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 độ 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 mọi 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ó ngữ 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 hiển thị trong một iframe có thể tương tác với trang web gốc 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á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) có thể được thực thi.
Để 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à tắt các tính năng có thể gây hại.
<iframe src="https://example.com" sandbox></iframe>
Hộp cát có thể khiến một số API quan trọng đối với nội dung được nhúng của bạn không hoạt động. Để cho phép một API bị tắt, bạn có thể thêm một đối số vào thuộc tính hộp cát một cách rõ ràng.
<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à nhiều 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 để 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 quyền cho trang web gốc và nội dung iframe. Bạn cũng có thể cấp các quyền đã cấp cho 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ó hàng rào (<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ư khung iframe, khung được bảo vệ 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 cần 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 gốc không thể được chia sẻ với khung được phân vùng.
<fencedframe src="https://3rd.party.example"></fencedframe>
Khung được phân vùng là một đề xuất về Hộp cát về quyền riêng tư đề 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 về 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 chọn tài liệu để hiển thị trong một khung bảo vệ.
Ví dụ: một khung được khoanh vùng sẽ được tạo cho người chiến thắng trong phiên đấu giá quảng cáo API FLEDGE. 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 bảo vệ. 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 cần 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 phân vùng sẽ không thay thế iframe. Bạn không bắt buộc phải sử dụng các tính năng này. Khung được phân vùng được đề xuất cho 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 trên cùng một trang.
Nhúng bằng cổng thông tin
Cổng (<portal>) là một phần tử HTML được đề xuất có ngữ cảnh duyệt web độc lập, có thể cải thiện trải nghiệm chuyển đổi trang. Cổng thông tin 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 thông tin. Cổng thông tin chỉ có thể xem và người dùng không thể tương tác với cổng thông tin.
Cổng thông tin có độ phức tạp thấp của một ứng dụng nhiều trang với tính năng 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>
Thông số kỹ thuật của cổng thông tin vẫn đang ở giai đoạn đầu phát triển.
Các phần tử HTML khác dùng để nhúng
Trong suốt lịch sử web, đã có một số phần tử HTML được đề xuất và các API được tạo để nhúng nội dung. Trong một thời gian, việc tạo trang web bằng nhiều phần tử <frame> và <frameset> là phổ biến. Các trang web có một số phần tử <frameset> hiển thị URL của trang mẹ trong thanh địa chỉ, bất kể nguồn của nhiều khung 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. Các API này không còn được dùng nữa.
Cũng có thời điểm các công nghệ trình bổ trợ, chẳng hạn như phần tử <applet> của Java, được dùng để xử lý các trường hợp sử dụng khác. Sau đó, 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ị 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>, đã làm cho cả phần tử <object> và <applet> trở nên lỗi thời.
Mặc dù <object> và <embed> chưa bị ngừng sử dụng chính thức, nhưng tốt nhất bạn nên tránh sử 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 bản đặc tả 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 thông số kỹ thuật hiện có của iframe. Đã đề xuất thêm các phần tử HTML, bao gồm <fencedframe> và <portal> để cải thiện tính bảo mật và kiểu. Chúng tôi sẽ tiếp tục chia sẻ tiến trình của đề xuất về Khung được phân vùng khi đề xuất này tiếp tục phát triển.