이 페이지는 Cloud Translation API를 통해 번역되었습니다.

분리 프레임 개요

크로스 사이트 데이터를 공유하지 않고 페이지에 안전하게 콘텐츠를 삽입합니다.

구현 상태

이 문서에서는 새로운 HTML 요소인 <fencedframe>에 관해 설명합니다.

Fenced Frames 제안서가 이제 정식 버전으로 제공됩니다.
Chrome 플랫폼 상태

제안 내용	상태
urn에서 config를 위한 웹 API 변경사항 Explainer	2023년 1분기에 Chrome에서 제공됩니다.
FFAR (Fenced Frames for Ads Reporting)의 광고 소재 매크로 GitHub 문제	2023년 3분기에 Chrome에서 제공됩니다.
자동 비콘 1회 전송 GitHub 문제	2023년 3분기에 Chrome에서 제공됩니다.
직렬화 가능한 분리 프레임 구성 GitHub 문제	2023년 3분기에 Chrome에서 제공됩니다.
Protected Audience 광고 크기 매크로의 추가 형식 옵션 GitHub 문제	2023년 4분기에 Chrome에서 제공됩니다.
등록된 모든 URL로 전송하는 자동 비콘 GitHub 문제 \| GitHub 문제	2023년 4분기에 Chrome에서 제공됩니다.
Urn iFrames 및 광고 구성요소 프레임에서 광고 관심분야 그룹 탈퇴 사용 설정 GitHub 문제	2024년 1분기에 Chrome에서 사용 가능
예약된.top_navigation_start/commit GitHub 문제, GitHub 문제가 도입되었습니다.	2024년 1분기에 Chrome에서 사용 가능
3PCD까지 ReportEvent에서 쿠키 설정 사용 중지 안함 GitHub 문제	2024년 1분기에 Chrome에서 사용 가능
교차 출처 서브프레임의 자동 비콘 지원 추가 GitHub 문제	2024년 1분기에 Chrome에서 사용 가능

분리 프레임이 필요한 이유는 무엇인가요?

분리 프레임 (<fencedframe>)은 iframe과 유사하게 삽입된 콘텐츠의 HTML 요소입니다. iframe과 달리 분리 프레임은 임베딩 컨텍스트와의 통신을 제한하여 프레임이 임베딩 컨텍스트와 공유하지 않고도 교차 사이트 데이터에 액세스할 수 있도록 합니다. 일부 개인 정보 보호 샌드박스 API는 분리 프레임 내에서 특정 문서를 렌더링해야 할 수 있습니다.

마찬가지로 임베딩 컨텍스트의 모든 퍼스트 파티 데이터는 분리 프레임과 공유될 수 없습니다.

예를 들어 news.example (임베딩 컨텍스트)가 분리 프레임에 shoes.example의 광고를 삽입한다고 가정해 보겠습니다. news.example는 shoes.example 광고에서 데이터를 유출할 수 없으며 shoes.example는 news.example에서 퍼스트 파티 데이터를 학습할 수 없습니다.

스토리지 파티션 나누기로 크로스 사이트 개인 정보 보호 강화

웹을 탐색하는 동안 한 사이트에서 제품을 본 다음 완전히 다른 사이트의 광고에 다시 표시되는 것을 본 적이 있을 것입니다.

오늘날 이 광고 기술은 주로 서드 파티 쿠키를 사용하여 사이트 간에 정보를 공유하는 추적 기술을 통해 구현됩니다. 이는 Chrome이 단계적으로 사용을 중단하고 개인 정보를 더 안전하게 보호하는 변형으로 대체하기 위해 노력해 온 기술입니다.

Chrome은 사이트별로 브라우저 스토리지를 구분하는 스토리지 파티션 나누기를 위해 노력하고 있습니다. 현재 shoes.example의 iframe이 news.example에 삽입되고 해당 iframe이 값을 저장소에 저장하는 경우 shoes.example 사이트에서 값을 읽을 수 있습니다. 저장소가 파티션이 나뉘면 교차 사이트 iframe에서 더 이상 저장용량을 공유하지 않으므로 shoes.example는 iframe에 의해 저장된 정보에 액세스할 수 없습니다. iframe이 *.shoes.example에서 제공되고 *.shoes.example에 삽입된 경우 동일 사이트로 간주되므로 브라우저 저장용량이 공유됩니다.

스토리지 파티션 나누기는 LocalStorage, IndexedDB, 쿠키를 비롯한 표준 스토리지 API에 적용됩니다. 파티셔닝된 환경에서는 퍼스트 파티 스토리지 간의 정보 유출을 크게 줄일 수 있습니다.

크로스 사이트 데이터 사용

분리 프레임은 최상위 사이트에서 데이터를 분할해야 한다고 제안하는 개인 정보 보호 샌드박스 기능입니다. 많은 개인 정보 보호 샌드박스 제안 및 API는 서드 파티 쿠키 또는 기타 추적 메커니즘 없이 크로스 사이트 사용 사례를 충족하는 것을 목표로 합니다. 예를 들면 다음과 같습니다.

