Omówienie chronionych ramek

Bezpieczne umieszczanie treści na stronie bez udostępniania danych między witrynami.

Stan wdrożenia

Dlaczego potrzebujemy ramek ogrodzonych?

Ramka chroniona (<fencedframe>) to element HTML do umieszczania treści, podobny do elementu iframe. W przeciwieństwie do elementów iframe ramka ogrodzona ogranicza komunikację z kontekstem osadzania, aby umożliwić ramce dostęp do danych z różnych witryn bez udostępniania ich kontekstowi osadzania. Niektóre interfejsy API Piaskownicy prywatności mogą wymagać renderowania wybranych dokumentów w ramce chronionej.

Podobnie żadne dane własne w kontekście osadzania nie mogą być udostępniane ramce chronionej.

Jeśli na przykład witryna news.example (kontekst osadzania) osadzi w ramce chronionej reklamę z witryny shoes.example, witryna news.example nie będzie mogła wyeksportować danych z reklamy shoes.example, a witryna shoes.example nie będzie mogła poznać danych własnych z witryny news.example.

Wzmocnienie ochrony prywatności w różnych witrynach dzięki partycjonowaniu pamięci

Podczas przeglądania internetu prawdopodobnie zdarzyło Ci się, że po obejrzeniu produktów w jednej witrynie pojawiły się one ponownie w reklamie w zupełnie innej witrynie.

Obecnie ta technika reklamowa jest realizowana głównie za pomocą technologii śledzenia, która wykorzystuje pliki cookie innych firm do udostępniania informacji w różnych witrynach.

Chrome pracuje nad partycjonowaniem pamięci, które oddziela pamięć przeglądarki w zależności od witryny. Bez partycjonowania, jeśli element iframe z witryny shoes.example jest osadzony w witrynie news.example i ten element iframe zapisuje wartość w pamięci, wartość ta może być odczytana z witryny shoes.example. Gdy pamięć jest podzielona na partycje, elementy iframe z różnych witryn nie będą już udostępniać pamięci, dlatego witryna shoes.example nie będzie mogła uzyskać dostępu do informacji przechowywanych przez element iframe. Jeśli element iframe jest wyświetlany z domeny *.shoes.example i osadzony w domenie *.shoes.example, pamięć przeglądarki będzie udostępniana, ponieważ są one traktowane jako witryny własne.

Porównanie stanu partycjonowania pamięci przed i po.

Partycjonowanie pamięci będzie stosowane do standardowych interfejsów API pamięci, w tym LocalStorage, IndexedDB i plików cookie. W przypadku partycjonowania wyciek informacji z pamięci własnej zostanie znacznie ograniczony.

Praca z danymi z różnych witryn

Ramki ogrodzone to funkcja Piaskownicy prywatności która sugeruje, że witryny najwyższego poziomu powinny partycjonować dane. Wiele propozycji i interfejsów API Piaskownicy prywatności ma na celu zaspokojenie przypadków użycia w różnych witrynach bez 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 chroniący prywatność.
  • Shared Storage umożliwia dostęp do niepodzielonych danych z różnych witryn w bezpiecznym środowisku.

Ramki ogrodzone są zaprojektowane do współpracy z interfejsem Protected Audience API. Dzięki interfejsowi Protected Audience API zainteresowania użytkownika są rejestrowane w witrynie reklamodawcy w grupach zainteresowań wraz z reklamami, które mogą zainteresować użytkownika. Następnie w osobnej witrynie (zwanej „wydawcą”) reklamy zarejestrowane w odpowiednich grupach zainteresowań są licytowane, a zwycięska reklama jest wyświetlana w ramce ogrodzonej.

Jeśli wydawca wyświetla zwycięską reklamę w elemencie iframe, a skrypt może odczytać atrybut src elementu iframe, wydawca może wywnioskować informacje o zainteresowaniach użytkownika z adresu URL tej reklamy. Nie chroni to prywatności.

Dzięki ramce chronionej wydawca może wyświetlać reklamę, która pasuje do zainteresowań użytkownika, ale atrybut src i grupa zainteresowań będą znane tylko reklamodawcy w ramce. Wydawca nie będzie miał dostępu do tych informacji.

