이 문서는 데스크톱 환경에서 실행되는 설치된 웹 애플리케이션에서 일반적으로 제목 표시줄이 차지하는 영역을 제어할 수 있게 해주는 일련의 기술들을 명시한다. 이러한 기술들은 (WCO)로 알려져 있다.

이 초안은 WCO의 표준화 과정을 위한 출발점 역할을 하기 위한 것이며, 여기서 설명한 기술들은 다른 워킹 그룹의 다른 명세로 이전될 수 있다.

소개

비모바일 장치를 대상으로 하는 애플리케이션은 일반적으로 제목 표시줄을 가진 프레임 내에서 호스팅된다. 제목 표시줄은 보통 창 상단의 가로 막대로 표현되는 UI 요소로, 활성 프로그램의 이름 또는 현재 활성 문서의 이름과 [=window controls=]를 표시한다. 최신 애플리케이션은 더 나은 UX를 만들기 위해 제목 표시줄 영역의 공간을 사용하여 UI 콘텐츠를 표시할 수 있다.

UA 프레임 내에서 호스팅되는 설치된 웹 앱의 경우, 어떤 형태로든 프레임의 맞춤화를 얻기 위해 선호되는 디스플레이 모드를 선언하는 것이 가능하다. 개발자는 [=manifest=] 파일의 `display` 멤버를 통해 애플리케이션의 요구에 가장 적합한 모드를 선택할 수 있다. 그러나 이러한 모드들은 제한적이며 제목 표시줄에 대한 동일한 수준의 제어를 제공하지 못하므로, 설치된 애플리케이션에 대해 몰입형의 네이티브 유사 제목 표시줄을 만들고자 하는 개발자는 앞서 언급한 멤버만으로는 이를 달성할 수 없다. 대신 클라이언트 영역은 예약된 제목 표시줄 영역 바로 아래에서 시작하므로, 작은 화면을 가진 휴대용 장치에서는 애플리케이션 공간이 좁아질 수 있다.

WCO는 프레임 위에 [=window controls=]만 [=overlaid=] 되도록 하여 웹 콘텐츠가 이전에 제목 표시줄이 차지했던 영역으로 흐를 수 있게 함으로써 맞춤형 제목 표시줄 UI를 만들 수 있도록 한다.

Blank window frame showing the controls area.

예시

개념

`Navigator` 인터페이스에 대한 확장

[[HTML]] 명세는 Navigator 인터페이스를 정의하며, 이 명세는 이를 확장한다: 

        [SecureContext, Exposed=(Window)]
        partial interface Navigator {
          [SameObject] readonly attribute WindowControlsOverlay windowControlsOverlay;
        };

`Window` 인터페이스에 대한 확장

내부 슬롯

Internal slot Initial value Description
[[\TitleBarArea]] Empty [=struct=] for the title bar region. 제목 표시줄 영역을 정의하는 값들(`x`, `y`, `width`, `height`)을 저장하는 [=struct=].

WindowControlsOverlay 인터페이스 

        [Exposed=Window]
        interface WindowControlsOverlay : EventTarget {
          readonly attribute boolean visible;
          DOMRect getTitlebarAreaRect();
          attribute EventHandler ongeometrychange;
        };

        [Exposed=Window]
        interface WindowControlsOverlayGeometryChangeEvent : Event {
          constructor(DOMString type, WindowControlsOverlayGeometryChangeEventInit eventInitDict);
          [SameObject] readonly attribute DOMRect titlebarAreaRect;
          readonly attribute boolean visible;
        };

        dictionary WindowControlsOverlayGeometryChangeEventInit : EventInit {
          required DOMRect titlebarAreaRect;
          boolean visible = false;
        };

visible 속성

`visible` 속성은 {{Window/window}}.[[\TitleBarArea]]의 값들이 0이 아닐 때 `true`를 반환하는 [=boolean=]이다.

getTitlebarAreaRect 메서드

`getTitlebarAreaRect()` 메서드는 웹 콘텐츠를 표시할 수 있는 사용 가능한 영역을 나타내는 DOMRect를 반환한다. 이 사용 가능한 제목 표시줄 영역은 [=window controls=] [=overlay=] 아래의 영역을 포함하지 않는다.

depiction of the area returned by the getTitlebarAreaRect method

ongeometrychange 속성

`ongeometrychange` 속성은 해당 이벤트 핸들러 이벤트 타입이 "change"인 이벤트 핸들러이다.

새로운 [=display mode/window-controls-overlay=] [=display mode=]의 추가

이 명세는 다음과 같은 [=display mode=]를 정의한다:

window-controls-overlay
웹 애플리케이션은 네이티브 OS 창 컨트롤이 보이는 상태로 열리지만 웹 콘텐츠는 제목 표시줄 영역의 나머지 부분까지 확장된다. 앱은 또한 웹 콘텐츠 내에서 [=draggable region=]를 지정하여 맞춤형 제목 표시줄을 만들 수 있다.

[=display mode/window-controls-overlay=] [=display mode=]는 매니페스트의 [=manifest/display_override=] 멤버에 지정될 수 있다.

제목 표시줄 영역 환경 변수

