Omówienie chronionych ramek

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.

Uzyskiwanie konfiguracji ramek chronionej z aukcji Protected Audience API

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

Pobierz konfigurację ramek chronionej z wyboru adresu URL pamięci współdzielonej

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:

Ustaw w konfiguracji atrybut ramki ogrodzonej

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.sendHistogramReport({
      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.

Więcej informacji

• Stan platformy Chrome
• Mrugnięcie intencji z prototypem