Jak działają ramki ogrodzone?

Ramki ogrodzone używają do nawigacji obiektu FencedFrameConfig. Ten obiekt może być zwracany przez aukcję Protected Audience API lub operację wyboru adresu URL w Shared Storage. Następnie obiekt konfiguracji jest ustawiany jako atrybut config elementu ramki chronionej. Różni się to od elementu iframe, w którym do atrybutu src jest przypisywany adres URL lub nieprzezroczysty URN. Obiekt FencedFrameConfig ma właściwość url tylko do odczytu. Jednak ponieważ obecne przypadki użycia wymagają ukrycia rzeczywistego adresu URL zasobu wewnętrznego, ta właściwość zwraca ciąg znaków opaque.

Ramka chroniona nie może używać postMessage do komunikacji z osadzającym. Może jednak używać postMessage z elementami iframe w ramce chronionej.

Ramki ogrodzone będą izolowane od wydawcy na inne sposoby. Na przykład wydawca nie będzie miał dostępu do DOM w ramce chronionej, a ramka chroniona nie będzie mogła uzyskać dostępu do DOM wydawcy. Ponadto w ramkach ogrodzonych nie są dostępne atrybuty takie jak name, które można ustawić na dowolną wartość i obserwować przez wydawcę.

Ramki ogrodzone działają jak kontekst przeglądania najwyższego poziomu (np. karta przeglądarki). Chociaż ramka ogrodzona w niektórych przypadkach użycia (np. w przypadku reklam remarketingowych opartych na zainteresowaniach) może zawierać dane z różnych witryn (np. grupę zainteresowań Protected Audience API), ramka nie może uzyskać dostępu do niepodzielonej pamięci ani plików cookie. Ramka chroniona może uzyskać dostęp do unikalnego pliku cookie opartego na liczbie jednorazowej i partycji pamięci.

Charakterystyka ramek ogrodzonych jest szczegółowo opisana w wyjaśnieniu.

Czym ramki ogrodzone różnią się od elementów iframe?

Teraz, gdy wiesz, co ramki ogrodzone będą robić, a czego nie, warto porównać je z istniejącymi funkcjami elementu iframe.

Funkcja iframe fencedframe
Umieszczanie treści Tak Tak
Umieszczona treść może uzyskać dostęp do DOM kontekstu osadzania Tak Nie
Kontekst osadzania może uzyskać dostęp do DOM umieszczonej treści Tak Nie
Atrybuty, które można obserwować, np. 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 (w zależności od przypadku użycia)
Dostęp do danych z różnych witryn Nie Tak (w zależności od przypadku użycia)

Ramki ogrodzone obsługują mniej opcji komunikacji zewnętrznej, aby chronić prywatność.

Czy ramki ogrodzone zastąpią elementy iframe?

Ostatecznie ramki ogrodzone nie zastąpią elementów iframe i nie będziesz musiał ich używać. Ramki ogrodzone to bardziej prywatna ramka do użycia, gdy na tej samej stronie trzeba wyświetlić dane z różnych partycji najwyższego poziomu.

Elementy iframe z tej samej witryny (czasami nazywane przyjaznymi elementami iframe) są uważane za zaufane treści.

Używanie ramek ogrodzonych

Ramki ogrodzone 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. Potencjalne interfejsy API są obecnie omawiane.

Obecni kandydaci do tego połączenia to:

Więcej informacji znajdziesz w wyjaśnieniu przypadków użycia ramek ogrodzonych.

Przykłady

Aby uzyskać obiekt config ramki chronionej, musisz przekazać resolveToConfig: true do wywołania runAdAuction() interfejsu Protected Audience API lub wywołania selectURL() interfejsu Shared Storage. Jeśli właściwość nie zostanie dodana (lub będzie mieć wartość false), wynikowy obietnica zostanie rozwiązana do URN, którego można używać tylko w elemencie iframe.

