분리 프레임 개요

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

구현 상태

• 단계적 지원 중단 예정
• 제공 의도: FencedFrame 요소 및 window.fence API 삭제
• Chrome 플랫폼 상태

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

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

마찬가지로 삽입 컨텍스트의 퍼스트 파티 데이터는 분리 프레임과 공유할 수 없습니다.

예를 들어 news.example (삽입 컨텍스트)이 분리 프레임에 shoes.example의 광고를 삽입하는 경우 news.example은 shoes.example 광고에서 데이터를 유출할 수 없으며 shoes.example은 news.example에서 퍼스트 파티 데이터를 학습할 수 없습니다.

저장소 파티셔닝으로 크로스 사이트 개인 정보 보호 강화

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

오늘날 이 광고 기법은 주로 서드 파티 쿠키를 사용하여 사이트 간에 정보를 공유하는 추적 기술을 통해 구현됩니다.

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를 사용하면 개인 정보를 보호하는 방식으로 관심사 기반 광고를 게재할 수 있습니다.
• Shared Storage를 사용하면 안전한 환경에서 파티셔닝되지 않은 크로스 사이트 데이터에 액세스할 수 있습니다.

분리 프레임은 Protected Audience API와 함께 작동하도록 설계되었습니다. Protected Audience API를 사용하면 사용자의 관심분야 가 광고주의 사이트에서 관심분야 그룹에 등록되고 사용자에게 관심이 있을 수 있는 광고도 함께 등록됩니다. 그런 다음 별도의 사이트('게시자'라고 함)에서 관련 관심분야 그룹에 등록된 광고가 입찰되고 낙찰된 광고가 분리 프레임에 표시됩니다.

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

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

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

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

분리 프레임은 postMessage를 사용하여 삽입자와 통신할 수 없습니다. 그러나 분리 프레임은 분리 프레임 내의 iframe과 함께 postMessage를 사용할 수 있습니다.

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

분리 프레임은 최상위 탐색 컨텍스트 (예: 브라우저 탭)와 같이 동작합니다. 특정 사용 사례(예: 관심사 기반 리타겟팅 광고 )의 분리 프레임에는 크로스 사이트 데이터 (예: Protected Audience API 관심분야 그룹)가 포함될 수 있지만 프레임은 파티셔닝되지 않은 저장소 또는 쿠키에 액세스할 수 없습니다. 분리 프레임은 고유한 nonce 기반 쿠키 및 저장소 파티션에 액세스할 수 있습니다.

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

분리 프레임은 iframe과 어떻게 비교되나요?

분리 프레임이 수행할 수 있는 작업과 수행할 수 없는 작업을 알았으므로 기존 iframe 기능과 비교하는 것이 좋습니다.

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

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

궁극적으로 분리 프레임은 iframe을 대체하지 않으며 사용할 필요도 없습니다. 분리 프레임은 서로 다른 최상위 파티션의 데이터를 동일한 페이지에 표시해야 할 때 사용할 수 있는 더 비공개적인 프레임입니다.

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

분리 프레임 사용

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

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

• Protected Audience API의 기반이 되는 TURTLEDOVE API 제품군에서 분리 프레임은 Shared Storage를 사용하여 전환 상승도 측정과 함께 작동할 수 있습니다.
• 또 다른 옵션은 분리 프레임을 읽기 전용으로 허용하거나 파티셔닝되지 않은 저장소에 액세스하도록 허용하는 것입니다.

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

예

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

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

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

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

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

Shared Storage 컨텍스트

Private Aggregation을 사용하여 삽입자의 컨텍스트 데이터와 연결된 분리 프레임의 이벤트 수준 데이터를 보고할 수 있습니다. fencedFrameConfig.setSharedStorageContext() 메서드를 사용하면 이벤트 ID와 같은 일부 컨텍스트 데이터를 삽입자에서 Protected Audience API에서 시작한 Shared Storage 워크릿으로 전달할 수 있습니다.

다음 예에서는 삽입자 페이지에서 사용할 수 있는 일부 데이터와 분리 프레임에서 사용할 수 있는 일부 데이터를 Shared Storage에 저장합니다. 삽입자 페이지에서 모의 이벤트 ID가 Shared Storage 컨텍스트로 설정됩니다. 분리 프레임에서 프레임 이벤트 데이터가 전달됩니다.

삽입자 페이지에서 컨텍스트 데이터를 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;

분리 프레임에서 프레임의 이벤트 수준 데이터를 Shared Storage 워크릿으로 전달할 수 있습니다 (위의 삽입자의 컨텍스트 데이터와 관련 없음).

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 객체에서 프레임의 이벤트 수준 데이터를 읽은 다음 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);

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

분리 프레임 사용해 보기

Chrome 플래그를 사용하여 chrome://flags/#enable-fenced-frames에서 분리 프레임 API를 사용 설정합니다.

대화상자에는 여러 선택사항이 있습니다. Chrome이 새 아키텍처를 사용할 수 있게 되면 자동으로 업데이트할 수 있도록 *사용 설정*을 선택하는 것이 좋습니다.

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

기능 감지

분리 프레임이 정의되어 있는지 확인하려면 다음 안내를 따르세요.

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

분리 프레임 구성을 사용할 수 있는지 확인하려면 다음 안내를 따르세요.

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

브라우저 지원

• MDN
• Chrome 플랫폼 상태

참여 및 의견 공유

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

• GitHub: 설명서를 읽고, 질문을 게시하고 토론을 살펴보세요.

자세히 알아보기

• Chrome 플랫폼 상태
• 프로토타입 제작 의도