Trang này được dịch bởi Cloud Translation API.

Tổng quan về khung bảo vệ

Nhúng nội dung một cách an toàn vào trang mà không cần chia sẻ dữ liệu giữa nhiều trang web.

Trạng thái triển khai

Tài liệu này trình bày một phần tử HTML mới: <fencedframe>.

Đề xuất Khung được bảo vệ hiện đã được phát hành rộng rãi.
Trạng thái của Nền tảng Chrome

Đề xuất	Trạng thái
Thay đổi API web cho urn thành config Giải thích	Sẽ có trong Chrome vào Quý 1 năm 2023.
Macro mẫu quảng cáo trong khung bảo vệ để báo cáo quảng cáo (FFAR) Vấn đề GitHub	Sẽ có trong Chrome vào quý 3 năm 2023.
Gửi Beacon tự động một lần Vấn đề trên GitHub	Sẽ có trong Chrome vào quý 3 năm 2023.
Cấu hình khung bảo vệ theo tuần tự Vấn đề GitHub	Có trên Chrome vào Quý 3 năm 2023.
Lựa chọn định dạng bổ sung cho các Macro kích thước quảng cáo của Protected Audience Vấn đề GitHub	Sẽ có trong Chrome vào quý 4 năm 2023.
Báo hiệu tự động gửi đến tất cả URL đã đăng ký Vấn đề GitHub \| Vấn đề trên GitHub	Có trên Chrome vào Quý 4 năm 2023.
Bật tính năng Rời khỏi nhóm mối quan tâm về quảng cáo từ iFrame Urn và Khung thành phần quảng cáo Vấn đề trên GitHub	Có trên Chrome vào Quý 1 năm 2024
Giới thiệu reserved.top_navigation_start/commit Vấn đề trên GitHub, Vấn đề trên GitHub	Sẽ có trong Chrome vào quý 1 năm 2024
Không tắt chế độ cài đặt cookie trong ReportEvent cho đến khi 3PCD Vấn đề trên GitHub	Sẽ có trong Chrome vào quý 1 năm 2024
Thêm tính năng hỗ trợ cho beacon tự động trong các khung con nhiều nguồn gốc Vấn đề trên GitHub	Sẽ có trong Chrome vào quý 1 năm 2024
Cho phép Khung con trên nhiều nguồn gốc gửi Beacon `reportEvent()` Vấn đề trên GitHub	Có trên Chrome vào Quý 2 năm 2024

Tại sao chúng ta cần khung có hàng rào?

Khung hàng rào (<fencedframe>) là một phần tử HTML dành cho các tính năng nhúng tương tự như iframe. Không giống như iframe, khung bảo vệ hạn chế giao tiếp với ngữ cảnh nhúng để cho phép khung truy cập trên nhiều trang web mà không chia sẻ dữ liệu đó với ngữ cảnh nhúng. 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 khung bảo vệ.

Tương tự, bạn không thể chia sẻ bất kỳ dữ liệu của bên thứ nhất nào trong ngữ cảnh nhúng khung bảo vệ.

Ví dụ: giả sử news.example (ngữ cảnh nhúng) nhúng một quảng cáo từ shoes.example trong khung bảo vệ. news.example không thể trích xuất dữ liệu từ quảng cáo shoes.example và shoes.example không thể tìm hiểu dữ liệu của bên thứ nhất từ news.example.

Tăng cường quyền riêng tư trên nhiều trang web bằng tính năng phân vùng bộ nhớ

Trong khi duyệt web, có thể bạn đã xem xét các sản phẩm trên một trang web, sau đó bạn đã thấy chúng xuất hiện lại trong quảng cáo trên một trang web hoàn toàn khác.

Hiện nay, kỹ thuật quảng cáo này chủ yếu đạt được thông qua việc theo dõi sử dụng cookie của bên thứ ba để chia sẻ thông tin giữa các trang web. Chiến dịch này là công nghệ mà Chrome đã cam kết theo từng giai đoạn và thay thế bằng các biến thể bảo đảm quyền riêng tư khác.

