HTML <portal>: 포탈 요소

HTML <portal> 요소는 다른 HTML 페이지를 현재 페이지에 삽입해 부드러운 이동 가능케 합니다.

<portal>은 분리된 브라우징 맥락을 삽입한다는 점에서 <iframe>과 비슷합니다. 하지만 <portal>로 삽입한 콘텐츠는 상호작용이 불가능하므로 문서에 위젯을 넣는 용도로는 부적절합니다. <portal>은 다른 페이지 콘텐츠의 미리보기처럼 동작하며, 그 페이지로 이동할 때 부드러운 전환을 제공합니다.

특성

전역 특성을 포함합니다.

referrerpolicy

삽입한 페이지로 이동할 보낼 리퍼러를 지정합니다. 다음 값을 사용해야 합니다.

• no-referrer: Referer 헤더를 전송하지 않습니다.
• no-referrer-when-downgrade: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 Referer 헤더를 전송하지 않습니다.
• origin: Referer 헤더가 요청의 출처, 즉 스킴, 호스트, 포트를 포함합니다.
• origin-when-cross-origin: 다른 출처로 요청할 땐 리퍼러 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로도 포함합니다.
• same-origin: 동일 출처 요청에는 리퍼러를 전송하고, 교차 출처 요청에는 전송하지 않습니다.
• strict-origin: 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
• strict-origin-when-cross-origin (기본 값): 동일 출처 요청에는 전체 URL을 전송합니다. 교차 출처 요청에 대해서는 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
• unsafe-url: 리퍼러가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. 안전하지 않은 값입니다. TLS로 보호받는 리소스에서 보호 없는 출처로 정보가 누출될 수 있습니다.

src

삽입할 페이지의 URL입니다.

예제

<portal id="exampleportal" src="https://example.com/"></portal>

접근성 고려사항

포탈에 표시되는 콘텐츠 미리보기는 상호작용할 수 없으므로 입력 이벤트와 포커스를 받지 않습니다. 따라서 포탈 내부 콘텐츠는 접근성 트리에 노출되지 않습니다.

<portal>의 기본 레이블은 삽입한 페이지의 제목입니다. 제목이 따로 존재하지 않는다면 보여지는 영역의 텍스트를 이어붙여 레이블을 생성합니다. aria-label 특성으로 기본 레이블을 재정의할 수 있습니다.

프리렌더링만을 위해 사용한 <portal>은 hidden 전역 특성 또는 CSS display: none을 사용해 숨겨야 합니다.

포탈 활성화 시 애니메이션을 적용한다면 prefers-reduced-motion 미디어 기능을 존중해야 합니다.

명세

Portals

브라우저 호환성