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

Nhúng nội dung vào trang web 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

• Đã lên lịch ngừng hoạt động.
• Dự định phát hành: Xoá phần tử FencedFrame và API window.fence
• Trạng thái của nền tảng Chrome

Tại sao chúng ta cần khung được phân vùng?

Khung bảo vệ (<fencedframe>) là một phần tử HTML để nhúng nội dung, 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 vào dữ liệu 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 bạn chọn tài liệu để hiển thị trong một khung bảo vệ.

Tương tự, mọi dữ liệu của bên thứ nhất trong bối cảnh nhúng đều không thể được chia sẻ với khung bảo vệ.

Ví dụ: nếu news.example (bối cảnh nhúng) nhúng một quảng cáo từ shoes.example trong một khung bảo vệ, thì 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ớ

Khi duyệt web, có thể bạn đã xem các sản phẩm trên một trang web, sau đó bạn thấy các sản phẩm đó xuất hiện lại trong một 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 được thực hiện thông qua công nghệ theo dõi sử dụng cookie của bên thứ ba để chia sẻ thông tin trên các trang web.

Chrome đang triển khai tính năng phân vùng bộ nhớ, giúp tách bộ nhớ của trình duyệt theo từng trang web. Nếu không phân vùng, 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ộ nhớ đã được phân vùng, các iframe trên nhiều trang web sẽ không còn dùng chung bộ nhớ nữa. 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 trên *.shoes.example, thì bộ nhớ của trình duyệt sẽ được chia sẻ vì đây được coi là cùng trang web.

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 được phân vùng là một tính năng của Hộp cát về quyền riêng tư. Tính năng này đề 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 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. 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ư.
• Shared Storage cho phép truy cập vào dữ liệu trên nhiều trang web chưa được phân vùng trong một môi trường an toàn.

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

Nếu nhà xuất bản hiển thị quảng cáo giành chiến thắng trong một 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 đó. Điều này không bảo đảm quyền riêng tư.

Với khung 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ỉ nhà quảng cáo trong khung mới biết src và nhóm đối tượng có cùng mối quan tâm. Nhà xuất bản không truy cập được vào thông tin này.

Khung được phân vùng hoạt động như thế nào?

Khung được rào 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 Shared Storage. Sau đó, đối tượng cấu hình được đặt làm thuộc tính config trên phần tử khung bảo vệ. Điều này khác với iframe, trong đó một URL hoặc URN mờ được chỉ định cho thuộc tính src. Đối tượng FencedFrameConfig có thuộc tính url chỉ đọc; tuy nhiên, vì các trường hợp sử dụng hiện tại yêu cầu phải ẩ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ể 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 bảo vệ.

Khung được phân vùng 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 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 và được nhà xuất bản quan sát) không có trong khung được bao quanh.

Khung được rào chắn hoạt động như một 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 bảo vệ trong một số trường hợp sử dụng nhất định (chẳng hạn như quảng cáo nhắm mục tiêu lại dựa trên mối quan tâm) có thể chứa dữ liệu trên nhiều trang web (chẳng hạn như nhóm đối tượng có cùng mối quan tâm Protected Audience API), nhưng khung này không thể truy cập vào bộ nhớ hoặc cookie chưa được phân vùng. Khung bảo vệ có thể truy cập vào một 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 điểm của khung được phân vùng được trình bày chi tiết hơn trong phần giải thích.

Khung được phân vùng khác gì so với iframe?

Giờ đây, khi đã biết những việc mà khung được giới hạn có thể và không thể làm, bạn nên so sánh với các tính năng iframe hiện có.

Khung được phân vùng hỗ trợ ít lựa chọn giao tiếp bên ngoài hơn để bảo vệ quyền riêng tư.

Liệu khung được phân vùng có thay thế iframe không?

Cuối cùng, khung được phân vùng sẽ không thay thế iframe và bạn không bắt buộc phải sử dụng chúng. Khung được phân vùng là 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 khác nhau trên cùng một trang.

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

Sử dụng khung bảo vệ

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

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

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

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

Ví dụ

Để lấy đối tượng config 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 bạn không thêm thuộc tính này (hoặc đặt thành false), thì lời hứa thu được sẽ phân giải thành một URN chỉ có thể dùng trong iframe.

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

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

Sau khi nhận được cấu hình, bạn có thể chỉ định cấu hình đó cho thuộc tính config của khung được phân vùng để điều hướng khung đến tài nguyên do 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 một FencedFrameConfig trước khi điều hướng:

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

Để tìm hiểu thêm, hãy xem các tài liệu giải thích về Khung được phân vùng và cấu hình Khung được phân vùng.

Tiêu đề

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

Sec-Fetch-Dest: fencedframe

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

Supports-Loading-Mode: fenced-frame

Bối cảnh Bộ nhớ dùng chung

Bạn có thể muốn sử dụng Private Aggregation để báo cáo dữ liệu cấp sự kiện trong các khung được giới hạn 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 ta sẽ lưu trữ một số dữ liệu có trên trang của ứng dụng nhúng và một số dữ liệu có trong khung bảo vệ trong bộ nhớ dùng chung. Từ trang của ứng dụng nhúng, một mã sự kiện mô phỏng được đặt làm bối cảnh bộ nhớ dùng chung. Từ khung bảo vệ, dữ liệu sự kiện khung sẽ được truyền vào.

Trên trang của ứng dụng nhúng, bạn có thể đặt dữ liệu theo bối cảnh làm bối cảnh 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 của 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 ứng dụng nhúng từ sharedStorage.context và dữ liệu cấp sự kiện của khung hình 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 đối tượng cấu hình khung được giới hạn, hãy xem phần giải thích.

Thử khung được phân vùng

Sử dụng cờ Chrome để bật Fenced Frame API tại chrome://flags/#enable-fenced-frames.

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

Các lựa chọn khác, Đã bật với ShadowDOM và Đã bật với cấu trúc nhiều trang, cung cấp các chiến lược triển khai khác nhau chỉ liên quan đến các kỹ sư trình duyệt. Hiện tại, Enable hoạt động giống như Enabled with ShadowDOM. Trong tương lai, Bật sẽ tương ứng với Bật với cấu trúc nhiều trang.

Phát hiện đối tượng

Cách xác định xem các khung được phân vùng có được xác định hay không:

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

Cách xác định xem cấu hình khung bảo vệ có dùng được hay không:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Hỗ trợ trình duyệt

• MDN
• Trạng thái của nền tảng Chrome

Tương tác và chia sẻ ý kiến phản hồi

Fenced Frame đ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 mong nhận được ý kiến của bạn.

• GitHub: Đọc bài giải thích, đặt câu hỏi và theo dõi cuộc thảo luận.

Tìm hiểu thêm

• Trạng thái của nền tảng Chrome
• Ý định của Blink đối với Nguyên mẫu