Nội dung được nhúng là cách tốt nhất để giữ chân người dùng trên trang web của bạn, trong khi chia sẻ nội dung từ các trang hoặc trang web khác. Bài đăng này có thể nhỏ như một bài Tweet được nhúng, hiển thị theo kiểu và định dạng của Twitter. Chiến dịch có thể lớn như 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 được nhúng trên Shopify, 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.
Hơn bao giờ hết, điều quan trọng hơn bao giờ hết là trang web của chúng tôi phải bảo mật khi chúng tôi nhúng nội dung.
Có một số cách để nhà phát triển có thể nhúng nội dung vào trang web. Kỹ thuật phổ biến nhất là sử dụng <iframe>, cho phép bạn nhúng nội dung bất kỳ vào trang web của mình chỉ bằng một URL. Bạn hiện có thể thêm thuộc tính sandbox để tăng tính an toàn cho iframe.
Ngoài ra, bạn có thể sử dụng phần tử HTML được đề xuất:
<fencedframe>được đề xuất như 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 tăng cường tính bảo mật cho nội dung được nhúng.
Nhúng bằng iframe
Iframe có thể được sử dụng cho tất cả các loạ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, kèm theo 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 parent.
Nội dung của bên thứ ba hiển thị trong iframe có thể tương tác với trang web mẹ thông qua postMessage(). Điều này cho phép các nhà phát triển gửi các giá trị tuỳ ý giữa các ngữ 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 iframe, thì các hành động ngoài ý 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 thực thi trong iframe và tắt 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ể không cung cấp một số API quan trọng đối với nội dung được nhúng của bạn. Để cho phép API bị vô hiệu hoá, 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ó thể có một số giá trị cho quy cách kỹ thuật của sandbox, trong đó có 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 ra để quản lý quyền cho tất cả các tính năng này. Bạn có thể áp dụng chính sách về quyền cho trang web mẹ và nội dung iframe. Bạn cũng có thể cấp các quyền được 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 bảo vệ (<fencedframe>) là một phần tử HTML được đề xuất cho nội dung được nhúng, tương tự như một iframe. Không giống như iframe, khung bảo vệ hạn chế hoạt động 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ẻ với ngữ cảnh nhúng. Tương tự, bạn không thể chia sẻ dữ liệu của bên thứ nhất trên trang của thành phần mẹ với khung được bảo vệ.
<fencedframe src="https://3rd.party.example"></fencedframe>
Khung bảo vệ là một đề xuất Hộp cát về quyền riêng tư đề xuất 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 hay 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 một số tài liệu hiển thị trong khung được bảo vệ.
Ví dụ: một khung được bảo vệ sẽ được tạo cho bên chiến thắng trong phiên đấu giá quảng cáo FLEDGE API. FLEDGE API sẽ cung cấp một nguồn mờ, một giao thức URN độc lập với vị trí, có thể kết xuất 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 phải 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 bảo vệ sẽ không thay thế iframe. Bạn sẽ không phải sử dụng chúng. Khung bảo vệ được đề xuất cho một khung riêng tư hơn để sử dụng khi dữ liệu từ các phân vùng cấp cao nhất khác nhau cần hiển thị 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 với ngữ cảnh duyệt web độc lập, giúp 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 thông tin. Cổng thông tin ở chế độ chỉ có thể xem và người dùng không thể tương tác.
Cổng thông tin có độ phức tạp thấp như một ứng dụng nhiều trang với quá trình 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ể là ả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 ở giai đoạn phát triển ban đầu.
Các phần tử HTML khác được sử 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. Trước đây, chúng ta thường tạo các trang web có nhiều phần tử <frame> và <frameset>. Các trang web có nhiều phần tử <frameset> hiển thị URL của trang gốc trong thanh địa chỉ, bất kể nguồn của nhiều khung riêng lẻ là gì. Điều này đã gây khó khăn cho việc chia sẻ các đường liên kết đến nội dung trong trang web. Kể từ đó, 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 để áp dụng cho 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ị 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>) đã kết xuất cả phần tử <object> và <applet> đã 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 bạn nên tránh sử dụng các API này, đặc biệt là khi 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 thông số kỹ thuật iframe hiện có. Nhiều phần tử HTML hơn, bao gồm cả <fencedframe> và <portal> đã được đề xuất để 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 về đề xuất Khung bảo vệ trong quá trình triển khai.
Hình ảnh chính của Jackson So.