HTML <fencedframe>: 격리 프레임 요소

HTML <fencedframe> 요소는 현재 HTML 문서 내에 삽입된 중첩 브라우징 맥락을 나타냅니다. <fencedframe>은 <iframe> 요소와 형태와 기능이 매우 유사하지만, 다음과 같은 차이점을 가집니다.

• <fencedframe> 콘텐츠와 부모 사이트의 통신은 제한됩니다.
• <fencedframe>은 교차 사이트 데이터를 접근할 수 있지만, 사용자 사생활을 보호할 수 있는 굉장히 특정된 상황에서만 가능합니다.
• <fencedframe>은 일반 스크립트로 조작하거나 내부 데이터에 접근(예시: 소스 URL 읽기/쓰기 등)할 수 없습니다. <fencedframe> 콘텐츠는 특정 API를 통해서만 삽입할 수 있습니다.
• <fencedframe>은 부모 컨텍스트의 DOM에 접근할 수 없으며, 부모 컨텍스트도 <fencedframe>의 DOM에 접근할 수 없습니다.

<fencedframe> 요소는 더 많은 개인 정보 보호 기능을 내장한 <iframe>의 일종으로, <iframe>의 서드 파티 쿠키 의존성 등 개인 정보 위험을 해결할 수 있습니다. 더 많은 정보는 Fenced frame API에서 확인하세요.

특성

전역 특성을 포함합니다.

allow

<fencedframe>의 권한 정책을 지정합니다. 권한 정책은 요청 출처에 따라 <fencedframe>에서 사용할 수 있는 기능을 정의합니다. 분리 프레임에서 사용 가능한 권한 정책을 참고하세요.

height

프레임의 CSS 픽셀 단위 높이입니다. 기본 값은 150입니다.

width

프레임의 CSS 픽셀 단위 높이입니다. 기본 값은 300입니다.

분리 프레임에서 사용 가능한 권한 정책

기능을 허용하거나 거부할 수 있는 권한들이 상위 맥락에서 분리 프레임으로 위임될 경우 통신 채널로 남용될 수 있으며 따라서 개인 정보를 위협할 수 있습니다. 결과적으로, 권한 정책을 통해 활성화 여부를 제어할 수 있는 표준 웹 기능(camera, geolocation 등)은 분리 프레임 내에서 사용할 수 없습니다.

분리 프레임 내의 정책으로 활성화할 수 있는 기능은 분리 프레임 내에서 사용하도록 설계된 특정 기능들로 제한됩니다.

• Protected Audience API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• Shared Storage API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

지금은 위의 기능 모두 분리 프레임 내에서 항상 활성화됩니다. 향후에는 <fencedframe>의 allow 특성을 사용해 어떤 기능을 활성화할지 제어할 수 있을 것입니다.

사용 일람

CSS object-position 속성을 사용해서 요소 프레임 내의 콘텐츠 위치를 조정할 수 있습니다.

접근성

스크린 리더와 같은 보조 기술은 <fencedframe>의 title을 사용해 내부 콘텐츠를 설명할 수 있습니다. title의 값은 콘텐츠를 명확하게 나타내야 합니다.

<fencedframe title="광고: 소토에서 전해드리는 최신 상품, 20% 할인 중"></fencedframe>

title이 없으면, 보조 기술 사용자는 <fencedframe> 내부를 탐색해 무슨 콘텐츠인지 확인해야 합니다. 이때 발생하는 맥락의 변화는 시간도 오래 걸릴 뿐더러 혼란스럽기 쉽습니다. 프레임 내에 비디오나 오디오 등 대화형 콘텐츠가 있거나, 한 페이지가 다수의 <fencedframe>을 포함하는 경우 더 심각한 문제가 될 수 있습니다.

명세

Fenced Frame

브라우저 호환성