Omówienie chronionych ramek

Bezpiecznie umieszczaj treści na stronie bez udostępniania danych z innych witryn.

Stan implementacji

W tym dokumencie opisujemy nowy element HTML: <fencedframe>.

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.

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:

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.

Pobierz konfigurację ramki chronionej z aukcji Protected Audience API
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
Pobierz konfigurację ramki chronionej z wyboru adresu URL pamięci współdzielonej
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:

Ustaw atrybut konfiguracji na atrybut ramki ogrodzonej
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ą

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

Więcej informacji