월간 크롬 이슈 리포트 2022년 11월호

들어가며

프런트엔드 개발의 가장 큰 디펜던시인 크롬 브라우저의 주요 이슈를 Chrome Platform Status의 Roadmap과 한 달간 blink-dev 활동 요약을 기준으로 정리하여 공유한다.

💡M은 Milestone을 의미하며, M108은 108버전을 의미한다.

💡 웹 플랫폼 관련 이슈 위주로 다루며, 서비스에 영향이 크다고 판단되는 부분은 목차에 📌를 표시한다.

💡 표준화에 대한 웹 개발자의 의견은 Chrome Platform Status에 쓰인 내용을 그대로 인용했다.

목차

1. M108

   • 안드로이드 OSK(ON-Screen Keyboard)가 기본적으로 시각적 뷰포트 크기를 조절(<meta>로 기능 제거 가능)
   • ContentVisibilityAutoStateChanged 이벤트
   • Federated Credential Management(기존 WebID) 추가
   • font-tech() 및 font-format() 조건을 CSS @supports에 추가
   • 마지막 기준선 항목 정렬 지원
   • 파일 시스템 접근 API의 SyncAccessHandle에 동기 메서드 추가
   • @font-face src에 tech() 함수 지원
   • 권한 정책 출처에 와일드카드(*) 지원

2. M109

   • @font-face에서 폰트 설명자의 자동 범위 지정 지원
   • 조건부 포커스

3. M110

   • CSS initial-letter

4. Origin Trial

   • Back/forward 캐시와 관련된 NotRestoredReason API
   • SoftNavigation 성능 항목

5. 지원 중단 및 제거 예정

   • navigateEvent.restoreScroll() 제거
   • navigateEvent.transitionWhile() 제거
   • Event.path 지원 중단
   • 📌 document.domain setter 지원 중단
   • window.webkitStorageInfo 제거
   • Web Payment API의 connect-src CSP(Content Security Policy) 정책 무시 기능 지원 중단
   • PaymentInstruments 지원 중단 및 제거
   • 컨텍스트 보안을 위한 공개 웹 사이트의 하위 리소스에 대한 "사설 네트워크 요청" 제한
   • "canmakepayment" 이벤트에서의 판매자 식별자 지원 중단

버전별 이슈 리스트

1. M108

안드로이드 OSK(ON-Screen Keyboard)가 기본적으로 시각적 뷰포트 크기를 조절(<meta>로 기능 제거 가능)

이슈

안드로이드의 On-Screen Keyboard가 기본적으로 초기 컨테이닝 블록이 아닌 시각적 뷰포트 크기를 조절한다.

데모

• https://viewport-resize-behavior.netlify.app/

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/6145225857171456
• https://drafts.csswg.org/css-viewport/#interactive-widget-section

ContentVisibilityAutoStateChanged 이벤트

이슈

요소의 렌더링 상태가 변경될 때, 엘리먼트가 컨텐츠를 렌더링할지 여부를 결정하는 content-visibility에 대해 발생하는 이벤트를 추가한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 고려 중
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5179553291436032
• https://github.com/vmpstr/web-proposals/blob/main/explainers/cv-auto-event.md
• https://drafts.csswg.org/css-contain-2/#content-visibility-auto-state-changed
• https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
• https://developer.mozilla.org/en-US/docs/Web/API/ContentVisibilityAutoStateChangedEvent

Federated Credential Management(기존 WebID) 추가

이슈

사용이 중지된 써드파티 쿠키를 이용한 방식이나 리디렉션을 이용한 방식을 대신해 Federated Credential Management API를 사용해 로그인할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 개발 중
• Safari: 긍정적
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/6438627087220736
• https://developer.chrome.com/docs/privacy-sandbox/fedcm/
• https://developer.mozilla.org/en-US/docs/Web/API/FederatedCredential
• https://fedidcg.github.io/FedCM/
• https://github.com/fedidcg/FedCM

