월간 크롬 이슈 리포트 2023년 1월호

---

들어가며

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

💡M은 Milestone을 의미하며, M110은 110버전을 의미한다.

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

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

목차

1. M110

   • 📌 독립적으로 분할된 상태를 가지는 쿠키(CHIPS: Cookies Having Independent Partitioned State)
   • 📌 Web Share 권한 정책

2. M111 (dev)

   • CSS Color 모듈 Level 4와 color-mix()
   • CSS 삼각함수
   • CSS 커스텀 속성에 대한 @Container 규칙에 style 지원

3. Dev Trial

   • CSS 루트 폰트 단위 'rex', 'rch', 'ric', 'rlh' 추가

4. 지원 중단 및 제거 예정

   • 📌 document.domain setter 지원 중단
   • PaymentInstruments 지원 중단 및 제거
   • "canmakepayment" 이벤트에서의 판매자 식별자 지원 중단
   • 컨텍스트 보안을 위한 공개 웹 사이트의 하위 리소스에 대한 "사설 네트워크 요청" 제한
   • Secure Payment Confirmation: rp -> rpId로 변경

버전별 이슈 리스트

1. M110

📌 독립적으로 분할된 상태를 가지는 쿠키(CHIPS: Cookies Having Independent Partitioned State)

이슈

새로운 브라우저 개인정보 보호 모델은 최상위 컨텍스트에서 사용자의 활동을 추적하는 사이트의 기능을 제한하며, 크롬은 여러 최상위 컨텍스트에서 서드파티가 사용할 수 있는 사이트 간 쿠키를 차단할 계획이다. 사용자 추적과 관련되지 않는 서드파티 쿠키 사용 사례를 지원하기 위해서 최상위 컨텍스트에 의해 분할된 사이트 간 쿠키를 지원하는 새로운 쿠키 특성인 Partitioned를 도입할 예정이다. 이 쿠키는 서로 다른 사이트에서 사용자의 활동을 추적하는 데 사용할 수 없으므로 사이트 간 쿠키 차단에 의해 제한되지 않는다.

크롬에서는 서드파티 쿠키에 대한 지원을 단계적으로 중단할 계획이다. 크롬 블로그의 SameSite 쿠키 설명, SameSite 쿠키 레시피, Schemeful samesite 가이드를 읽고 이에 대한 대처를 할 수 있다.

표준화

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

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

References

• https://chromestatus.com/feature/5179189105786880
• https://github.com/DCtheTall/CHIPS-spec
• https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html
• https://web.dev/samesite-cookies-explained/
• https://web.dev/samesite-cookie-recipes/
• https://web.dev/schemeful-samesite/

📌 Web Share 권한 정책

이슈

이전의 서드파티 iframe은 사이트의 명시적 권한 없이 navigator.share()를 사용할 수 있었다. 새로운 권한 정책의 기본 허용 목록은 'self'이므로 이런 남용을 방지한다. Web Share API는 운영 체제 공유 시스템과 통합되어 다이얼로그가 나타난다. 권한 정책(Permission Policy)을 사용하여 서드파티 iframe이 다이얼로그를 시작하는 기능을 제한한다. 이전과 같이 서드파티 iframe에서 navigator.share()를 사용하기 위해서는 iframe의 allow 속성을 통한 권한 정책을 설정해야 한다.

데모

• https://scrawny-bottlenose-somersault.glitch.me/share-from-iframes.html

표준화

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

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

References

• https://chromestatus.com/feature/6362499966304256
• https://w3c.github.io/web-share
• https://w3c.github.io/web-share/#permissions-policy
• https://www.w3.org/TR/permissions-policy-1/#policy-controlled-feature-default-allowlist
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
• https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy

2. M111 (dev)

CSS Color 모듈 Level 4와 color-mix()

이슈

CSS Color 4에 설명된 모든 기능을 활성화한다.

데모

• https://codepen.io/argyleink/pen/RwyOyeq
• https://2021-hd-color-at-css-camp.netlify.app/

표준화

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

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

References

• https://chromestatus.com/feature/5147752829288448
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

CSS 삼각함수

이슈

삼각함수 sin(), cos(), tan(), asin(), acos(), atan(), atan2()를 CSS 수학 표현식에 추가한다.

표준화

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

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

References

• https://chromestatus.com/feature/5165381072191488
• https://www.w3.org/TR/css-values-4/#trig-funcs
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#trigonometric_functions

CSS 커스텀 속성에 대한 @Container 규칙에 style 지원

이슈

@container 규칙에 style() 함수를 추가하여 상위 요소의 커스텀 속성 계산 값을 기반으로 스타일을 적용할 수 있도록 한다.

데모

• https://www.bram.us/2022/10/14/container-queries-style-queries
• https://una.im/style-queries

표준화

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

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

References

• https://chromestatus.com/feature/5076875399921664
• https://drafts.csswg.org/css-contain-3/#style-container

3. Dev Trial

CSS 루트 폰트 단위 'rex', 'rch', 'ric', 'rlh' 추가

이슈

루트 폰트 단위 'rex', 'rch', 'ric', 'rlh'를 추가한다. 이전의 크롬에서는 'rem'만 지원되었다.

표준화

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

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

References

• https://chromestatus.com/feature/5073969265246208
• https://www.w3.org/TR/css-values-4/#font-relative-lengths

4. 지원 중단 및 제거 예정

📌 document.domain setter 지원 중단

이슈

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

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

다른 출처 간의 비동기 메시지를 보내기 위해서는 document.domain 대신 window.postMessage를 사용하기를 권장한다.

관리자가 OriginAgentClusterDefaultEnabled 정책을 false로 설정하여 조직 전체의 크롬 인스턴스에서 document.domain의 기본 값을 설정할 수 있다. 자세한 내용은 크롬 블로그 링크를 참고한다.

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

데모

• 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
• https://developer.chrome.com/blog/immutable-document-domain/#enterprise-policy

PaymentInstruments 지원 중단 및 제거

이슈

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

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

표준화

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

• 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

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

이슈

공개 웹 사이트의 하위 리소스에 대한 사설 네트워크 요청은 보안 컨텍스트에서만 시작할 수 있다. 예를 들면 인터넷에서 인트라넷으로의 요청, 인터넷에서 루프백으로의 요청이 있다.

M113(2023년 4월 26일 배포 예정) 에 적용될 예정이다.

표준화

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

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

References

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

Secure Payment Confirmation: rp -> rpId로 변경

이슈

SPC(Secure Payment Confirmation)는 결제 트랜잭션 중에 간소화된 인증을 지원하는 웹 API다. WebAutn을 기반으로 구축되며 이 스펙에 맞게 rpId로 이름을 변경한다. (즉, rpId를 추가하고 rp를 제거 한다.)

M113(2023년 4월 26일 배포 예정) 에 적용될 예정이다.

표준화

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

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

References

• https://chromestatus.com/feature/5203057325899776
• https://w3c.github.io/secure-payment-confirmation/#sctn-collectedclientadditionalpaymentdata-dictionary