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

---

들어가며

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

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

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

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

목차

1. M108

   • ImageDecoderInit.premultiplyAlpha 지원 중단 및 제거

2. M109

   • CSS hyphenate-limit-chars 프로퍼티 추가
   • CSS 'lh' 길이 단위 추가
   • Resource Timing에 HTTP 응답 상태 코드 추가

3. M110 (dev)

   • CSS 의사 클래스 ":picture-in-picture" 추가

4. Dev Trial

   • Array와 TypedArray에 변경된 사본을 반환하는 메서드 추가
   • WeakMap의 키로 Symbol 사용 가능
   • 부하 계산
   • CSS 중첩

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

ImageDecoderInit.premultiplyAlpha 지원 중단 및 제거

이슈

WebCodecs 스펙 에디터의 합의와 사용량 부족에 따라 M108부터 이 기능을 지원 중단하고 제거한다.

표준화

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

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

References

• https://chromestatus.com/feature/4560781148946432
• https://github.com/w3c/webcodecs/issues/508

2. M109

CSS hyphenate-limit-chars 프로퍼티 추가

이슈

'-'(하이픈)으로 연결된 단어의 최소 문자 수를 지정하는 hyphenate-limit-chars 프로퍼티를 추가한다. 이 속성을 이용하여 하이픈 연결을 보다 세밀하게 제어할 수 있으며 JavaScript 하이픈 연결 라이브러리를 사용할 필요가 줄어든다.

표준화

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

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

References

• https://chromestatus.com/feature/5150761588097024
• https://w3c.github.io/csswg-drafts/css-text-4/#propdef-hyphenate-limit-chars
• https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars

CSS 'lh' 길이 단위 추가

이슈

line-height에 상대적인 CSS 길이 표현인 'lh' 단위를 추가한다.

표준화

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

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

References

• https://chromestatus.com/feature/4998371945742336
• https://www.w3.org/TR/css-values-4/#lh

Resource Timing에 HTTP 응답 상태 코드 추가

이슈

리소스를 가져올 때 HTTP 응답 상태를 나타내는 필드를 PerformanceResourceTiming에 추가한다. 현재는 개발자가 Resource Timing API를 사용할 때, 리소스를 로드하는데 실패했는지 여부를 쉽게 알 수 있는 방법이 없다.

표준화

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

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

References

• https://chromestatus.com/feature/5163838794629120
• https://github.com/w3c/resource-timing/blob/gh-pages/Explainers/Response_Status_Code.md
• https://github.com/w3c/resource-timing/pull/335
• https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API

3. M110 (dev)

CSS 의사 클래스 ":picture-in-picture" 추가

이슈

CSS 의사 클래스를 추가하여 비디오가 Picture-in-Picture(PIP)에 들어오고 나갈 때 미디어 플레이어를 커스터마이징할 수 있도록 도와준다.

데모

• https://googlechrome.github.io/samples/picture-in-picture/css-pseudo-class

표준화

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

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

References

• https://chromestatus.com/feature/6259534815297536
• https://wicg.github.io/picture-in-picture/#css-pseudo-class
• https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API

4. Dev Trial

Array와 TypedArray에 변경된 사본을 반환하는 메서드 추가

이슈

Array.prototype과 TypedArray.prototype에 변경된 사본을 반환하는 메서드를 추가한다. 원본을 변경하지 않고 수정된 복사본을 반환한다.

표준화

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

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

References

• https://chromestatus.com/feature/5068609911521280
• https://tc39.es/proposal-change-array-by-copy

WeakMap의 키로 Symbol 사용 가능

이슈

Symbol을 WeakMap과 WeakSet에서 키로, WeakRef에서 참조로, FinalizationRegistry에서 타깃으로 사용되도록 한다.

표준화

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

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

References

• https://chromestatus.com/feature/5124046206271488
• https://tc39.es/proposal-symbols-as-weakmap-keys
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry

부하 계산

이슈

웹사이트가 타겟 장치의 CPU 부하의 변화에 대응하여 향상된 사용자 환경을 위해 리소스를 트레이드오프할 수 있는 방법을 제공한다. 예를 들어, 화상 회의 웹 애플리케이션은 이 API를 사용하여 시스템의 컴퓨팅 리소스 가용성에 따라 다양한 수준의 정교함으로 비디오 효과를 렌더링하고, 일관된 사용자 경험을 유지하면서 사전에 변경사항에 적응할 수 있다.

데모

• https://wicg.github.io/compute-pressure/demo

표준화

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

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

References

• https://chromestatus.com/feature/5597608644968448
• https://www.w3.org/TR/compute-pressure

CSS 중첩

이슈

스타일시트의 모듈화 및 유지 관리성을 높이기 위해 CSS 스타일 규칙을 다른 스타일 규칙 안에 중첩할 수 있는 기능을 추가한다.

표준화

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

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

References

• https://chromestatus.com/feature/5800613594529792
• https://drafts.csswg.org/css-nesting

5. 지원 중단 및 제거 예정

navigateEvent.restoreScroll() 제거

이슈

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

M108(2022년 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(2022년 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(2023년 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(2023년 1월 10일 배포 예정) 에, 나머지 50%는 M110(2023년 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(2023년 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(2023년 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(2023년 3월 7일 배포 예정) 에 적용될 예정이다.

표준화

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

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

References

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

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

이슈

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

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

M111(2023년 3월 1일 배포 예정) 에 적용될 예정이다.

표준화

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

• 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

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

이슈

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

표준화

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

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

References

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