font-tech() 및 font-format() 조건을 CSS @supports에 추가

이슈

@supports 규칙에 font-tech() 및 font-format()을 추가한다. 특히 UA에서 색상 폰트 포맷을 지원하는 경우 사용자 에이전트가 지원하는 경우에만 색상 폰트 스타일 규칙 및 @font-face 정의를 포함하는데 유용하다.

데모

• https://github.com/w3c/csswg-drafts/blob/main/css-conditional-5/font-tech-format-explainer.md#use-case-1---progressive-enhancement-with-color-fonts

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 개발 중
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5155718374621184
• https://www.w3.org/TR/css-conditional-5/#at-supports-ext
• https://developer.mozilla.org/en/docs/Web/CSS/@supports

마지막 기준선 항목 정렬 지원

이슈

이 기능을 이용해 처음이 아닌 마지막 기준선에 따라 flex 및 grid 레이아웃 내의 항목을 정렬할 수 있다.

다음과 같이 사용한다.

.item {
  align-items: last baseline; /* flex/grid 컨테이너에서 */
  justify-items: last baseline; /* grid 컨테이너에서 */
  align-self: last baseline; /* flex/grid 아이템에서 */
  justify-self: last baseline; /* grid 아이템에서 */
}

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 배포 됨
• Safari: 배포 됨
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5093352798683136
• https://drafts.csswg.org/css-align-3/#baseline-rules

파일 시스템 접근 API의 SyncAccessHandle에 동기 메서드 추가

이슈

파일 시스템 접근 API의 SyncAccessHandle에서 비동기 메서드(flush(), getSize(), truncate())를 동기 메서드로 업데이트한다. 현재 동기 및 비동기 방식이 혼합되어 있어 성능과 사용성을 방해한다(특히 C/C++로 Wasm으로 포팅하는 애플리케이션에서).

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 의견 없음
• 웹 개발자: 매우 긍정적

References

• https://chromestatus.com/feature/5149644305203200
• https://github.com/whatwg/fs/pull/53/commits/618b663ebdc0f9842d7db3091baed5f75aa87534
• https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API

@font-face src에 tech() 함수 지원

이슈

CSS 폰트 Level 4는 폰트 리소스를 선택하거나 필터링할 수 있는 추가 수단을 제공한다. tech() 함수가 도입되어 각각의 폰트가 작동하기 위해 필요한 폰트 tech들을 전달할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5088679224147968
• https://www.w3.org/TR/css-fonts-4/#font-face-src-parsing
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src

권한 정책 출처에 와일드카드(*) 지원

이슈

유효한 오리진을 SCHEME://HOST:PORT(예를 들어, https://foo.com/)에서 구성할 수 있는 SCHEME://*.HOST:PORT(예를 들어, https://*.foo.com)와 같은 권한 정책에서 와일드카드에 대한 지원을 추가한다. 단, HOST가 최소한 eTLD+1이어야 한다. 즉, https://*.bar.foo.com/는 동작하지만 https://*.com/는 동작하지 않는다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5170361717489664
• https://github.com/w3c/webappsec-permissions-policy/issues/479

2. M109

@font-face에서 폰트 설명자의 자동 범위 지정 지원

이슈

@font-face에서 font-weight, font-style 및 font-stretch 설명자의 가변 글꼴 범위를 자동 설정한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 배포 됨
• Safari: 배포 됨
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5173271981457408
• https://drafts.csswg.org/css-fonts/#font-prop-desc

조건부 포커스

이슈

매개변수로 전달할 수 있는 CaptureController 객체를 추가해 getDisplayMedia() API를 확장한다. 이 메서드를 호출하면 캡쳐가 시작될 때 캡쳐된 탭/창에 포커스가 있는지 또는 캡쳐 페이지가 포커스를 유지해야 하는지 여부를 앱에서 제어할 수 있다.

데모

