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

---

들어가며

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

💡M은 Milestone을 의미하며, M107은 107버전을 의미한다.

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

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

목차

1. M107

   • DisplayMediaStreamConstraints.selfBrowserSurface 지원
   • DisplayMediaStreamConstraints.surfaceSwitching 지원
   • HEVC 하드웨어 디코딩 지원
   • ignoreCase URL 패턴 지원

2. M108

   • CSS break-after, break-before, break-inside 지원
   • CSS Level 4 Small, Large, Dynamic, Logical 뷰포트 유닛
   • window.defaultStatus, window.defaultstatus 지원 중단 및 제거
   • LayoutNG 프린터 출력 지원
   • COLRv1 변수 지원

3. M109

   • 추측 규칙 API에 의해 발생하는 동일 사이트 교차 출처 prerendering
   • 익명 iframe

4. Origin Trial

   • unload 권한 정책

5. 지원 중단 및 제거 예정

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

버전별 이슈 리스트

1. M107

DisplayMediaStreamConstraints.selfBrowserSurface 지원

이슈

웹 응용 프로그램이 getDisplayMedia()를 호출할 때 사용자에게 제공되는 탭 목록에서 현재 탭을 제외할지 여부를 브라우저에 지시할 수 있도록 하는 힌트다.

표준화

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

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

References

• https://chromestatus.com/feature/5118675366445056
• https://github.com/w3c/mediacapture-screen-share/pull/216/files
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

DisplayMediaStreamConstraints.surfaceSwitching 지원

이슈

크롬이 화면 공유 중에 탭 전환 버튼을 표시할지 여부를 제어하는 옵션을 추가한다. navigator.mediaDevices.getDisplayMedia()에 전달된다.

표준화

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

• Firefox: 무해함 (*역자주: 이후 위험을 수반한다면 유해하다고 판단)
• Safari: 긍정적
• 웹 개발자: 의견 없음

References

• https://chromestatus.com/feature/5067650299330560
• https://github.com/w3c/mediacapture-screen-share/pull/225/files
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

HEVC 하드웨어 디코딩 지원

이슈

HEVC 비디오 디코딩을 위한 하드웨어(예: GPU, 미디어 가속기 등)를 사용할 수 있는 플랫폼에서 HEVC 비디오 디코딩을 지원한다.

표준화

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

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

References

• https://chromestatus.com/feature/5186511939567616
• https://www.itu.int/rec/T-REC-H.265

ignoreCase URL 패턴 지원

이슈

많은 클라이언트 측 자바스크립트 프레임워크는 대소문자를 구분하지 않는 URL 매칭을 사용한다. 하지만 URL 패턴은 URL 의미론을 따르고 URL의 많은 부분을 대소문자를 구분하는 것으로 처리한다.

이 기능을 지원하게 되면 URL 패턴에 ignoreCase 옵션을 추가해 모든 매칭 작업을 해당 패턴에 대해 대소문자를 구분하지 않는 것으로 처리한다.

표준화

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

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

References

• https://chromestatus.com/feature/5206436850696192
• https://github.com/WICG/urlpattern/pull/168
• https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API

2. M108

CSS break-after, break-before, break-inside 지원

이슈

LayoutNG 프린터 출력이 배포됨에 따라 LayoutNG를 완전히 지원할 수 있게 되었다. 이미 몇 년 전부터 break-after, break-before, break-inside의 최신 fragmentainer을 지원했다. 그러나 LayoutNG가 없으면 break-before, break-after 속성의 'avoid' 속성을 지원하지 않는다. 이는 LayoutNG 블록 단편화에서 지원된다.

표준화

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

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

References

• https://chromestatus.com/feature/5630943616303104
• https://drafts.csswg.org/css-break-3/#breaking-controls
• https://www.chromium.org/blink/layoutng/

CSS Level 4 Small, Large, Dynamic, Logical 뷰포트 유닛

이슈

sv* 유닛, lv* 유닛, dv* 유닛과 논리적 vi/vb 유닛을 지원한다.

표준화

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

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

References

• https://chromestatus.com/feature/5170718078140416
• https://drafts.csswg.org/css-values-4/#viewport-relative-lengths

window.defaultStatus, window.defaultstatus 지원 중단 및 제거

이슈