Chrome đang giải quyết vấn đề về bộ nhớ phân vùng, tức là tách riêng bộ nhớ của trình duyệt trên mỗi trang web. Hiện tại, nếu một iframe từ shoes.example được nhúng trên news.example và iframe đó lưu trữ một giá trị vào bộ nhớ, thì giá trị đó có thể được đọc từ trang web shoes.example. Khi bạn đã giải phóng bộ nhớ đã phân vùng, các iframe giữa các trang web sẽ không còn chia sẻ bộ nhớ, do đó shoes.example sẽ không thể truy cập vào thông tin do iframe lưu trữ. Nếu iframe được phân phát từ *.shoes.example và được nhúng vào *.shoes.example, bộ nhớ của trình duyệt sẽ được chia sẻ vì đây được coi là cùng một trang web.

So sánh giữa trạng thái phân vùng bộ nhớ trước và sau.

Phân vùng bộ nhớ sẽ được áp dụng cho các API bộ nhớ tiêu chuẩn bao gồm LocalStorage, IndexedDB và cookie. Trong một thế giới bị phân chia, thông tin tình trạng rò rỉ trên bộ nhớ của bên thứ nhất sẽ giảm đáng kể.

Làm việc với dữ liệu trên nhiều trang web

Khung bảo vệ là một tính năng của Hộp cát về quyền riêng tư Theo đó, các trang web cấp cao nhất nên phân vùng dữ liệu. Nhiều Hộp cát về quyền riêng tư các đề xuất và API nhằm đáp ứng các trường hợp sử dụng trên nhiều trang web mà không cần sử dụng cookie của bên thứ ba hoặc các cơ chế theo dõi khác. Ví dụ:

Protected Audience API cho phép phân phát quảng cáo dựa trên mối quan tâm theo cách bảo đảm quyền riêng tư.
Bộ nhớ dùng chung cho phép quyền truy cập vào dữ liệu trên nhiều trang web không được phân vùng trong môi trường an toàn.

Hãy xem xét cách khung bảo vệ có thể hoạt động với Protected Audience API. Với Protected Audience API, mối quan tâm của người dùng được đăng ký trên trang web của nhà quảng cáo về mối quan tâm nhóm, cùng với những quảng cáo có thể khiến người dùng quan tâm. Sau đó, trên một trang web riêng biệt (được gọi là "nhà xuất bản"), các quảng cáo đã đăng ký trong nhóm có cùng mối quan tâm có liên quan được đấu giá và quảng cáo chiến thắng sẽ xuất hiện trong khung hàng rào.

Nếu nhà xuất bản hiển thị quảng cáo giành chiến thắng trong iframe và tập lệnh có thể đọc thuộc tính src của iframe, nhà xuất bản có thể suy luận thông tin về lượt truy cập sở thích từ URL của quảng cáo đó. Hoạt động này không bảo đảm quyền riêng tư.

Với khung hàng rào, nhà xuất bản có thể hiển thị một quảng cáo phù hợp với khách truy cập sở thích nhưng src và nhóm mối quan tâm sẽ chỉ được nhà quảng cáo biết trong khung. Nhà xuất bản không thể truy cập vào thông tin này.

Khung bảo vệ hoạt động như thế nào?

Khung bảo vệ sử dụng đối tượng FencedFrameConfig để điều hướng. Hệ thống có thể trả về đối tượng này từ một phiên đấu giá Protected Audience API hoặc thao tác lựa chọn URL của Bộ nhớ dùng chung. Sau đó, đối tượng config được đặt làm thuộc tính config trên phần tử khung bảo vệ. Tham số này khác với iframe trong đó một URL hoặc URN mờ được gán cho thuộc tính src. Đối tượng FencedFrameConfig có thuộc tính url chỉ có thể đọc; tuy nhiên, vì các trường hợp sử dụng hiện tại yêu cầu ẩn URL thực tế của tài nguyên nội bộ, nên thuộc tính này sẽ trả về chuỗi opaque khi đọc.

Khung bảo vệ không thể dùng postMessage để giao tiếp với trình nhúng. Tuy nhiên, khung bảo vệ có thể sử dụng postMessage với các iframe bên trong khung bảo vệ.

Khung bảo vệ sẽ được tách biệt với nhà xuất bản theo những cách khác. Ví dụ: nhà xuất bản sẽ không có quyền truy cập vào DOM bên trong khung bảo vệ và khung bảo vệ không thể truy cập DOM của nhà xuất bản. Ngoài ra, các thuộc tính như name – có thể được đặt thành bất kỳ giá trị nào và được quan sát bởi nhà xuất bản—không có trong khung bảo vệ.

