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 |
---|---|
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 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.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/a-comparison-before-aft-4902b6c89fcb5.png?authuser=9&hl=vi)
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.
const frameConfig = await navigator.runAdAuction({ // ...auction configuration resolveToConfig: true });
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:
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ệ](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/in-chrome-experiments-se-46957b7b97eb3.png?authuser=9&hl=vi)
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ữ.