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

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

• Được cung cấp rộng rãi trong Chrome.
• 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 được 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 được phân vùng hạn chế giao tiếp với bối 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 bối 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 được 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ể chia sẻ với khung được bao quanh.

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 được phân vùng, 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ớ

Trong 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ớ 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ớ trình duyệt sẽ được chia sẻ vì đây được coi là cùng trang web.

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 đượ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 đảm bảo quyền riêng tư.

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

Khung được rào 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 được rào. Đ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 ẩ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 được phân vùng không thể dùng postMessage để giao tiếp với trình nhúng. Tuy nhiên, khung được phân vùng có thể sử dụng postMessage với iframe bên trong khung được phân vùng.

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 một khung được rào và khung được rào 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 phân vùng.

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 được phân vùng trong một số trường hợp sử dụng nhất định (chẳng hạn như quảng cáo tái nhắm mục tiêu 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 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 được phân vùng 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 giới hạn được trình bày chi tiết hơn trong giải thích.

Khung được giới hạn so với iframe như thế nào?

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

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ư.

Khung được phân vùng có thay thế iframe không?

Cuối cùng, khung được giới hạn 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ọ API TURTLEDOVE (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 Bộ nhớ dùng chung.
• 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 đượ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 Shared Storage. 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 bao bọc để đ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 rào chắn và cấu hình Khung được rào chắn.

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ừ khung được giới hạn và iframe được nhúng trong khung được giới hạn.

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 được phân vùng. Tiêu đề cũng phải xuất hiện cho mọi iframe bên trong một khung được rào.

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ừ chương 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 được giới hạn trong bộ nhớ dùng chung. Từ trang của trình 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 được giới hạn, 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 được rào, 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 một đối tượng cấu hình khung được giới hạn, hãy xem phần giải thích.

Thử khung bảo vệ

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* để 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 kiến trúc nhiều trang, cung cấp các chiến lược triển khai khác nhau chỉ phù hợp với các kỹ sư trình duyệt. Hiện tại, Enable (Bật) hoạt động giống như Enabled with ShadowDOM (Đã bật bằng 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 được giới hạn 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