Khung bảo vệ hoạt động giống như chế độ duyệt web cấp cao nhất bối cảnh (chẳng hạn như một thẻ trình duyệt). Mặc dù khung bảo vệ trong một số trường hợp sử dụng nhất định (chẳng hạn như opaque-ads) có thể chứa dữ liệu trên nhiều trang web (chẳng hạn như mối quan tâm về Protected Audience API nhóm), khung không thể truy cập cookie hoặc bộ nhớ không được phân vùng. Một Khung bảo vệ opaque-ads có thể truy cập vào một cookie và bộ nhớ riêng biệt dựa trên số chỉ dùng một lần phân vùng.

Đặc điểm của khung bảo vệ sẽ được nêu chi tiết hơn trong giải thích.

Khung bảo vệ so với khung nội tuyến như thế nào?

Bây giờ, bạn đã biết khung bảo vệ nào sẽ và không được bảo vệ, giờ bạn nên so sánh vào các tính năng iframe hiện có.

Tính năng	`iframe`	`fencedframe`
Nhúng nội dung	Có	Có
Nội dung được nhúng có thể truy cập DOM ngữ cảnh nhúng	Có	Không
Ngữ cảnh nhúng có thể truy cập vào DOM của nội dung được nhúng	Có	Không
Thuộc tính có thể quan sát, chẳng hạn như `name`	Có	Không
URL (`http://example.com`)	Có	Có (tuỳ thuộc vào trường hợp sử dụng)
Nguồn mờ do trình duyệt quản lý (`urn:uuid`)	Không	Có
Quyền truy cập vào dữ liệu trên nhiều trang web	Không	Có (tuỳ thuộc vào trường hợp sử dụng)

Khung bảo vệ hỗ trợ ít tuỳ chọn giao tiếp bên ngoài hơn để bảo vệ quyền riêng tư.

Khung bảo vệ có thay thế iframe không?

Cuối cùng, khung bảo vệ sẽ không thay thế iframe và bạn sẽ không phải sử dụng chúng. Khung bảo vệ là khung riêng tư hơn để sử dụng khi dữ liệu từ phân vùng cấp cao nhất khác nhau cần được hiển thị trên cùng một trang.

iframe cùng trang web (đôi khi được gọi là iframe thân thiện) được xem là đáng tin cậy nội dung.

Sử dụng khung bảo vệ

Khung bảo vệ sẽ hoạt động kết hợp với các API Hộp cát về quyền riêng tư khác nhằm hiển thị tài liệu từ nhiều phân vùng bộ nhớ trong cùng một trang. Các API tiềm năng hiện đang được thảo luận.

Các đề xuất hiện tại cho kiểu kết hợp này bao gồm:

Từ nhóm TURTLEDOVE API (tức là cơ sở cho Protected Audience API), các khung được bảo vệ có thể hoạt động với Mức tăng lượt chuyển đổi Đo lường thông qua Bộ nhớ dùng chung.
Một phương án khác là cho phép các khung bảo vệ chỉ có thể đọc hoặc truy cập không được phân vùng bộ nhớ.

Để biết thêm chi tiết, hãy tham khảo phần Khung bảo vệ thông tin giải thích về các trường hợp sử dụng.

Ví dụ

Để có được đối tượng config của khung bảo vệ, bạn phải truyền resolveToConfig: true đến lệnh gọi runAdAuction() của Protected Audience API hoặc lệnh gọi selectURL() của Bộ nhớ dùng chung. Nếu thuộc tính không được thêm vào (hoặc được đặt thành false), thì kết quả hứa hẹn sẽ phân giải thành URN chỉ có thể dùng trong iframe.

Nhận cấu hình khung bảo vệ từ phiên đấu giá Protected Audience API

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

Nhận cấu hình khung bảo vệ từ phần Lựa chọn URL của bộ nhớ dùng chung

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Sau khi có được cấu hình, bạn có thể gán cấu hình đó cho thuộc tính config của khung bảo vệ để điều hướng khung đến tài nguyên mà cấu hình đại diện. Các phiên bản Chrome cũ hơn không hỗ trợ thuộc tính resolveToConfig, vì vậy, bạn vẫn phải xác nhận rằng lời hứa được giải quyết thành FencedFrameConfig trước khi điều hướng:

Đặt cấu hình cho thuộc tính khung bảo vệ

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Để tìm hiểu thêm, hãy xem nội dung giải thích về Khung bảo vệ và Cấu hình Khung bảo vệ.

Tiêu đề