window.defaultStatus, window.defaultstatus 두 API는 원래 브라우저 창 아래의 상태 표시줄 텍스트를 수정/제어하는 데 사용되었다. 하지만 크롬의 상태 표시줄에 실제로 영향을 미친적이 없으며 표준 속성이 아니다. 파이어폭스는 버전 23 이후 이 속성을 지원하지 않았으며 사파리는 여전이 이 속성을 지원한다.

표준화

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

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

References

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

LayoutNG 프린터 출력 지원

이슈

LauoutNG 프린터 출력을 지원한다. LayoutNG 블록 단편화는 올해(2022년) 초에 배포되었으며, 처음에는 블록 컨테이너에 대한 지원만 제공되었으나 이후 flex, grid, table도 지원하였다.

표준화

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

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

References

• https://chromestatus.com/feature/5108105013100544
• https://www.chromium.org/blink/layoutng/

COLRv1 변수 지원

이슈

COLRv1 I2S의 2단계 작업으로 변수 기능을 추가하여 스펙을 전부 구현한다.

가변 폰트는 크롬에서 제공되어 공간 효율적이며 표현력이 뛰어난 단색 폰트를 사용할 수 있으며 구글 폰트 및 기타 폰트 공급자가 웹 폰트 제품군을 전달하는 데 효율성을 높이기 위해 이미 사용되고 있다. COLRv1 폰트는 크롬에서 제공되며, 작고 표현력 있으며 고성능 컬러 벡터 글리프를 제공한다.

데모

• https://roettsch.es/var_colrv1.html

표준화

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

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

References

• https://chromestatus.com/feature/6326528091095040
• https://docs.microsoft.com/en-us/typography/opentype/otspec191alpha/colr
• https://developer.chrome.com/blog/colrv1-fonts/

3. M109 (dev)

추측 규칙 API에 의해 발생하는 동일 사이트 교차 출처 prerendering

이슈

prerendering은 페이지 로드 속도를 높이는 데 유용하며, 이상적으로는 모든 대상 페이지를 prerendering할 수 있다.

동일 사이트 교차 출처 페이지를 포함하도록 prerendering 가능한 페이지를 확장함으로써 웹에서 더 많은 탐색을 즉시 수행할 수 있다.

표준화

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

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

References

• https://chromestatus.com/feature/4899735257743360
• https://wicg.github.io/nav-speculation/prerendering.html#navigate-fetch-patch
• https://web.dev/same-site-same-origin/
• https://developer.mozilla.org/en-US/docs/Glossary/prerender

익명 iframe

이슈

익명 iframe을 사용하면 개발자는 새 컨텍스트와 임시 컨텍스트를 사용하여 써드파티 iframe에서 문서를 로드할 수 있다.

데모

• https://anonymous-iframe.glitch.me/

표준화

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

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

References

• https://chromestatus.com/feature/5729461725036544
• https://wicg.github.io/anonymous-iframe/#specification

4. Origin Trial

unload 권한 정책

이슈

이 기능을 사용하면 페이지에서 unload 이벤트 핸들러의 실행을 비활성화할 수 있다. 목표는 다음 2가지다.

1. 모든 unload 이벤트 핸들러를 제거한 사이트에서 실수로 새 이벤트 핸들러를 추가하지 않도록한다.
2. 코드를 업데이트할 수 없는 경우에 사이트에서 unload 이벤트 핸들러를 제거할 수 있도록 허용한다.

unload 이벤트 핸들러는 여러 이유로 문제가 있으며 데스크톱에서 BFCache를 사용할 수 없다.

표준화

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

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

References

• https://chromestatus.com/feature/5760325231050752
• https://github.com/whatwg/html/pull/7915
• https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
• https://web.dev/bfcache/#never-use-the-unload-event

5. 지원 중단 및 제거 예정

Expect-CT(Certificate Transparency) HTTP 헤더 지원 중단

이슈

Expect-CT(Certificate Transparency)는 기본적으로 시행되기 전 웹 사이트가 인증서 투명성(CT) 시행을 선택할 수 있도록 허용한 HTTP 헤더다.

이제 크롬은 모든 공공 웹사이트에서 CT를 필요로 하기 때문에 더 이상 보안상 Expect-CT를 사용할 가치가 없다. Expect-CT를 구현한 브라우저는 없으므로 Expect-CT를 제거하는 것은 상호 운용성에 문제가 되지 않는다.

M107(10/25 배포) 에 적용되었다.

표준화

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

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

References

• https://chromestatus.com/feature/6244547273687040
• https://datatracker.ietf.org/doc/rfc9163
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expect-CT

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