• https://wicg.github.io/conditional-focus/demo

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 긍정적
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5646614535340032
• https://w3c.github.io/mediacapture-screen-share/#dom-capturecontroller-setfocusbehavior

3. M110

CSS initial-letter

이슈

CSS의 initial-letter를 지원해 첫 글자에 대한 스타일을 적용한다. 현재는 Webkit에서만 지원하고 있으나 많이 사용된다. initial-letter만 구현하였으며, initial-letter-align, initial-letter-wrap은 추후에 구현할 예정이다.

데모

• https://output.jsbin.com/basukanebo/1

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 개발 중
• Safari: 배포 됨
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5167442033115136
• https://drafts.csswg.org/css-inline/#initial-letter-styling
• https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter

4. Origin Trial

Back/forward 캐시와 관련된 NotRestoredReason API

이슈

NotRestoredReason API는 PerformanceNavigationTiming API를 통해 프레임 트리 구조의 BF 캐시에서 페이지를 제공하지 않는 이유를 보고하는 API다. 오늘날 페이지는 스펙의 요구사항, 브라우저 구현의 다름 등 다양한 이유로 BF 캐시에서 차단될 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5684908759449600
• https://github.com/rubberyuzu/bfcache-not-retored-reason/blob/main/NotRestoredReason.md#security-and-privacy

SoftNavigation 성능 항목

이슈

SPA(Single Page Application)의 자바스크립트 기반 내비게이션을 고려할 수 있는 방법인 SoftNavigation이 추가된다. 이를 통해 SPA에서 다양한 경로의 성능 영향을 계산할 때 사용할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5144837209194496

5. 지원 중단 및 제거 예정

navigateEvent.restoreScroll() 제거

이슈

restoreScroll()은 navigationEvent.scroll()로 대체된다. scroll()은 개발자가 traverse가 아닌 탐색에 대한 스크롤 타이밍을 제어할 수 있다는 점을 제외하면 동일하게 동작한다.