Protected Audience API를 사용하면 개인 정보를 보호하는 방식으로 관심 기반 광고를 게재할 수 있습니다.
공유 저장소를 사용하면 보안 환경에서 파티션을 나누지 않은 크로스 사이트 데이터에 액세스할 수 있습니다.

분리 프레임이 Protected Audience API와 함께 작동하는 방식을 살펴보겠습니다. Protected Audience API를 사용하면 사용자의 관심분야가 광고주의 사이트에서 사용자가 관심을 가질 만한 광고와 함께 관심분야 그룹에 등록됩니다. 그런 다음 별도의 사이트('게시자'라고 함)에서 관련 관심분야 그룹에 등록된 광고가 입찰되고 낙찰된 광고가 분리 프레임에 표시됩니다.

게시자가 낙찰된 광고를 iframe에 표시하고 스크립트가 iframe의 src 속성을 읽을 수 있는 경우 게시자는 해당 광고의 URL에서 방문자의 관심분야에 관한 정보를 추론할 수 있습니다. 이는 개인 정보가 보호되지 않습니다.

분리 프레임을 사용하면 게시자가 방문자 관심분야와 일치하는 광고를 표시할 수 있지만 src 및 관심분야 그룹은 프레임 내의 광고주만 알 수 있습니다. 게시자가 이 정보에 액세스할 수 없습니다.

분리 프레임은 어떻게 작동하나요?

분리 프레임은 탐색에 FencedFrameConfig 객체를 사용합니다. 이 객체는 Protected Audience API 입찰 또는 Shared Storage의 URL 선택 작업에서 반환될 수 있습니다. 그런 다음 config 객체가 분리 프레임 요소에서 config 속성으로 설정됩니다. 이는 URL 또는 불투명 URN이 src 속성에 할당되는 iframe과 다릅니다. FencedFrameConfig 객체에는 읽기 전용 url 속성이 있습니다. 그러나 현재 사용 사례에서는 내부 리소스의 실제 URL을 숨겨야 하므로 이 속성은 읽을 때 opaque 문자열을 반환합니다.

분리 프레임은 postMessage를 사용하여 임베드된 프레임과 통신할 수 없습니다. 그러나 분리 프레임은 분리 프레임 내부의 iframe과 함께 postMessage를 사용할 수 있습니다.

분리 프레임은 다른 방식으로 게시자와 격리됩니다. 예를 들어 게시자는 분리 프레임 내부의 DOM에 액세스할 수 없으며 분리 프레임은 게시자의 DOM에 액세스할 수 없습니다. 또한 name와 같은 속성(임의의 값으로 설정될 수 있으며 게시자가 관찰할 수 있음)은 분리 프레임에서 사용할 수 없습니다.

분리 프레임은 최상위 탐색 컨텍스트(예: 브라우저 탭)처럼 동작합니다. 특정 사용 사례(예: opaque-ads)의 분리 프레임에 크로스 사이트 데이터 (예: Protected Audience API 관심분야 그룹)가 포함될 수 있지만 프레임은 파티션을 나누지 않은 저장소나 쿠키에 액세스할 수 없습니다. opaque-ads 분리 프레임은 고유한 nonce 기반 쿠키 및 스토리지 파티션에 액세스할 수 있습니다.

분리 프레임의 특성은 설명서에 자세히 설명되어 있습니다.

분리 프레임은 iframe과 어떻게 다른가요?

이제 분리 프레임이 실행되는 것과 실행하지 않는 것을 알았으므로 기존 iframe 기능과 비교해 보는 것이 좋습니다.

기능	`iframe`	`fencedframe`
콘텐츠 삽입	예	예
삽입된 콘텐츠에서 삽입 컨텍스트 DOM에 액세스할 수 있습니다.	예	아니요
삽입된 콘텐츠 DOM에 액세스할 수 있는 컨텍스트 삽입	예	아니요
관찰 가능한 속성(예: `name`)	예	아니요
URL (`http://example.com`개)	예	예 (사용 사례에 따라 다름)
브라우저 관리 불투명 소스 (`urn:uuid`)	아니요	예
크로스 사이트 데이터에 액세스	아니요	예 (사용 사례에 따라 다름)

분리 프레임은 개인 정보 보호를 위해 더 적은 외부 통신 옵션을 지원합니다.

분리 프레임이 iframe을 대체하나요?

궁극적으로 분리 프레임은 iframe을 대체하지 않으므로 사용할 필요가 없습니다. 분리 프레임은 여러 최상위 수준 파티션의 데이터를 동일한 페이지에 표시해야 할 때 더 안전하게 사용할 수 있는 프레임입니다.

동일 사이트 iframe (호환 iframe이라고도 함)은 신뢰할 수 있는 콘텐츠로 간주됩니다.

분리 프레임 사용

분리 프레임은 다른 개인 정보 보호 샌드박스 API와 함께 작동하여 여러 저장소 파티션의 문서를 단일 페이지 내에 표시합니다. 잠재적 API는 현재 논의 중입니다.

이 조합의 현재 후보는 다음과 같습니다.

