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

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

Nhúng nội dung vào trang một cách an toàn mà không cần chia sẻ dữ liệu trên 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
Các thay đổi về API web đối với urn to config Giải thích	Có trên Chrome vào quý 1 năm 2023.
Macro mẫu quảng cáo trong khung bảo vệ cho báo cáo quảng cáo (FFAR) Vấn đề về GitHub	Có trên Chrome vào quý 3 năm 2023.
Gửi báo hiệu tự động một lần Vấn đề về GitHub	Có trên Chrome vào quý 3 năm 2023.
Các cấu hình khung bảo vệ theo tuần tự Vấn đề về GitHub	Có trên Chrome vào quý 3 năm 2023.
Tuỳ 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 đề về GitHub	Có trên Chrome vào quý 4 năm 2023.
Gửi beacon tự động đến tất cả các URL đã đăng ký Vấn đề trê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 quảng cáo khỏi Urn iFrames 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 Reserve.top_navigation_start/commit Vấn đề về GitHub, Vấn đề về GitHub	Có trên 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 đề trong GitHub	Có trên Chrome vào quý 1 năm 2024
Thêm tính năng hỗ trợ cho beacon tự động trong các khung phụ trên nhiều nguồn gốc Vấn đề về GitHub	Có trên Chrome vào quý 1 năm 2024

Tại sao chúng ta cần khung bảo vệ?

Khung bảo vệ (<fencedframe>) là một phần tử HTML 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 thông qua 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. 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 chọn lọc để hiển thị trong khung có 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 bối cảnh nhúng với khung được bảo vệ.

Ví dụ: giả sử news.example (ngữ cảnh nhúng) nhúng quảng cáo từ shoes.example trong một khung được bảo vệ. news.example không thể đánh cắp 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 khả năng bảo vệ quyền riêng tư trên nhiều trang web bằng tính năng phân vùng bộ nhớ

Khi duyệt web, có thể bạn đã xem các sản phẩm trên một trang web và 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.

Ngày nay, kỹ thuật quảng cáo này chủ yếu đạt được thông qua công nghệ theo dõi, vốn sử dụng cookie của bên thứ ba để chia sẻ thông tin giữa các trang web. Đây là công nghệ mà Chrome cam kết loại bỏ và thay thế bằng nhiều biến thể bảo đảm quyền riêng tư hơn.

Chrome đang nỗ lực phân vùng bộ nhớ, để phân tách 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 vào news.example và iframe đó lưu trữ một giá trị vào bộ nhớ, thì bạn có thể đọc giá trị đó từ trang web shoes.example. Khi bộ nhớ đã được phân vùng, các iframe nhiều trang web sẽ không dùng chung bộ nhớ nữa, do đó, shoes.example sẽ không thể truy cập vào thông tin mà iframe đó lưu trữ. Nếu iframe được phân phát từ *.shoes.example và được nhúng trên *.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 trạng thái tham gia trước và sau khi lưu trữ.

Tính năng 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 được phân vùng, tình trạng rò rỉ thông tin 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 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 và API liên quan đến 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. 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 truy cập vào dữ liệu không được phân vùng trên nhiều trang web trong một môi trường bảo mật.

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

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, thì nhà xuất bản có thể suy ra thông tin về mối quan tâm của khách truy cập từ URL của quảng cáo đó. Hành động này không bảo đảm quyền riêng tư.

Với khung được bảo vệ, nhà xuất bản có thể hiển thị một quảng cáo phù hợp với mối quan tâm của khách truy cập, nhưng chỉ có nhà quảng cáo trong khung đó biết src và nhóm mối quan tâm. 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. Đối tượng này có thể được trả về từ một phiên đấu giá Protected Audience API hoặc thao tác 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ệ. Thẻ này khác với iframe nơi một URL hoặc URN mờ được gán cho thuộc tính src. Đối tượng FencedFrameConfig có một 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 đọc.

Khung bảo vệ không thể sử 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 iframe bên trong khung được 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 được bảo vệ và khung được bảo vệ không thể truy cập vào 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 mà nhà xuất bản có thể xem và quan sát được) không có sẵn trong khung bảo vệ.