M108(11/29 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5029730789621760
• https://wicg.github.io/navigation-api/#dom-navigateevent-scroll
• https://developer.chrome.com/blog/navigateevent-intercept/#navigateeventscroll
• https://wicg.github.io/navigation-api/#dom-navigationtype-traverse
• https://wicg.github.io/navigation-api/#global-traversing

navigateEvent.transitionWhile() 제거

이슈

navigateEvent.transitionWhile()은 탐색을 가로채서 동일한 문서의 탐색으로 변환한 다음, 제공된 프라미스를 사용하여 새로운 탐색이 완료되는 동안 브라우저와 웹 애플리케이션의 다른 부분에 전환 단계에 있다는 신호를 보낸다.

설계 결함이 보고되어 navigateEvent.transitionWhile()이 navigationEvent.intercept()로 대체된다. transitionWhile()의 동일한 기본 기능에 대해 보다 유용한 API를 제공하기 위해 intercept()를 도입하였다.

M108(11/29 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5169970311856128
• https://wicg.github.io/navigation-api/#dom-navigateevent-intercept
• https://developer.chrome.com/blog/navigateevent-intercept/#navigateeventtransitionwhile

Event.path 지원 중단

이슈

Event.path는 이벤트의 경로를 반환하는 비표준 API다. 크롬에서만 지원하므로 웹 호환성 문제가 발생한다. 웹 개발자는 동일한 결과를 반환하는 표준 API인 Event.composedPath()로 변경해야한다.

M109(23년 1/10 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 긍정적

References

• https://chromestatus.com/feature/5726124632965120
• https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
• https://dom.spec.whatwg.org/#ref-for-dom-event-composedpath①

📌 document.domain setter 지원 중단

이슈

document.domain setter를 사용하면 개발자가 동일 출처 정책을 우회하여 크롬에서 유지하고자 하는 기본 보안 경계를 복잡하게 만든다. 또한 크롬의 프로세스 모델에 대한 post-Spectre 도입을 방해한다. Origin-keyed agent clusters를 통해서만 설정이 가능하도록 지원을 중단한다. setter는 그대로 사용할 수 있지만 더 이상 출처를 변경하지 않는다.

크롬의 threat model에서는 프로세스를 유일한 방어 가능한 보안 경계로 간주해야한다. 이를 위해서는 출처를 프로세스에 맞추는 것이 가장 중요하다.

다른 출처 간의 비동기 메시지를 보내기 위해서는 document.domain 대신 window.postMessage를 사용하기를 권장한다. M106에 적용 예정이었으나 적용이 연기되어 50%는 M109(23년 1/10 배포 예정) 에, 전체 적용은 M110(23년 2/7 배포 예정) 에 적용될 예정이다.

데모

• https://origin-agent-cluster-demo.dev/no-header.html
• https://origin-agent-cluster-demo.dev/explicit-false.html

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 가치 있음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5428079583297536
• https://developer.mozilla.org/en-US/docs/Web/API/Document/domain
• https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• https://developer.chrome.com/blog/private-network-access-preflight/
• https://developer.chrome.com/blog/immutable-document-domain/
• https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/security/document-domain.md

window.webkitStorageInfo 제거

이슈

레거시 스토리지 할당량 API인 window.webkitStorageInfo에 대한 지원을 중단한다. 레거시 스토리지 할당량 API는 다른 브라우저에서는 구현되지 않았으며 2013년부터 사용되지 않는 것으로 표시되었다.

M110(23년 2/7 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5659629104136192
• https://storage.spec.whatwg.org/

Web Payment API의 connect-src CSP(Content Security Policy) 정책 무시 기능 지원 중단

이슈

manifest를 가져올 때 Web Payment API가 connect-src CSP(Content Security Policy) 정책을 무시할 수 있는 기능을 지원 중단한다.

M110(23년 2/7 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 해당사항 없음
• Safari: 해당사항 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/6286595631087616
• https://www.w3.org/TR/payment-method-manifest/#processing-model

PaymentInstruments 지원 중단 및 제거

이슈

PaymentInstruments는 non-JIT의 결제 앱 설치를 지원하는 웹 API이다. 일부 개인정보 유출의 문제가 있어 다른 브라우저는 배포하지 않은 기능이다. 악의를 가진 사용자가 임의의 데이터를 저장할 수 있고 써드파티 컨텍스트에서 이 데이터를 검색할 수 있는 보안상의 위협을 고려하여 이 API를 지원 중단 및 제거한다.

M111(23년 3/7 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5099285054488576

컨텍스트 보안을 위한 공개 웹 사이트의 하위 리소스에 대한 "사설 네트워크 요청" 제한

이슈

공개 웹 사이트의 하위 리소스에 대한 사설 네트워크 요청은 보안 컨텍스트에서만 시작할 수 있어야 한다. 예를 들어 인터넷에서 인트라넷으로의 요청, 인터넷에서 루프백으로의 요청이 있다. 현재(M103) Origin Trial 중에 있으며, M113(23년 5/2 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 가치 있음
• Safari: 긍정적
• 웹 개발자: 부정적

References

• https://chromestatus.com/feature/5436853517811712
• https://wicg.github.io/private-network-access/

"canmakepayment" 이벤트에서의 판매자 식별자 지원 중단

이슈

"canmakepayment" 서비스 워커 이벤트는 사용자가 설치된 결제 앱에 등록된 카드가 있는지 여부를 판매자에게 알려준다. 판매자의 출처와 임의의 데이터를 결제 앱 출처에서 서비스 워커에게 자동으로 전달한다.

사용자의 프라이버시를 보장하기 위해 "canmakepayment" 서비스 워커 이벤트에서 판매자의 출처 및 임의의 데이터를 제거해야한다.

M114(23년 5/30 배포 예정) 에 적용될 예정이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5190978431352832
• https://w3c.github.io/payment-handler
• https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/canMakePayment