Bezpiecznie umieszczaj treści na stronie bez udostępniania danych z innej witryny.
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. |
Do czego są nam potrzebne ogrodzone ramki?
Ogrodzona ramka (<fencedframe>
) to element HTML do umieszczania treści
podobnych do elementu iframe. W przeciwieństwie do elementów iframe chroniona ramka ogranicza komunikację z kontekstem umieszczania, by umożliwić jej dostęp do danych z innych witryn bez ich udostępniania w kontekście umieszczania. Niektóre interfejsy API Piaskownicy prywatności mogą wymagać wybranych dokumentów do renderowania w objętej ramce.
Analogicznie żadne dane własne w kontekście umieszczania nie mogą być udostępniane ramce chronionej.
Załóżmy na przykład, że element news.example
(kontekst umieszczania) zawiera reklamę z witryny shoes.example
w otoczonej ramce. news.example
nie może wydobywać danych z reklamy shoes.example
, a shoes.example
nie może uczyć się z news.example
danych własnych.
Zwiększ ochronę prywatności w różnych witrynach dzięki partycjonowaniu pamięci
Przeglądając internet, zapewne zdarzyło Ci się oglądać produkty w jednej witrynie, a potem znów zobaczyć je w reklamie w zupełnie innej witrynie.
Obecnie tę technikę reklamową uzyskuje się głównie dzięki technologii śledzenia, która wykorzystuje pliki cookie innych firm do udostępniania informacji między witrynami. To technologia, którą Chrome zobowiązała się wycofać i zastąpić wariantami lepiej chroniącymi prywatność.
Chrome pracuje nad partycjami pamięci masowej, które rozdzielają miejsce na dane dla poszczególnych witryn. Obecnie, jeśli element iframe z domeny shoes.example
jest umieszczony w elemencie news.example
, który zapisuje wartość w pamięci, ta wartość może zostać odczytana z witryny shoes.example
. W przypadku partycjonowania pamięci elementy iframe z innych witryn przestaną współdzielić miejsce na dane, dlatego shoes.example
nie będzie mieć dostępu do informacji zapisanych w tym elemencie. Jeśli element iframe jest wyświetlany z *.shoes.example
i umieszczony w *.shoes.example
, pamięć przeglądarki będzie współdzielona, ponieważ te witryny są uznawane za tę samą.
Partycjonowanie pamięci masowej zostanie zastosowane do standardowych interfejsów API pamięci masowej, w tym LocalStorage, IndexedDB i cookie. W świecie podzielonym na partycje wyciek informacji w pamięci własnej będzie znacznie ograniczony.
Praca z danymi z różnych witryn
Chronione ramki to funkcja Piaskownicy prywatności, która sugeruje, że witryny najwyższego poziomu powinny partycjonować dane. Wiele ofert i interfejsów API Piaskownicy prywatności ma na celu spełnianie wymogów określonych w przypadkach użycia w różnych witrynach bez stosowania plików cookie innych firm ani 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ęp w bezpiecznym środowisku do danych z innych witryn, które nie są partycjonowane.
Przyjrzyjmy się, w jaki sposób chronione ramki mogą działać za pomocą interfejsu Protected Audience API. Interfejs Protected Audience API rejestruje w grupach zainteresowań w witrynie reklamodawcy zainteresowania użytkownika wraz z reklamami, które mogą go zainteresować. Następnie na osobnej stronie (zwanej „wydawcą”) reklamy zarejestrowane w odpowiednich grupach zainteresowań są licytowane, a zwycięska reklama wyświetla się w ramce otoczonej ramką.
Jeśli wydawca wyświetla zwycięską reklamę w elemencie iframe, a skrypt może odczytać atrybut src
tego elementu, może on wywnioskować z adresu URL tej reklamy informacje o zainteresowaniach użytkownika. Nie chroni to prywatności.
W takiej sytuacji wydawca może wyświetlać reklamę pasującą do zainteresowań użytkowników, ale src
i grupa zainteresowań będą znane tylko reklamodawcy w ramce. Wydawca nie mógł uzyskać dostępu do tych informacji.
Jak działają ramki ogrodzone?
Chronione ramki używają obiektu FencedFrameConfig
do nawigacji. Ten obiekt można zwrócić z aukcji interfejsu Protected Audience API lub wyboru adresu URL w pamięci współdzielonej. Następnie obiekt konfiguracji jest ustawiany jako atrybut config
w objętym ramką elemencie. Różni się to od elementu iframe, w którym adres URL lub nieprzezroczyste pole URN jest przypisany do atrybutu src
. Obiekt FencedFrameConfig
ma właściwość url
tylko do odczytu, jednak obecne przypadki użycia wymagają ukrywania rzeczywistego adresu URL zasobu wewnętrznego, więc po odczytaniu ta właściwość zwraca ciąg opaque
.
Chroniona ramka nie może używać elementu postMessage
do komunikowania się z umieszczonym elementem. Taka ramka może jednak używać elementu postMessage
z elementami iframe wewnątrz ramki.
Chronione klatki są odizolowane od wydawcy w inny sposób. Na przykład wydawca nie będzie miał dostępu do DOM w objętej ramce, a ramka zabezpieczona nie będzie miała dostępu do DOM wydawcy. Poza tym atrybuty takie jak name
, które można ustawić na dowolną wartość i zaobserwowane przez wydawcę, nie są dostępne w ramkach chronionych.
Chronione ramki działają jak kontekst przeglądania najwyższego poziomu (np. karta przeglądarki). Chociaż w niektórych przypadkach użycia (np. opaque-ads
) ramka chroniona może zawierać dane z różnych witryn (np. grupę zainteresowań interfejsu Protected Audience API), nie ma ona dostępu do niepartycjonowanej pamięci ani plików cookie. Ogrodzona ramka opaque-ads
może uzyskać dostęp do unikalnego pliku cookie i partycji pamięci masowej opartej na liczbie jednorazowej.
Właściwości ramek ogrodzonych szczegółowo opisujemy w objaśnieniu.
Czym różnią się ramki chronione z elementami iframe?
Skoro wiesz już, co objęte ramki będą działać, a co nie, przydatne jest porównanie z istniejącymi funkcjami iframe.
Funkcja | iframe |
fencedframe |
---|---|---|
Umieść treść | Tak | Tak |
Umieszczona treść ma dostęp do kontekstu DOM | Tak | Nie |
Kontekst umieszczania ma dostęp do interfejsu DOM zawartości umieszczonej | Tak | Nie |
Dostrzegalne atrybuty, np. name |
Tak | Nie |
Adresy URL (http://example.com ) |
Tak | Tak (w zależności od przypadku użycia) |
Źródło nieprzezroczyste 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) |
Ogrodzone ramki obsługują mniej opcji komunikacji zewnętrznej, aby zapewnić prywatność.
Czy ramki ogrodzone będą zastępować elementy iframe?
Ogrodzone ramki nie zastąpią elementów iframe i nie będzie trzeba ich używać. Chronione ramki są bardziej prywatną ramką, której można używać, gdy dane z różnych partycji najwyższego poziomu muszą być wyświetlane na tej samej stronie.
Elementy iframe z tej samej witryny (czasami nazywane zaprzyjaźnionymi elementami iframe) są uznawane za treści zaufane.
Użyj chronionych ramek
Chronione ramki będą działać w połączeniu z innymi interfejsami API Piaskownicy prywatności, aby wyświetlać dokumenty z różnych partycji pamięci na jednej stronie. Obecnie trwają prace nad potencjalnymi interfejsami API.
Obecnie kandydaci dla tej kombinacji to m.in.:
- Z rodziny TURTLEDOVE API (która jest podstawą interfejsu Protected Audience API) chronione ramki mogą działać z pomiarem zwiększenia liczby konwersji za pomocą wspólnej pamięci.
- Możesz też zezwolić na korzystanie z ramek ogrodzonych tylko do odczytu lub dostęp do niepartycjonowanej pamięci masowej.
Więcej informacji znajdziesz w objaśnieniu przypadków użycia chronionych ramek.
Przykłady
Aby uzyskać obiekt config
z ramką chronioną, musisz przekazać w metodzie resolveToConfig: true
wywołanie runAdAuction()
interfejsu Protected Audience API lub wywołanie selectURL()
w pamięci współdzielonej. Jeśli właściwość nie zostanie dodana (lub ma wartość false
), otrzymana obietnica przyjmie identyfikator URN, którego można użyć 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 ją przypisać do atrybutu config
ramki chronionej, aby poruszać się po niej do zasobu reprezentowanego przez konfigurację. Starsze wersje Chrome nie obsługują właściwości resolveToConfig
, więc przed przejściem nadal musisz potwierdzić, że obietnica została uzupełniona o element FencedFrameConfig
:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { const frame = document.createElement('fencedframe'); frame.config = frameConfig; }
Więcej informacji znajdziesz w objaśnieniach dotyczących objętej ramki i konfiguracji chronionej ramki.
nagłówków,
Przeglądarki ustawiają Sec-Fetch-Dest: fencedframe
w przypadku żądań pochodzących z ramek ogrodzonych i elementów iframe umieszczonych w obramowanych ramkach.
Sec-Fetch-Dest: fencedframe
Aby dokument został załadowany w objętej ramce, serwer musi ustawić nagłówek odpowiedzi Supports-Loading-Mode: fenced-frame
. Nagłówek musi też występować w przypadku wszystkich elementów iframe wewnątrz ramki ogrodzonej.
Supports-Loading-Mode: fenced-frame
Kontekst pamięci współdzielonej
Możesz użyć agregacji prywatnej, aby raportować dane na poziomie zdarzenia w zabezpieczonych ramkach powiązanych z danymi kontekstowymi z elementu umieszczonego. Korzystając z metody fencedFrameConfig.setSharedStorageContext()
, możesz przekazywać niektóre dane kontekstowe, np. identyfikator zdarzenia, z elementu umieszczonego na stronie do workletów pamięci współdzielonej zainicjowanych przez Protected Audience API.
W poniższym przykładzie przechowujemy niektóre dane dostępne na stronie umieszczanego elementu oraz niektóre dane dostępne w ramce w ramce współdzielonej. Na stronie umieszczanej jako kontekst pamięci współdzielonej jest ustawiany identyfikator zdarzenia pozornego. Z ramki chronionej przekazywane są dane zdarzenia ramki.
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 chronionej ramki możesz przekazywać dane na poziomie zdarzenia z ramki do workletu pamięci współdzielonej (niezwiązane z danymi kontekstowymi z umieszczonego wyżej mechanizmu):
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 elementu umieszczonego na stronie możesz odczytać z sharedStorage.context
oraz dane na poziomie zdarzenia ramki z obiektu data
, a następnie zgłosić je 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 elementu umieszczonego w obiekcie konfiguracji chronionej ramki, zapoznaj się z objaśnieniem.
Wypróbuj chronione ramki
Użyj flag Chrome, aby włączyć interfejs Fenced Frame API na stronie chrome://flags/#enable-fenced-frames
.
W oknie jest dostępnych wiele opcji. Zdecydowanie zalecamy wybór opcji *Włącz*, dzięki której Chrome będzie automatycznie aktualizować się do nowej architektury, gdy tylko będzie dostępna.
Pozostałe opcje, Włączone z użyciem ShadowDOM i Włączono z architekturą wielu stron, zapewniają różne strategie implementacji. Mają one zastosowanie tylko dla inżynierów przeglądarek. Obecnie opcja Włącz działa tak samo jak Włączona z użyciem ShadowDOM. W przyszłości opcja Włącz zostanie zmapowana na Włącz w przypadku architektury z wieloma stronami.
Wykrywanie funkcji
Aby sprawdzić, czy są zdefiniowane chronione ramki:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Aby sprawdzić, czy konfiguracja ramki chronionej jest dostępna:
js
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
// The fenced frame config is available
}
Obsługiwane przeglądarki
Element <fencedframe>
jest nadal w trybie eksperymentalnym, więc jest obsługiwany od wersji Chrome 97. Obecnie inne przeglądarki nie obsługują.
Angażuj i dziel się opiniami
Trwa dyskusja na temat chronionych ramek i w przyszłości mogą się one zmienić. Jeśli wypróbujesz ten interfejs API i chcesz przekazać nam swoją opinię, chętnie poznamy Twoją opinię.
- GitHub czytaj wyjaśnienie, zadawaj pytania i bierz udział w dyskusji.
- Pomoc dla deweloperów: zadawaj pytania i dołączaj do dyskusji w repozytorium pomocy dla deweloperów Piaskownicy prywatności.