Các trình duyệt sẽ đặt Sec-Fetch-Dest: fencedframe cho các yêu cầu được thực hiện từ khung bảo vệ và iframe được nhúng trong một khung có hàng rào.

Sec-Fetch-Dest: fencedframe

Máy chủ phải đặt tiêu đề phản hồi Supports-Loading-Mode: fenced-frame để tải một tài liệu trong khung bảo vệ. Bạn cũng phải có tiêu đề cho mọi iframe bên trong khung được bảo vệ.

Supports-Loading-Mode: fenced-frame

Ngữ cảnh của Bộ nhớ dùng chung

Bạn nên sử dụng tính năng Tổng hợp riêng tư để báo cáo dữ liệu cấp sự kiện trong các khung bảo vệ liên kết với dữ liệu theo bối cảnh từ trình nhúng. Bằng cách sử dụng phương thức fencedFrameConfig.setSharedStorageContext(), bạn có thể truyền một số dữ liệu theo bối cảnh, chẳng hạn như mã sự kiện, từ trình nhúng sang các công việc về bộ nhớ dùng chung do Protected Audience API khởi tạo.

Trong ví dụ sau, chúng tôi lưu trữ một số dữ liệu có sẵn trên trang trình nhúng và một số dữ liệu có trong khung bảo vệ trong bộ nhớ dùng chung. Trên trang nhúng, mã sự kiện mô phỏng được đặt làm ngữ cảnh bộ nhớ dùng chung. Dữ liệu sự kiện khung sẽ được chuyển từ khung bảo vệ.

Trên trang trình nhúng, bạn có thể đặt dữ liệu theo bối cảnh làm bối cảnh của bộ nhớ dùng chung:

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

Từ khung bảo vệ, bạn có thể truyền dữ liệu cấp sự kiện từ khung vào worklet bộ nhớ dùng chung (không liên quan đến dữ liệu theo bối cảnh từ trình nhúng ở trên):

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

Bạn có thể đọc thông tin theo bối cảnh của trình nhúng trên sharedStorage.context và dữ liệu ở cấp sự kiện của khung từ đối tượng data, sau đó báo cáo các thông tin này thông qua tính năng Tổng hợp riêng tư:

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

Để tìm hiểu thêm về ngữ cảnh của trình nhúng trong một đối tượng cấu hình khung được bảo vệ, hãy xem phần giải thích.

Thử dùng khung bảo vệ

Sử dụng Chrome cờ thành bật API Khung bảo vệ tại chrome://flags/#enable-fenced-frames.

Trong các thử nghiệm của Chrome, hãy đặt trạng thái Bật cho cờ có tên Bật phần tử khung bảo vệ

Có nhiều lựa chọn trong hộp thoại. Chúng tôi thực sự khuyên bạn nên chọn *Bật*, cho phép Chrome tự động cập nhật lên cấu trúc mới khi công cụ này có sẵn.

Các tuỳ chọn khác, Bật bằng ShadowDOM và Bật cùng với nhiều tuỳ chọn cấu trúc trang, hãy cung cấp các chiến lược triển khai khác nhau chỉ có liên quan đến các kỹ sư trình duyệt. Hiện nay, tuỳ chọn Bật hoạt động giống như Đã bật với ShadowDOM. Trong tương lai, chế độ Bật sẽ ánh xạ thành Bật cùng với cấu trúc nhiều trang.

Phát hiện tính năng

Cách xác định xem khung bảo vệ đã được xác định hay chưa:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

Cách xác định xem cấu hình khung bảo vệ có hoạt động hay không: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

Hỗ trợ trình duyệt

Phần tử <fencedframe> vẫn đang ở chế độ thử nghiệm nên đang ở chế độ được hỗ trợ từ Chrome 97 trở đi. Hiện tại, ứng dụng không được hỗ trợ bởi trình duyệt web.

Thu hút và chia sẻ ý kiến phản hồi

Khung bảo vệ đang được thảo luận sôi nổi và có thể thay đổi trong tương lai. Nếu bạn dùng thử API này và có ý kiến phản hồi, chúng tôi rất mong nhận được ý kiến phản hồi của bạn.

GitHub: Đọc tài liệu giải thích, đặt câu hỏi và theo dõi .
Hỗ trợ nhà phát triển: Đặt câu hỏi và tham gia thảo luận trên Hỗ trợ nhà phát triển Hộp cát về quyền riêng tư kho lưu trữ.