TURTLEDOVE API 계열 (Protected Audience API의 기반)에서 분리 프레임은 공유 저장소를 사용하는 전환 상승도 측정과 함께 작동할 수 있습니다.
또 다른 옵션은 분리 프레임이 읽기 전용이 되거나 파티션을 나누지 않은 저장소에 액세스하도록 허용하는 것입니다.

자세한 내용은 분리 프레임 사용 사례 설명을 참고하세요.

예

분리 프레임 config 객체를 가져오려면 resolveToConfig: true를 Protected Audience API의 runAdAuction() 호출 또는 공유 저장소의 selectURL() 호출에 전달해야 합니다. 속성이 추가되지 않거나 false로 설정된 경우 결과 프로미스는 iframe에서만 사용할 수 있는 URN으로 확인됩니다.

Protected Audience API 입찰에서 분리 프레임 구성 가져오기

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

공유 저장소 URL 선택에서 분리 프레임 구성 가져오기

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

구성을 가져온 후에는 분리 프레임의 config 속성에 할당하여 프레임을 구성에서 나타내는 리소스로 이동할 수 있습니다. 이전 버전의 Chrome은 resolveToConfig 속성을 지원하지 않으므로 탐색하기 전에 프로미스가 FencedFrameConfig로 해결되었는지 확인해야 합니다.

config를 분리 프레임 속성으로 설정

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

자세한 내용은 분리 프레임 및 분리 프레임 구성 설명을 참고하세요.

헤더

브라우저는 분리 프레임 내에 삽입된 분리 프레임 및 iframe에서 생성된 요청에 Sec-Fetch-Dest: fencedframe를 설정합니다.

Sec-Fetch-Dest: fencedframe

서버는 분리 프레임에서 문서를 로드하기 위해 Supports-Loading-Mode: fenced-frame 응답 헤더를 설정해야 합니다. 분리 프레임 내부의 모든 iframe에도 헤더가 있어야 합니다.

Supports-Loading-Mode: fenced-frame

공유 저장소 컨텍스트

비공개 집계를 사용하여 삽입자의 문맥 데이터와 연결된 분리 프레임의 이벤트 수준 데이터를 보고할 수 있습니다. fencedFrameConfig.setSharedStorageContext() 메서드를 사용하여 이벤트 ID와 같은 일부 문맥 데이터를 삽입기에서 Protected Audience API에서 시작된 공유 저장소 워크릿으로 전달할 수 있습니다.

다음 예에서는 임베딩 페이지에서 사용 가능한 일부 데이터와 분리 프레임에서 사용 가능한 일부 데이터를 공유 저장소에 저장합니다. 삽입기 페이지에서 모의 이벤트 ID가 공유 저장소 컨텍스트로 설정됩니다. 분리 프레임에서 프레임 이벤트 데이터가 전달됩니다.

삽입기 페이지에서 문맥 데이터를 공유 저장소 컨텍스트로 설정할 수 있습니다.

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;

분리 프레임에서는 프레임의 이벤트 수준 데이터를 공유 저장소 Worklet으로 전달할 수 있습니다 (위 삽입자의 문맥 데이터와는 무관).

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

sharedStorage.context에서 삽입자의 문맥 정보를 읽고 data 객체에서 프레임의 이벤트 수준 데이터를 읽은 후 비공개 집계를 통해 보고할 수 있습니다.

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

분리 프레임 구성 객체에서 임베딩 컨텍스트에 대한 자세한 내용은 설명서를 참고하세요.

분리 프레임 사용해 보기

Chrome 플래그를 사용하여 chrome://flags/#enable-fenced-frames에서 Fenced Frame API를 사용 설정합니다.

Chrome 실험에서 'Fenced 프레임 요소 사용 설정'이라는 플래그를 사용으로 설정합니다.

대화상자에는 여러 가지 선택 항목이 있습니다. *사용 설정*을 선택하는 것이 좋습니다. 그러면 새 아키텍처가 사용 가능해지면 Chrome이 자동으로 새 아키텍처로 업데이트됩니다.

다른 옵션인 ShadowDOM으로 사용 설정됨 및 여러 페이지 아키텍처로 사용 설정됨은 브라우저 엔지니어에게만 관련된 다양한 구현 전략을 제공합니다. 현재 사용 설정은 ShadowDOM으로 사용 설정과 동일한 방식으로 작동합니다. 향후 사용 설정은 다중 페이지 아키텍처로 사용 설정으로 매핑됩니다.

기능 감지

분리 프레임이 정의되어 있는지 확인하는 방법은 다음과 같습니다.

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

분리 프레임 구성을 사용할 수 있는지 확인하려면 다음을 실행합니다. js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

브라우저 지원

<fencedframe> 요소는 아직 실험용 모드이므로 현재 Chrome 97부터 지원됩니다. 현재 다른 브라우저에서는 지원되지 않습니다.

참여 및 의견 공유

분리 프레임은 논의가 활발히 진행 중이며 향후 변경될 수 있습니다. 이 API를 사용해 보시고 의견이 있으면 알려주세요.

GitHub: 설명서를 읽고, 질문을 올리고, 토론을 진행합니다.
개발자 지원: 개인 정보 보호 샌드박스 개발자 지원 저장소에서 질문하고 토론에 참여하세요.