Khung bảo vệ hoạt động giống như bối cảnh duyệt web ở cấp cao nhất (chẳng hạn như thẻ trình duyệt). Mặc dù khung được 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ư nhóm mối quan tâm Protected Audience API), nhưng khung đó không thể truy cập vào bộ nhớ không phân vùng hoặc cookie. Khung bảo vệ opaque-ads có thể truy cập vào cookie duy nhất dựa trên số chỉ dùng một lần và phân vùng lưu trữ.

Các đặc điểm của khung bảo vệ sẽ được trình bày chi tiết hơn trong nội dung giải thích.

Khung được bảo vệ so với iframe như thế nào?

Giờ đây, khi bạn đã biết khung bảo vệ nào sẽ có và không được phép, sẽ hữu ích khi so sánh với 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 vào DOM ngữ cảnh nhúng	Có	Không
Khi nhúng ngữ cảnh, bạn có thể truy cập vào DOM nội dung được nhúng	Có	Không
Các 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 lựa chọn giao tiếp bên ngoài hơn để bảo vệ quyền riêng tư.

Khung được 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 sử dụng riêng tư hơn khi dữ liệu từ nhiều phân vùng cấp cao nhất cần hiển thị trên cùng một trang.

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

Sử dụng khung bảo vệ

Khung được 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 để hiển thị tài liệu từ nhiều phân vùng lưu trữ trong một trang. Các API tiềm năng hiện đang được thảo luận.

Các ứng viên hiện tại cho tổ hợp này bao gồm:

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

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

Ví dụ

Để có được đối tượng config của khung có 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 (hoặc được đặt thành false), kết quả hứa hẹn sẽ phân giải thành một URN chỉ có thể dùng được trong iframe.

Lấy cấu hình khung được bảo vệ từ phiên đấu giá Protected Audience API

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

Lấy cấu hình khung có bảo vệ thông qua phần Lựa chọn URL bộ nhớ dùng chung

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

Sau khi lấy đượ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 do cấu hình biểu thị. Các phiên bản cũ của Chrome 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 với FencedFrameConfig trước khi điều hướng:

Đặt cấu hình thành 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 đề

Trình duyệt sẽ thiết lập Sec-Fetch-Dest: fencedframe cho các yêu cầu được thực hiện từ khung được bảo vệ và iframe nhúng trong một khung được bảo vệ.

Sec-Fetch-Dest: fencedframe

Máy chủ phải đặt tiêu đề phản hồi Supports-Loading-Mode: fenced-frame để tài liệu được tải trong khung được bảo vệ. Tiêu đề cũng phải xuất hiện đối với mọi iframe bên trong khung được bảo vệ.

Supports-Loading-Mode: fenced-frame

Ngữ cảnh 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ệ được 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 đến các worklet 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ó sẵn trong khung bảo vệ trong bộ nhớ dùng chung. Từ trang trình nhúng, một mã sự kiện mô phỏng sẽ được đặt làm ngữ cảnh bộ nhớ dùng chung. Từ khung được bảo vệ, dữ liệu sự kiện của khung sẽ được truyền vào.

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 được bảo vệ, bạn có thể truyền dữ liệu ở cấp sự kiện từ khung đó vào công việc lưu trữ 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 từ sharedStorage.context và dữ liệu cấp sự kiện của khung từ đối tượng data, sau đó báo cáo chúng 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.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

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

Dùng thử khung bảo vệ

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

Trong Thử nghiệm Chrome, hãy đặt Bật cho cờ có tên là Bật phần tử khung được bảo vệ

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

Các tuỳ chọn khác, Bật bằng ShadowDOM và Bật với nhiều cấu trúc trang, cung cấp các chiến lược triển khai khác nhau chỉ phù hợp cho các kỹ sư trình duyệt. Hiện tại, tuỳ chọn Enable (Bật) hoạt động theo cách tương tự như Bật bằng ShadowDOM. Trong tương lai, tuỳ chọn Bật sẽ ánh xạ thành Bật 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ó cấu hình khung bảo vệ 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 hiện được hỗ trợ từ Chrome 97 trở đi. Hiện tại, tính năng này không được các trình duyệt khác hỗ trợ.

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

Tính năng Khung bảo vệ đang được thảo luận tích cực 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 sẵn lòng.

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