Bezpiecznie umieszczaj treści na stronie bez udostępniania danych z innych witryn.
Stan implementacji
W tym dokumencie opisujemy nowy element HTML: <fencedframe>
.
- Oferta pakietowa Chronione ramki jest teraz ogólnodostępna.
- Stan platformy Chrome
Propozycja | Stan |
---|---|
Zmiany interfejsu Web API związane z tworzeniem konfiguracji Wyjaśnienie |
Funkcja dostępna w Chrome w I kwartale 2023 r. |
Makra kreacji w opartych ramkach na potrzeby raportowania reklam (FFAR) Problem z GitHubem |
Dostępne w Chrome w III kwartale 2023 r. |
Wysyłaj automatyczne obrazy typu beacon raz Problem z GitHubem |
Dostępne w Chrome w III kwartale 2023 r. |
Konfiguracje możliwych do serializacji konfiguracji chronionych ramek Problem z GitHubem |
Dostępne w Chrome w III kwartale 2023 r. |
Dodatkowe opcje formatu dla makr rozmiaru reklamy w ramach Protected Audience API Problem z GitHubem |
Funkcja dostępna w Chrome w IV kwartale 2023 roku. |
Automatyczne przesyłanie beaconów do wszystkich zarejestrowanych adresów URL Problem z GitHubem | Problem z GitHubem |
Funkcja dostępna w Chrome w IV kwartale 2023 roku. |
Włącz opcję opuszczania grup zainteresowań związanych z reklamami w elementach iframe Urn i ramkach komponentów reklamy
Problem z GitHubem |
Dostępne w Chrome w I kwartale 2024 r. |
Wprowadź zgłoszenie zarezerwowane.top_navigation_start/commit
problem z GitHubem, problem z GitHubem |
Dostępne w Chrome w I kwartale 2024 r. |
Nie wyłączaj ustawień plików cookie w narzędziu ReportEvent przed 3PCD
Problem z GitHubem |
Dostępne w Chrome w I kwartale 2024 r. |
Dodano obsługę automatycznych obrazów typu beacon w ramkach podrzędnych z innych domen
Problem z GitHubem |
Dostępne w Chrome w I kwartale 2024 r. |
Dlaczego potrzebujemy ogrodzonych ramek?
Chroniona ramka (<fencedframe>
) to element HTML przeznaczony do umieszczania
przypominające element iframe. W przeciwieństwie do elementów iframe chroniona ramka ogranicza
Komunikacja z kontekstem wektora dystrybucyjnego, która umożliwia ramce dostęp do innej witryny
danych bez udostępniania ich wraz z kontekstem umieszczania. Niektóre interfejsy API Piaskownicy prywatności
może wymagać wyświetlania wybranych dokumentów w zabezpieczonej ramce.
Analogicznie: w kontekście umieszczania nie można udostępniać żadnych danych własnych. i nadal znajduje się w obszernej ramce.
Załóżmy np., że w przypadku elementu news.example
(kontekst wektora dystrybucyjnego) umieszczana jest reklama z
shoes.example
w ogrodzonej ramce. news.example
nie może wydobyć danych z:
reklama shoes.example
i shoes.example
nie mogą uczyć się danych własnych z
news.example
Większa prywatność na różnych stronach dzięki partycjonowaniu miejsca na dane
Podczas przeglądania internetu pewnie zdarzyło Ci się już obejrzeć produkty w jednej witrynie, widzieliśmy je ponownie w reklamie w zupełnie innej witrynie.
Obecnie technikę reklamową uzyskuje się głównie przez śledzenie to technologia, która korzysta z plików cookie innych firm do udostępniania informacji między witrynami. Ten jest technologią, którą Chrome spalone i zastąpić je wariantami, które chronią prywatność.
Chrome pracuje nad miejscem na dane
partycjonowanie, które
oddziela pamięć przeglądarki w poszczególnych witrynach. Obecnie, jeśli element iframe z shoes.example
jest umieszczona w news.example
i zapisuje wartość tego elementu w pamięci,
tę wartość można odczytać z witryny shoes.example
. Po zużyciu miejsca na dane
partycjonowane, elementy iframe należące do różnych witryn nie będą już współdzielić miejsca na dane.
shoes.example
nie będzie mieć dostępu do informacji przechowywanych w elemencie iframe. Jeśli
element iframe jest wyświetlany z witryny *.shoes.example
i umieszczony na
*.shoes.example
, pamięć przeglądarki będzie współdzielona, ponieważ są uznawane za tę samą witrynę.
![Porównanie stanu partycji na dane przed i po.](https://developers.google.cn/static/privacy-sandbox/assets/images/a-comparison-before-aft-4902b6c89fcb5.png?authuser=9&hl=pl)
Partycjonowanie miejsca na dane będzie stosowane do standardowych interfejsów API pamięci masowej, w tym LocalStorage, IndexedDB i pliki cookie. W podzielonym świecie informacje wyciek danych w pamięci własnej zostanie znacznie zmniejszony.
Praca z danymi z różnych witryn
Ogrodzone ramki to funkcja Piaskownicy prywatności co sugeruje, że witryny najwyższego poziomu powinny partycjonować dane. Wiele Piaskownicy prywatności oferty pakietowe i interfejsy API mają na celu zapewnienie obsługi przypadków użycia w różnych witrynach bez użycia plików cookie innych firm za pomocą innych mechanizmów śledzenia. Na przykład:
- Interfejs Protected Audience API umożliwia wyświetlanie reklam opartych na zainteresowaniach. w sposób zapewniający ochronę prywatności.
- Pamięć współdzielona umożliwia dostępu do bezpartycjonowanych danych z różnych witryn w bezpiecznym środowisku.
Zastanówmy się, jak ogrodzone ramki sprawdzą się Protected Audience API. Protected Audience API umożliwia poznanie zainteresowań użytkownika są zarejestrowani w witrynie reklamodawcy w ramach zainteresowań grup, wraz z reklamami, które może być interesujące dla użytkownika. Następnie w osobnej witrynie (znanej jako „wydawca”), reklamy zarejestrowane w odpowiednich grupach zainteresowań są wystawiane na aukcji, zwycięska reklama jest wyświetlana w ramce.
Jeśli zwycięska reklama jest wyświetlana w elemencie iframe, a skrypt może odczytać wartość
w elemencie iframe src
, wydawca może uzyskać informacje o
zainteresowań z adresu URL tej reklamy. Ta zmiana nie zapewnia ochrony prywatności.
Dzięki ramce ogrodzonej wydawca może wyświetlić reklamę dopasowaną do użytkownika
zainteresowań, ale grupa src
i grupa zainteresowań będą znane tylko reklamodawcy
w kadrze. Wydawca nie mógł uzyskać dostępu do tych informacji.
Jak działają ramki ogrodowe?
Ramki chronione używają do nawigacji obiektu FencedFrameConfig
. Ten obiekt może zostać zwrócony w wyniku aukcji Protected Audience API lub operacji wyboru adresu URL w Współdzielonej pamięci masowej. Następnie obiekt config jest ustawiany jako atrybut config
w eleganckim elemencie ramki. Różni się to od elementów iframe, w których do atrybutu src
przypisany jest URL lub nieprzezroczysty URN. Obiekt FencedFrameConfig
ma tylko do odczytu właściwość url
. jednak bieżące przypadki użycia wymagają ukrycia rzeczywistego adresu URL zasobu wewnętrznego, więc ta właściwość podczas odczytu zwraca ciąg opaque
.
Ramka chroniona nie może komunikować się z elementem umieszczanym za pomocą postMessage
. Ramka chroniona może jednak używać elementu postMessage
z elementami iframe wewnątrz ogrodzonej ramki.
Chronione ramki będą odizolowane od wydawcy na inne sposoby. Przykład:
wydawca nie będzie miał dostępu do modelu DOM wewnątrz chronionej ramki,
ramka chroniona nie może uzyskać dostępu do DOM wydawcy. Atrybuty takie jak
name
– która może mieć dowolną wartość i być obserwowana przez
wydawcy – nie są dostępne w chronionych ramkach.
Chronione ramki działają jak przeglądanie najwyższego poziomu
kontekst
(np. karty przeglądarki). Choć ramka chroniona w niektórych przypadkach użycia
(np. opaque-ads
) mogą zawierać dane z różnych witryn (np. dane o zainteresowaniach w ramach Protected Audience API
grupa), ramka nie może uzyskać dostępu do pamięci bez partycji ani plików cookie. An
Ramka opaque-ads
ma dostęp do unikalnego pliku cookie i pamięci jednorazowej, które nie są powiązane z żadną wartością
partycji danych.
Bardziej szczegółowe cechy ram chronionych Wyjaśnienie.
Czym różnią się ramki chronione i iframe?
Wiesz już, co chronione klatki będą działać, a czego nie, warto więc porównać do istniejących funkcji iframe.
Funkcja | iframe |
fencedframe |
---|---|---|
Umieszczanie treści | Tak | Tak |
Umieszczona treść może uzyskiwać dostęp do kontekstu DOM umieszczania | Tak | Nie |
Kontekst wektora dystrybucyjnego może uzyskiwać dostęp do elementów DOM umieszczonych treści | Tak | Nie |
Obserwowalne atrybuty, takie jak name |
Tak | Nie |
Adresy URL (http://example.com ) |
Tak | Tak (w zależności od przypadku użycia) |
Nieprzezroczyste źródło zarządzane przez przeglądarkę (urn:uuid ) |
Nie | Tak |
Dostęp do danych z różnych witryn | Nie | Tak (w zależności od przypadku użycia) |
Aby chronić prywatność, można obsługiwać mniej opcji komunikacji zewnętrznej.
Czy zabezpieczone ramki zastąpią elementy iframe?
W końcu chronione ramki nie zastąpią elementów iframe i nie będzie trzeba ich używać. Chronione klatki zapewniają większą prywatność, gdy dane z różne partycje najwyższego poziomu muszą być wyświetlane na tej samej stronie.
Elementy iframe w tej samej witrynie (nazywane czasem zaprzyjaźnionymi elementami iframe) są uznawane za zaufane treści.
Korzystaj z ramek chronionych
Chronione ramki będą działać w połączeniu z innymi interfejsami API Piaskownicy prywatności, aby wyświetlanie dokumentów z różnych partycji pamięci na jednej stronie. Obecnie trwają rozmowy na temat potencjalnych interfejsów API.
Obecnie dostępne są te kombinacje:
- Z rodziny TURTLEDOVE API (czyli stanowią podstawę dla interfejsu Protected Audience API), ramki chronione mogą współdziałać ze wzrostem liczby konwersji Pomiary za pomocą pamięci współdzielonej.
- Można też zezwolić na wyświetlanie chronionych ramek tylko do odczytu lub dostęp bez partycji
Więcej informacji można znaleźć w artykule Chronione ramki które wyjaśniają przypadki użycia.
Przykłady
Aby uzyskać chronioną ramkę config
, musisz przekazać resolveToConfig: true
wywołanie runAdAuction()
interfejsu Protected Audience API lub wywołanie selectURL()
pamięci współdzielonej. Jeśli właściwość nie zostanie dodana (lub jest ustawiona na false
), wynikowa obietnica przejdzie w kod URN, którego można używać tylko w elemencie iframe.
const frameConfig = await navigator.runAdAuction({ // ...auction configuration resolveToConfig: true });
const frameConfig = await sharedStorage.selectURL('operation-name', { resolveToConfig: true });
Po uzyskaniu konfiguracji możesz przypisać ją do atrybutu config
ramki ogrodzonej, aby przejść do ramki do zasobu reprezentowanego przez konfigurację. Starsze wersje Chrome nie obsługują właściwości resolveToConfig
, więc przed przejściem do następnego kroku musisz sprawdzić, czy obietnica zmieniła się na FencedFrameConfig
:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { const frame = document.createElement('fencedframe'); frame.config = frameConfig; }
Więcej informacji znajdziesz w wyjaśnieniach dotyczących ramki chronionej i konfiguracji ramki chronionej.
Nagłówki
Przeglądarki ustawiają atrybut Sec-Fetch-Dest: fencedframe
w przypadku żądań wysyłanych z chronionych ramek i elementów iframe umieszczonych w chronionej ramce.
Sec-Fetch-Dest: fencedframe
Serwer musi ustawić nagłówek odpowiedzi Supports-Loading-Mode: fenced-frame
, aby dokument był ładowany w ramce chronionej. Nagłówek musi też znajdować się we wszystkich elementach iframe wewnątrz ogrodzonej ramki.
Supports-Loading-Mode: fenced-frame
Kontekst pamięci współdzielonej
Możesz użyć agregacji prywatnej, aby raportować dane na poziomie zdarzenia w ramkach powiązanych z danymi kontekstowymi pochodzącymi z umieszczonego komponentu. Metoda fencedFrameConfig.setSharedStorageContext()
umożliwia przekazywanie niektórych danych kontekstowych, np. identyfikatora zdarzenia, z mechanizmu umieszczania treści do workletów pamięci współdzielonej inicjowanych przez interfejs Protected Audience API.
W poniższym przykładzie niektóre dane są zapisywane na stronie, na której umieszczono, oraz w ramce chronionej w pamięci współdzielonej. Na stronie umieszczonej jako kontekst pamięci współdzielonej ustawiany jest przykładowy identyfikator zdarzenia. Z chronionej ramki przesyłane są dane zdarzenia związanego z klatką.
Na stronie umieszczania możesz ustawić dane kontekstowe jako kontekst pamięci współdzielonej:
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;
Z ramki chronionej możesz przekazywać z niej dane na poziomie zdarzenia do Workletu pamięci współdzielonej (niezwiązane z danymi kontekstowymi z powyższej implementacji):
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
},
});
Informacje kontekstowe umieszczonego elementu możesz odczytać z sharedStorage.context
oraz dane na poziomie zdarzenia ramki z obiektu data
, a następnie zgłaszać te dane za pomocą agregacji prywatnej:
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);
Aby dowiedzieć się więcej o kontekście umieszczania umieszczania w obiekcie konfiguracyjnym ramki zabezpieczonej, zapoznaj się z tym objaśnieniem.
Wypróbuj chronione ramki
Korzystanie z Chrome
flagi na
włączyć interfejs Fenced Frame API na stronie chrome://flags/#enable-fenced-frames
.
![W eksperymentach w Chrome ustaw Włączone dla flagi o nazwie Włącz element z zabezpieczoną ramką](https://developers.google.cn/static/privacy-sandbox/assets/images/in-chrome-experiments-se-46957b7b97eb3.png?authuser=9&hl=pl)
W oknie wyboru jest kilka opcji. Zdecydowanie zalecamy wybranie *Włącz* – umożliwia automatyczne aktualizowanie Chrome do nowej architektury. gdy tylko będzie dostępna.
Pozostałe opcje, Włączono z zastosowaniem ShadowDOM i Włączono z wieloma opcjami architektury strony, oferują różne strategie implementacji. które są istotne dla inżynierów przeglądarek. Obecnie opcja Włącz działa tak samo jak Włączono z modelem ShadowDOM. W przyszłości ustawienie Włącz zostanie zmapowane na Włącz z architekturę wielostronicową.
Wykrywanie cech
Aby określić, czy zdefiniowane są klatki chronione:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Aby sprawdzić, czy konfiguracja ramki ogrodzonej jest dostępna:
js
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
// The fenced frame config is available
}
Obsługa przeglądarek
Element <fencedframe>
jest nadal w trybie eksperymentalnym, więc działa obecnie
obsługiwana od wersji Chrome 97. Obecnie ta funkcja nie jest obsługiwana przez inne
przeglądarek.
Angażuj odbiorców i dziel się opiniami
Chronione ramki są w trakcie dyskusji i mogą ulec zmianie przyszłości. Jeśli wypróbujesz ten interfejs API i chcesz przekazać nam swoją opinię, chętnie poznamy jego opinię.
- GitHub przeczytaj objaśnienie, zadaj pytania i obserwuj dyskusja.
- Pomoc dla deweloperów: zadawaj pytania i dołączaj do dyskusji na Pomoc dla deweloperów w Piaskownicy prywatności repozytorium.