<fencedframe>: Phần tử Fenced Frame

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

allow Thử nghiệm

Chỉ định một Chính sách quyền cho <fencedframe>, xác định các tính năng nào có sẵn cho <fencedframe> dựa trên nguồn gốc của yêu cầu. Xem Chính sách quyền có sẵn cho fenced frames để biết thêm chi tiết về các tính năng nào có thể được kiểm soát thông qua chính sách đặt trên fenced frame.

height Thử nghiệm

Một số nguyên không có đơn vị biểu diễn chiều cao của fenced frame tính bằng pixel CSS. Mặc định là 150.

width Thử nghiệm

Một số nguyên không có đơn vị biểu diễn chiều rộng của fenced frame tính bằng pixel CSS. Mặc định là 300.

Chính sách quyền có sẵn cho fenced frames

Các quyền được ủy quyền từ ngữ cảnh cấp cao nhất đến fenced frame để cho phép hoặc từ chối các tính năng có thể được sử dụng như kênh liên lạc, do đó tạo thành mối đe dọa về quyền riêng tư. Kết quả là, các tính năng web tiêu chuẩn mà tính khả dụng của chúng có thể được kiểm soát qua Chính sách quyền (ví dụ: camera hoặc geolocation) không có sẵn trong fenced frames.

Các tính năng duy nhất có thể được bật bởi chính sách bên trong fenced frames là các tính năng cụ thể được thiết kế để sử dụng bên trong fenced frames:

• Protected Audience API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• Shared Storage API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

Hiện tại, những tính năng này luôn được bật bên trong fenced frames. Trong tương lai, những tính năng nào được bật sẽ có thể kiểm soát được bằng thuộc tính allow của <fencedframe>. Việc chặn các tính năng privacy sandbox theo cách này cũng sẽ chặn việc tải fenced frame — không có kênh liên lạc nào cả.

Di chuyển focus qua ranh giới fenced frame

Khả năng di chuyển focus đang hoạt động của tài liệu qua các ranh giới fenced frame (tức là từ một phần tử bên ngoài fenced frame đến một phần tử bên trong, hoặc ngược lại) bị giới hạn. Các hành động do người dùng khởi tạo như nhấp chuột hoặc nhấn Tab có thể làm điều đó, vì ở đó không có rủi ro lấy dấu vân tay.

Tuy nhiên, việc cố gắng di chuyển qua ranh giới thông qua một lệnh gọi API như HTMLElement.focus() bị cấm — một script độc hại có thể sử dụng một loạt các lệnh gọi như vậy để rò rỉ thông tin được suy ra qua ranh giới.

Định vị và thu phóng

Là một phần tử thay thế, <fencedframe> cho phép vị trí của tài liệu nhúng trong hộp của nó được điều chỉnh bằng thuộc tính object-position.

Kích thước của nội dung nhúng có thể được đặt bởi các thuộc tính contentWidth và contentHeight bên trong của đối tượng config của <fencedframe>. Trong trường hợp đó, việc thay đổi width hoặc height của <fencedframe> sẽ thay đổi kích thước của vùng chứa nhúng trên trang, nhưng tài liệu bên trong vùng chứa sẽ được thu phóng trực quan để phù hợp. Chiều rộng và chiều cao được báo cáo của tài liệu nhúng (tức là Window.innerWidth và Window.innerHeight) sẽ không thay đổi.

Khả năng tiếp cận

Người dùng điều hướng bằng công nghệ hỗ trợ, chẳng hạn như đọc màn hình, có thể sử dụng thuộc tính title trên <fencedframe> để gán nhãn nội dung của nó. Giá trị của tiêu đề phải mô tả ngắn gọn nội dung nhúng:

<fencedframe
  title="Advertisement for new Log. From Blammo!"
  width="640"
  height="320"></fencedframe>

Nếu không có tiêu đề này, người dùng phải điều hướng vào <fencedframe> để xác định nội dung nhúng của nó là gì. Sự thay đổi ngữ cảnh này có thể gây nhầm lẫn và tốn thời gian, đặc biệt đối với các trang có nhiều <fencedframe> và/hoặc nếu nội dung nhúng chứa nội dung tương tác như video hoặc âm thanh.

Ví dụ

Để đặt nội dung nào sẽ được hiển thị trong <fencedframe>, một API sử dụng (chẳng hạn như Protected Audience hoặc Shared Storage) tạo ra một đối tượng FencedFrameConfig, sau đó được đặt làm giá trị của thuộc tính config của <fencedframe>.

Ví dụ sau lấy FencedFrameConfig từ phiên đấu giá quảng cáo của Protected Audience API, sau đó được sử dụng để hiển thị quảng cáo thắng cuộc trong <fencedframe>:

<fencedframe width="640" height="320"></fencedframe>

const frameConfig = await navigator.runAdAuction({
  // … auction configuration
  resolveToConfig: true,
});

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Fenced Frame API
• Fenced frames trên privacysandbox.google.com
• The Privacy Sandbox trên privacysandbox.google.com