들어가며

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

💡 M은 Milestone을 의미하며, M93은 93버전을 의미한다.

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

💡 표준화에 대한 웹 개발자의 의견은 크롬 스테이터스 사이트에 쓰인 내용을 그대로 인용했다.

목차

1. M98

   • 하위 리소스에 대한 사설 네트워크 접근의 사전 요청 (롤백)

2. M99 (beta)

   • CSS 캐스케이드 레이어
   • 디바이스 속성 API

3. M100 (dev)

   • HIDDevice에 대한 권한을 취소하는 HIDDevice forget() API
   • AbortSignal.prototype.throwIfAborted API

4. Dev Trial

   • NFC 태그를 읽기 전용으로 만드는 NDEFReader makeReadOnly() API

5. 그 외 프로토타이핑

   • 📌 사용자 에이전트 문자열 축소(4단계)

6. 그 외 이슈

   • 📌 버전 100 브라우저의 호환성 이슈

버전별 이슈 리스트

1. M98

하위 리소스에 대한 사설 네트워크 접근의 사전 요청 (롤백)

이슈

M98에서 추가되었던 하위 리소스에 대한 사설 네트워크 접근의 사전 요청이 렌더러 충돌 등의 이유로 롤백되었다.

References

• https://groups.google.com/a/chromium.org/g/blink-dev/c/72CK2mxD47c/m/d835CNGtAAAJ

2. M99 (beta)

CSS 캐스케이드 레이어

이슈

CSS 캐스케이드 레이어는 작성자가 엘리먼트 기본 값, 써드파티 라이브러리, 테마, 컴포넌트, 재정의 등을 나타내는 레이어를 생성할 수 있게 해주며, 명시적인 방법으로 레이어 캐스케이드를 재정렬할 수 있다. 캐스케이드 레이어가 없으면 특정 캐스케이드 순서를 맞추기 위해 셀렉터 순서나 !import, 소스의 순서를 조정해야 하며 이는 오류가 발생하기 쉽다.

표준화

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

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

References

• https://chromestatus.com/feature/5663362835808256
• https://drafts.csswg.org/css-cascade-5/#layering
• https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

디바이스 속성 API

이슈

디바이스 속성 API는 웹 어플리케이션에서 디바이스 정보(디바이스 ID, 일련 번호, 위치 등)를 쿼리할 수 있는 기능을 제공한다.

데모

• https://github.com/WICG/WebApiDevice/blob/master/README.md

표준화

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

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

References

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

3. M100 (dev)

HIDDevice에 대한 권한을 취소하는 HIDDevice forget() API

이슈

사이트 중 일부는 HID 장치에 대한 접근 권한을 장기간 유지하고 싶지 않을 수 있다. 예를 들어 많은 장치가 연결된 공유 컴퓨터에서 교육용 웹 어플리케이션의 경우, 사용자 생성 권한이 누적되면 사용자 경험(user experience)을 나쁘게 만든다.

다음과 같은 형태로 사용한다.

// HID 장치에 대한 요청
const [device] = await navigator.hid.requestDevice({ filters: [] });

// 이후에 HID 장치에 대한 권한을 취소한다.
await device.forget();

표준화

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

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

References

• https://chromestatus.com/feature/5723581527883776
• https://groups.google.com/a/chromium.org/g/blink-dev/c/Fk-IJF63UWc
• https://developer.mozilla.org/en-US/docs/Web/API/HID
• https://wicg.github.io/webhid/
• https://en.wikipedia.org/wiki/Human_interface_device

AbortSignal.prototype.throwIfAborted API

이슈

시그널이 중단되면 AbortSignal의 원인을 던진다. 시그널을 다루는 함수에서 시그널의 abort 상태를 확인하고 중단 원인을 전파하는데 사용할 수 있다.

데모

• https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/throwIfAborted#examples

표준화

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

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

References

• https://chromestatus.com/feature/5029737100476416
• https://groups.google.com/a/chromium.org/g/blink-dev/c/bpiezft1AIc
• https://dom.spec.whatwg.org/#dom-abortsignal-throwifaborted
• https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/throwIfAborted

4. Dev Trial

NFC 태그를 읽기 전용으로 만드는 NDEFReader makeReadOnly() API

이슈

악의적인 사용자가 컨텐츠를 덮어쓰지 못하도록 NFC 태그를 잠그는 방법을 제공한다. NFC 태그가 읽기 전용이 되면 더 이상 쓰기가 불가능하며 되돌릴 수 없다.

데모

• https://googlechrome.github.io/samples/web-nfc/

표준화

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

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

References

• https://chromestatus.com/feature/5700853265596416
• https://github.com/w3c/web-nfc/issues/558
• https://web.dev/nfc/#make-read-only
• https://w3c.github.io/web-nfc/#dom-ndefreader-makereadonly
• https://developer.mozilla.org/en-US/docs/Web/API/NDEFReader

5. 그 외 프로토타이핑

📌 사용자 에이전트 문자열 축소(4단계)

이슈

User-Agent 문자열을 수정할 때마다 컨텐츠가 이전 문자열의 형식에 의존하고 있을 위험이 있다. navigator.userAgent, navigator.appVersion, navigator.platform API 뿐만 아니라 User-Agent 헤더 필드에서 사용 가능한 정보를 단계적으로 줄이고 있으며 총 7단계 중 현재 4단계에 접어들었다. 4단계에서는 마이너, 빌드, 패치 버전을 '0.0.0'으로 고정한다.

작업이 완료되면 User-Agent 문자열에서만 브라우저 메이저 버전, 플랫폼명을 안정적으로 얻을 수 있으며 데스크톱과 모바일을 구분할 수 있다. User-Agent 문자열을 깊게 사용하고 있다면 User Agent Client Hints API로의 마이그레이션을 권장한다.

표준화

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

• Firefox: 배포됨
• Safari: 배포됨
• 웹 개발자: 다양한 반응

References

• https://chromestatus.com/feature/6311349754789888
• https://www.chromium.org/updates/ua-reduction/
• https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html
• https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html
• https://web.dev/migrate-to-ua-ch
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent
• https://developer.mozilla.org/en-US/docs/Web/API/User-Agent_Client_Hints_API

6. 그 외 이슈

📌 버전 100 브라우저의 호환성 이슈

이슈

크롬 브라우저와 파이어폭스 브라우저가 곧 버전 100에 도달한다. 초기 테스트에서 대다수의 사이트에서는 문제가 없었지만 일부 사이트에서 브라우저 버전 식별에 의존하는 경우 상당한 버그가 발생했다. 모질라에서는 웹 개발사가 미리 버전 100 브라우저 호환성을 테스트할 것을 권장한다.

크롬 브라우저와 파이어폭스 브라우저에서 미리 버전 100 브라우저의 호환성을 테스트할 수 있다. 크롬 브라우저의 경우 chrome://flags/#force-major-version-to-100로 이동해 해당 플래그를 켜서 테스트할 수 있으며, 파이어폭스 브라우저의 경우 파이어폭스 Nightly의 설정 메뉴에서 "Firefox 100"을 검색해서 Firefox 100 User-Agent String 옵션을 켜서 테스트할 수 있다.

References

• https://hacks.mozilla.org/2022/02/version-100-in-chrome-and-firefox/
• https://developer.chrome.com/blog/force-major-version-to-100/