제목 표시줄 영역 env 변수

Name Value
`titlebar-area-x` length
`titlebar-area-y` length
`titlebar-area-width` length
`titlebar-area-height` length

[=title bar area environmental variables=]는 시작 지점에서의 너비와 높이로 사각형을 정의하는 네 개의 env 변수이다. 이 영역은 제목 표시줄의 사용 가능한 영역에 해당하며, 그 경계 내에서 동적 웹 콘텐츠를 배치할 수 있게 한다.

CSSOM과의 통합

이 명세는 아래 알고리즘을 패치함으로써 [[cssom-view]] 명세와 통합된다:

뷰포트 [=Window/resize=] 알고리즘에서, 1단계 이후에 [=resize the title bar area=]를 실행한다.

알고리즘

제목 표시줄 영역 크기 조정

창 |win|에 대해 제목 표시줄 영역의 크기를 조정하려면, 다음 단계를 실행한다:

  1. If |win|'s [=overlay=] has had its width or height changed (e.g. as a result of the user resizing the browser window, or changing the page zoom factor, or other UI appearing or disappearing on the [=overlay=]), since the last time these steps were run, [=fire an event=] named `ongeometrychange` at the {{Window/window}} object and [=update the overlay area information=].

오버레이 영역 정보 업데이트

오버레이 영역 정보를 업데이트하려면, 다음 단계를 실행한다:

  1. Let |ovls| be a [=list=] of regions defined by the [=overlays=] that house the [=window controls=] on the the window frame.
  2. Let |tba| be an empty {{DOMRect}} object representing the available title bar area.
    1. If there is only one overlay region in |ovls|, set |tba| as a {{DOMRect}} that encompasses the area from the edge of the frame to the innermost edge of the |ovls|.
    2. If there is more than one overlay region in |ovls|, set |tba| to a {{DOMRect}} that encompasses the area between the intersection of the regions in |ovls| and the [=document=]'s viewport.
    3. |tba|'s height should be the same as the height of the regions in |ovls|.
  3. Make {{Window/window}}.[[\TitleBarArea]] equal to |tba|.
  4. Update the [=title bar area env variables=] with information from {{Window/window}}.[[\TitleBarArea]].

보안 및 개인정보 보호 고려사항

보안

스푸핑 위험

프레임이 없는 창에 설치된 웹 앱을 표시하면 개발자가 이전에는 신뢰되던 UA 제어 영역에 콘텐츠를 스푸핑할 여지가 생긴다.

현재 Chromium 브라우저에서는 `standalone` 모드에 제목 표시줄이 포함되며, 초기 실행 시 왼쪽에는 웹페이지의 제목이, 오른쪽에는 페이지의 출처(origin)가 표시된다(그 뒤로 "설정 및 추가" 버튼과 창 컨트롤이 따른다). 몇 초 후에 출처 텍스트는 사라진다.

RTL 구성된 브라우저에서는 이 레이아웃이 뒤집혀 출처 텍스트가 왼쪽에 있게 된다. 이는 오버레이의 오른쪽 가장자리와 출처 사이에 패딩이 충분하지 않으면 오버레이가 출처를 스푸핑할 수 있게 한다. 예를 들어, 출처 "evil.ltd"가 신뢰할 수 있는 사이트 "google.com"으로 이어붙여져 사용자가 출처를 신뢰할 수 있다고 믿게 만들 수 있다.

범위를 벗어난 탐색(Out-of-scope Navigation)

설치된 웹 앱에 대한 또 다른 기존 보안 기능은 사용자가 앱의 선언된 범위를 벗어났을 때의 표시이다. 사용자가 범위를 벗어나면 제목 표시줄과 웹 콘텐츠 사이에 검은색 막대가 나타나며, 다음 정보를 포함한다:

  • 사용자가 쉽게 범위 내로 다시 이동할 수 있도록 하는 닫기 버튼
  • 클릭 시 보안 정보 팝업을 여는 보안 아이콘
  • 사이트의 출처(origin) 및 제목

창 컨트롤 오버레이가 활성화된 경우, 사용자가 범위를 벗어나면 오버레이는 일시적으로 독립 실행형 제목 표시줄로 대체된다. 사용자가 범위 내로 다시 이동하면 독립 실행형 제목 표시줄은 다시 숨겨지고 오버레이가 표시된다.

개인정보

Window Controls Overlay를 활성화하면 오버레이의 크기가 운영체제, 텍스트 배율, OS 글꼴 크기, OS 줌 인자 및 웹 콘텐츠의 줌 인자에 따라 달라질 수 있으므로 지문 추적(fingerprinting) 면에서 표면적이 증가한다.

이는 잠재적 지문 추적 문제이긴 하지만, 설치된 데스크톱 웹 앱에서 window controls overlay 기능을 사용하는 경우에만 적용되며 일반 브라우저 사용에는 적용되지 않는다. 또한 windowControlsOverlay API는 설치된 웹 앱에 포함된 iframe에는 제공되지 않는다.

감사의 글

이 작업에 기여한 Amanda Baker, Joshua Bell 및 Yoav Weiss에게 큰 감사를 드린다.