Pobieranie konfiguracji ramki chronionej z aukcji Protected Audience API
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
Pobieranie konfiguracji ramki chronionej z wyboru adresu URL w Shared Storage
const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Po uzyskaniu konfiguracji możesz przypisać ją do atrybutu config ramki ogrodzonej, aby przejść do zasobu reprezentowanego przez konfigurację. Starsze wersje Chrome nie obsługują właściwości resolveToConfig, dlatego przed nawigacją musisz potwierdzić, że obietnica została rozwiązana do FencedFrameConfig:

Ustawianie konfiguracji jako atrybutu ramki chronionej
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Więcej informacji znajdziesz w wyjaśnieniach dotyczących ramek ogrodzonych i konfiguracji ramek ogrodzonych.

Nagłówki

Przeglądarki ustawią Sec-Fetch-Dest: fencedframe w przypadku żądań wysyłanych z ramek chronionych i elementów iframe osadzonych w ramce chronionej.

Sec-Fetch-Dest: fencedframe

Aby dokument mógł zostać wczytany w ramce chronionej, serwer musi ustawić nagłówek odpowiedzi Supports-Loading-Mode: fenced-frame. Nagłówek musi być też obecny w przypadku wszystkich elementów iframe w ramce chronionej.

Supports-Loading-Mode: fenced-frame

Kontekst Shared Storage

Możesz użyć Private Aggregation, aby zgłaszać dane na poziomie zdarzenia w ramkach ogrodzonych powiązanych z danymi kontekstowymi z osadzającego. Za pomocą metody fencedFrameConfig.setSharedStorageContext() możesz przekazać niektóre dane kontekstowe, np. identyfikator zdarzenia, z osadzającego do workletów Shared Storage zainicjowanych przez Protected Audience API.

W tym przykładzie przechowujemy w Shared Storage niektóre dane dostępne na stronie osadzającej i niektóre dane dostępne w ramce chronionej. Na stronie osadzającej ustawiamy przykładowy identyfikator zdarzenia jako kontekst Shared Storage. Z ramki chronionej przekazywane są dane zdarzenia ramki.

Na stronie osadzającej możesz ustawić dane kontekstowe jako kontekst Shared Storage:

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 przekazać dane na poziomie zdarzenia z ramki do workletu Shared Storage (niezwiązanego z danymi kontekstowymi z osadzającego powyżej):

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
  },
});

Możesz odczytać informacje kontekstowe osadzającego z sharedStorage.context i dane na poziomie zdarzenia z ramki z obiektu data, a następnie zgłosić je za pomocą Private Aggregation:

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);

Więcej informacji o kontekście osadzającego w obiekcie konfiguracji ramki ogrodzonej znajdziesz w wyjaśnieniu.

Wypróbowanie ramek ogrodzonych

Aby włączyć interfejs Fenced Frame API, użyj flag Chrome pod adresem chrome://flags/#enable-fenced-frames.

W sekcji Chrome Experiments ustaw opcję Włączone dla flagi o nazwie Włącz element ramki chronionej.

W oknie dialogowym jest kilka opcji. Zdecydowanie zalecamy wybranie opcji *Włącz*, która umożliwia automatyczne aktualizowanie Chrome do nowej architektury gdy stanie się ona dostępna.

Pozostałe opcje, Włączone z ShadowDOM i Włączone z architekturą wielu stron, oferują różne strategie implementacji, które są istotne tylko dla inżynierów przeglądarek. Obecnie opcja Włącz działa tak samo jak opcja Włączone z ShadowDOM. W przyszłości opcja Włącz będzie odpowiadać opcji Włączone z architekturą wielu stron.

Wykrywanie funkcji

Aby sprawdzić, czy ramki ogrodzone są zdefiniowane:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

Aby sprawdzić, czy konfiguracja ramki chronionej jest dostępna:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Obsługa przeglądarek

Zaangażuj się i prześlij opinię

Ramki ogrodzone są obecnie aktywnie omawiane i w przyszłości mogą ulec zmianie. Jeśli wypróbujesz ten interfejs API i masz jakieś uwagi, chętnie je poznamy.

Więcej informacji