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

들어가며

프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다.

💡 각 항목은 Chrome Platform Status의 Roadmap과 한 달간의 blink-dev 활동 요약을 바탕으로 정리했다.

💡 각 항목의 🚫는 지원 중단 및 제거(Removed), ⚠️는 지원 중단(Deprecated), ✅는 새로운 기능(Enabled by default)를 의미한다.

💡 각 항목 중 기존 서비스에 미치는 영향이 크다고 판단한 항목은 소제목 뒤에 📌 표시를 했다.

💡 지원 중단 및 제거(🚫), 지원 중단(⚠️) 외의 항목은 공유 가치가 있다고 판단한 경우에만 포함했다.

💡 각 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 Chrome Platform Status를 그대로 인용했다.

목차

1. Chrome 112

   • ⚠️ document.domain 설정자(Setter) 지원 중단 📌
   • ✅ 선언적 Shadow DOM 활성화에 사용하는 비표준 shadowroot 속성 지원 중단 미리 보기
   • ✅ FormData 생성자에 submitter 인자 추가
   • ✅ CSS 중첩 모듈
   • ✅ 정규식 v 플래그 추가
   • 🗓️ 배포 예정일

2. Chrome 113

   • ⚠️ Secure Payment Confirmation: CollectedClientAdditionalPaymentData의 rp 속성 이름 변경
   • ✅ Fetch: Headers.getSetCookie() 메서드 추가
   • ✅ RTCPeerConnection.getStats() 콜백 방식 지원 중단 미리 보기 📌
   • 🗓️ 배포 예정일

3. Chrome 114

   • ✅ Popover API
   • ✅ display, content-visibility의 애니메이션 사용 지원
   • ✅ CSS 불연속 속성의 Transition 지원
   • 🗓️ 배포 예정일

4. Chrome NEXT

   • ⚠️ [Chrome 119] 선언적 Shadow DOM 활성화에 사용하는 비표준 shadowroot 속성 지원 중단
   • ⚠️ [Chrome 119] RTCPeerConnection.getStats() 콜백 방식 지원 중단 📌
   • ✅ [Chrome ???] 내부망에 대한 하위 리소스 요청 제한 📌

1. Chrome 112

⚠️ document.domain 설정자(Setter) 지원 중단 📌

SOP(Same-Origin Policy)는 브라우저 보안 정책으로, 두 페이지가 서로 다른 출처(origin)일 때 이 두 페이지 사이의 통신을 막는다. 예를 들어 parent.example.com 페이지에 <iframe>으로 child.example.com 페이지를 불러오면 기본적으로 child.example.com은 window.parent로 부모창에 접근할 수 없고, 이 반대도 마찬가지다. 기존에는 상위 도메인이 같은 경우, document.domain 설정자를 사용하여 상위 도메인(example.com)으로 출처를 변경해 SOP를 완화할 수 있었다. 보다 강력한 보안을 위해 이 설정자를 지원 중단한다. 지원 중단 기간 동안 document.domain 설정자를 호출할 수는 있지만 출처는 변하지 않는다.

사용자가 직접 chrome://flags에서 Origin-keyed agent clusters 기능을 설정해 기존처럼 document.domain으로 출처를 변경할 수 있다. 하지만 기본 옵션이 아니기에 대안을 찾는 것이 좋다. 가장 간단하게 서로 다른 출처 간 통신은 window.postMessage로 구현할 수 있다.

// parent.example.com
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://child.example.com') {
    return;
  }

  console.log(event.data); // 안녕하세요?
});

// child.example.com
window.postMessage('안녕하세요?', 'http://parent.example.com');

window.postMessage의 자세한 사용법 및 다른 대안은 여기를 참고해도 좋다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 적용 검토
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Deprecate the document.domain setter.
• 출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까?
• Same-origin policy

✅ 선언적 Shadow DOM 활성화에 사용하는 비표준 shadowroot 속성 지원 중단 미리 보기

선언적 Shadow DOM은 <template> 요소에 shadowroot 속성을 지정해 템플릿에서 직접 Shadow DOM을 활성화할 수 있는 기능이다. 표준에서 이 속성에 대한 이름을 shadowrootmode로 변경함에 따라 기존 shadowroot 속성을 지원 중단할 예정이다. shadowroot는 크롬에서 그대로 동작하나, Chrome 111에서 추가된 스트리밍 기능을 사용할 수 없다. shadowrootmode는 Chrome 111 이상에서 사용할 수 있으며, 다른 브라우저에서도 지원 예정이므로 shadowrootmode 속성을 사용하는 것이 좋다.

<host-element>
- <template shadowroot="open">
+ <template shadowrootmode="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

shadowroot 속성은 오는 10월 말 배포 예정인 Chrome 119에서 지원 중단 예정이다. Chrome 112에서는 shadowroot 속성 지원 중단에 대한 미리 보기만 추가한다. chrome://flags에서 해당 기능을 활성화해 속성 지원 중단을 미리 체험할 수 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Deprecate non-standard shadowroot attribute for declarative shadow DOM (Deprecated)
• 선언적 섀도 DOM(Declarative Shadow DOM)
• Shadow DOM v1 - Self-Contained Web Components
• Feature: Declarative Shadow DOM

✅ FormData 생성자에 submitter 인자 추가

FormData 생성자의 두 번째 선택 인자로 submitter를 추가한다. submitter는 대상 <form> 요소에서 submit 역할을 하는 요소로, <button type=submit>이 대표적이다. FormData 인스턴스 생성 시 이 submitter 인자를 넘기면 해당 요소의 값을 포함한 FormData 인스턴스를 생성한다.

<form id="myForm" action="/api">
  <input name="title" value="여름 휴양지를 선택해주세요." />
  <button name="type" value="beach">바다</button>
  <button name="type" value="mountain">산</button>
  <button name="type" value="valley">계곡</button>
</form>

위 <form>은 어떤 버튼을 눌렀는지에 따라 서버(/api)에 보내는 값이 달라진다. 만약 바다 버튼을 눌렀다면 서버가 받는 값은 아래와 같다.

title=여름 휴양지를 선택해주세요.
type=beach

하지만 스크립트에서 위 데이터와 같은 FormData를 생성하려면 직접 값을 추가해야 한다.

document.getElementById('myForm').addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(event.target);
  // ▸ FormData(1) { title -> "여름 휴양지를 선택해주세요." }

  formData.append(event.submitter.name, event.submitter.value);
});

Chrome 112부터는 FormData에 submitter 인자를 넘기면 submitter의 값을 포함한 FormData 인스턴스를 생성한다.

document.getElementById('myForm').addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(event.target, event.submitter);
  // ▸ FormData(2) { title -> "여름 휴양지를 선택해주세요.", type -> "beach" }
});

SubmitEvent.submitter는 Chrome 81 이상에서 사용할 수 있다. 이 항목에 대한 폴리필이 있으니 실제 적용 시 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Add optional submitter parameter to FormData constructor
• XMLHttpRequest Standard - Interface FormData
• SubmitEvent.submitter

✅ CSS 중첩 모듈

CSS 규칙을 중첩 정의할 수 있는 기능을 추가한다. Scss 문법과 비슷하나, 근본적인 차이가 있다. 예를 들어 Scss는 상위 선택자, &를 문자열로 본다.

.foo {
  &Bar {
    color: red;
  }
}

위 파일을 Scss 엔진으로 변환하면 다음과 같은 결과가 나온다.

.fooBar {
  color: red;
}

하지만 CSS의 중첩 모듈은 &를 별도의 컴포넌트로 본다. 따라서 첫 번째 예시를 아래처럼 해석한다.

Bar.foo {
  color: red;
}

CSS 중첩 모듈은 앞선 예시를 .foo 문자열과 Bar 문자열을 합친 게 아닌 .foo 클래스 선택자와 Bar 타입 선택자를 합친 것으로 본다.

또한 중첩 구문은 타입 선택자나 함수 구문으로 시작할 수 없다.

/* 올바르지 않은 CSS 구문! */
li {
  color: lime;

  input {
    margin-top: 1em;
  }
}

이 기능은 아직 초안이기 때문에 실제 구현 과정에서 규칙이 변경될 수 있다. 자세한 규칙은 공식 문서를 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: CSS Nesting
• CSS Nesting Module

✅ 정규식 v 플래그 추가

정규식에 유니코드 집합 모드(/v)를 추가한다. v 플래그는 ES2015 유니코드 모드(/u)의 확장판으로, u 플래그보다 더 많은 기능을 지원한다.

먼저 u 플래그가 하나의 코드 포인트(code point)만 지원하는 것과 달리 v 플래그는 다수의 코드 포인트를 지원한다.

{
  // u 플래그
  const regex = /^\p{RGI_Emoji}$/u;

  regex.test('⚽'); // '\u26BD', 한 개의 코드 포인트
  // -> true

  regex.test('👨🏾‍⚕️'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F', 5개의 코드 포인트로 이루어져 u 플래그로는 검사할 수 없다.
  //-> false
}
{
  // v 플래그
  const regex = /^\p{RGI_Emoji}$/v;

  regex.test('⚽'); // '\u26BD'
  // -> true

  regex.test('👨🏾‍⚕️'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F'
  // -> true
}

또한 유니코드 속성 예외 표현(\p)과 유니코드 집합 표현식을 함께 사용할 수 있다.

// 한글이며, "ㄴ"이 아닌 유니코드 문자
/[\p{Script_Extensions=Hangul}--ㄴ]/v.test('ㄴ'); // -> false
// 한글이며, "ㄱ", "ㄴ", "ㄷ"이 아닌 유니코드 문자
/[\p{Script_Extensions=Hangul}--[ㄱ-ㄷ]]/v.test('ㄴ'); // -> false

--를 사용하면 특정 유니코드 속성을 가진 문자 중에서 지정한 문자 또는 문자 집합을 제외할 수 있다.

&&는 교차 구문으로 두 유니코드 속성을 모두 가진 유니코드 문자를 가리킨다.

// 그리스 문자이며, 문자인 유니코드 문자
const regex = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
// U+03C0 그리스 PI 소문자
regex.test('π'); // true
// U+1018A 그리스 0에 해당하는 숫자
regex.test('𐆊'); // false

u 플래그는 유니코드 속성끼리만 집합을 생성할 수 있지만, v 플래그는 문자열과도 함께 집합을 생성할 수 있다.

// 한글 또는 0-9 사이의 아라비아 숫자
const regex = /^[\p{Script_Extensions=Hangul}0-9]$/v;

regex.test('스물두살'); // true
regex.test('22살'); // true

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: RegExp v flag with set notation + properties of strings
• RegExp v flag with set notation and properties of strings
• Unicode-aware regular expressions in ES2015

🗓️ 배포 예정일

Chrome 112은 2023년 3월 29일에 정식 배포 예정이다. 3월 9일부터 16일 사이에 크롬 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

2. Chrome 113

⚠️ Secure Payment Confirmation: CollectedClientAdditionalPaymentData의 rp 속성 이름 변경

SPC(Secure Payment Confirmation)는 결제 거래 중 간소화된 인증 절차를 제공하는 웹 API이다. WebAuthn을 기반으로 만들었으며, WebAuthn에서 CollectedClientAdditionalPaymentData의 rp(Relying Party, 신뢰 당자사) 속성의 이름을 rpId로 변경함에 따라 표준에서도 rp를 rpId로 변경하였다. 변경된 표준 문서의 반영을 위해 rp 속성을 제거한다.

Chrome 107에서 먼저 CollectedClientAdditionalPaymentData에 rpId 속성을 추가했으므로 rp 대신 rpId를 사용하도록 변경해야 한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Secure Payment Confirmation: Rename rp --> rpId in CollectedClientAdditionalPaymentData (Deprecated)
• Secure Payment Confirmation
• Guide to Web Authentication

✅ Fetch: Headers.getSetCookie() 메서드 추가

HTTP 요청을 보낼 때 Set-Cookie 헤더는 여러 번 중복으로 선언할 수 있으며, 자동으로 합쳐지지 않는다. 하지만 현재 Headers는 등록한 Set-Cookie 헤더를 따로 가져올 수 있는 기능을 제공하지 않는다. 예시로 현재 Headers.get('Set-Cookie')는 모든 Set-Cookie 헤더의 값을 합친 결과를 반환한다.

const a = new Headers();

a.append('Set-Cookie', 'a=1');
a.append('Set-Cookie', 'b=2');
console.log(a.get('Set-Cookie')); // a=1, b=2

HTTP의 규칙과 동일하게 Headers의 Set-Cookie를 배열로 반환하는 Headers.getSetCookie() 메서드를 추가한다. 일부 브라우저는 Headers 객체를 순회할 때 Set-Cookie를 합치지 않는 기능도 먼저 적용했다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Fetch: Headers.getSetCookie()
• Fetch Standard

✅ RTCPeerConnection.getStats() 콜백 방식 지원 중단 미리 보기 📌

RTCPeerConnection.getStats()는 해당 오디오나 비디오 연결에 대한 통계 자료를 반환하는 API다. 현재 크롬에서 이 API는 프로미스를 반환하는 최신 버전과, 콜백을 사용하는 구버전 두 가지로 나뉜다.

myPeerConnection.getStats(); // 최신 버전
myPeerConnection.getStats(null, onSuccess, onFailure); // 구버전, Promise 반환 X

콜백 방식은 모던 자바스크립트와 어울리지 않고, 표준 스펙 문서도 없어 장기적으로 지원을 중단할 예정이다. Chrome 113에서는 콜백 방식 사용 시 콘솔에 경고를 노출하며, chrome://flags에서 지원 중단을 체험할 수 있는 기능을 추가할 예정이다.

콜백 방식은 오는 10월 말에 정식 배포 예정인 Chrome 119에서 지원 중단 예정이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: [WebRTC] Callback-based legacy getStats()
• Intent to Deprecate and Remove: Legacy callback-based RTCPeerConnection.getStats() API
• RTCPeerConnection.getStats()

🗓️ 배포 예정일

Chrome 113은 2023년 4월 26일에 정식 배포 예정이다. 4월 6일부터 13일 사이에 크롬 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

3. Chrome 114

✅ Popover API

Popover는 웹 페이지 위에 덧씌우는 UI를 말한다. Date Picker, Context Menu, 간단한 툴팁 등, 웹 개발에서 Popover를 사용하는 예는 아주 많다. 하지만 상태 관리, 포커스 관리, 접근성 등 고려할 사항이 많아 은근히 구현이 쉽지 않은 기능 중 하나다.

Chrome 114에서 추가 예정인 HTML 요소의 popover 속성을 사용하면 이 Popover를 쉽게 구현할 수 있다.

<div popover>안녕하세요?</div>

popover 속성에 지정할 수 있는 값은 "auto" | "manual"이며, 기본값은 "auto"이다. 두 값의 차이는 다음과 같다.

• "auto":

  • One at a Time: 화면에 나타날 때 다른 popover 요소를 숨긴다.
  • Light Dismiss: popover 요소 바깥을 클릭하거나, escape 버튼을 누루는 성격의 동작 시 현재 popover 요소를 숨긴다.

• "manual":

  • 화면에 나타날 대 다른 popover 요소를 숨기지 않는다.
  • Light Dismiss를 적용하지 않는다.

popover 요소는 기본적으로 position: fixed; 스타일을 가진다. <dialog>처럼 ::backdrop 가상 선택자로 배경 요소에 접근할 수 있으며, :open으로 화면에 나타난 popover 요소를, :closed로 숨은 popover 요소를 선택할 수 있다.

[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

[popover]:open {
  display: flex;
}

popovertarget, popovertargetaction 속성을 사용하면 자바스크립트 없이도 popover 요소를 제어할 수 있다.

<span id="myPopover" popover>안녕하세요?</span>
<button type="button" popovertarget="myPopover">
  이 버튼을 누르면 메시지가 나타나거나 사라집니다.
</button>
<button type="button" popovertarget="myPopover" popovertargetaction="show">
  이 버튼을 누르면 메시지가 나타납니다.
</button>
<button type="button" popovertarget="myPopover" popovertargetaction="hide">
  이 버튼을 누르면 메시지가 사라집니다.
</button>
<button type="button" popovertarget="myPopover" popovertargetaction="toggle">
  이 버튼을 누르면 메시지가 나타나거나 사라집니다.
</button>

또는 자바스크립트를 통해 직접 popover 요소의 상태를 제어할 수도 있다.

const popover = document.getElementById('myPopover');

popover.showPopover();
console.log(popover.matches(':open')); // true
popover.hidePopover();
console.log(popover.matches(':open')); // false
popover.togglePopover();
console.log(popover.matches(':open')); // true

popover 속성은 <dialog>에 비해 좀 더 범용적이다. HTML 태그가 아닌 속성이기 때문에 시맨틱(sementic) 웹을 구축하기 좋으며, 순수하게 CSS로 애니메이션을 구현할 수도 있고, <dialog>에 open 이벤트가 없는 것과 달리 화면에 나타날 때도 이벤트(beforetoggle)를 발생시킨다.

다만 popover는 브라우저가 직접 display 스타일을 조작해 상태를 제어하므로 애니메이션을 구현할 때 주의해야 한다. display 속성에 관한 애니메이션 및 transition 지원이 Chrome 114에 같이 배포될 예정이니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: The Popover API
• HTML Standard - The popover attribute
• Popover API (Explainer)

✅ display, content-visibility의 애니메이션 사용 지원

display 속성 및 content-visibility 속성을 CSS 애니메이션에서 사용할 수 있도록 변경한다.

@keyframes slideOut {
  from {
    display: block;
  }
  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

.hide {
  animation: slideOut 0.2s;
  display: none;
}

위 예시에서 hide 클래스를 지정한 요소는 애니메이션 없이 바로 화면에서 사라진다. display 속성은 opacity 등의 속성과 달리 중간 값을 연산할 수 없는 불연속(discrete) 속성이다. 애니메이션에서 display 속성 자체를 지원하지 않아 display: block; 구문을 무시한 것이다.

Chrome 114부터는 display 및 content-visibility 속성의 중간 값을 none | hidden이 아닌 특정 값으로 연산해 해당 속성의 애니메이션 사용을 지원할 예정이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Display and content-visibility animations
• Animating and Interpolating display

✅ CSS 불연속 속성의 Transition 지원

CSS 불연속(discrete) 속성이란 중간 값을 연산할 수 없는 display, visibility 등을 말한다. 이들은 중간 값을 연산할 수 없어 transition 속성과 함께 사용할 수 없었다.

기존에는 특정 애니메이션이 끝난 후 display: none; 속성을 적용하려면 자바스크립트로 직접 스타일을 변경해야 했다.

.hide {
  transition: opacity 0.3s;
  opacity: 0;
  /* display: none; */
}

const target = document.querySelector('#target');

target.addEventListener('transitionend', () => {
  target.style.setProperty('display', 'none');
});

target.classList.add('.hide');

Chrome 114부터는 transition-property 속성에 불연속 속성을 명시해 transition의 대상으로 지정할 수 있다.

.hide {
  transition: opacity 0.3s, display 0.3s;
  opacity: 0;
  display: none;
}

const target = document.querySelector('#target');

target.classList.add('.hide');

주의해야 할 점은 all은 여전히 불연속 속성을 포함하지 않는다는 점이다. 불연속 속성을 transition의 대상으로 지정하려면 해당 속성을 명시적으로 transition-property에 작성해야 한다.

/* 애니메이션 없이 바로 사라진다. */
.hide {
  transition: all 0.3s;
  opacity: 0;
  display: none;
}

/* 0.3초 후 사라진다. */
.hide {
  transition: display 0.3s, opacity 0.3s;
  opacity: 0;
  display: none;
}

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Transitions on specified discrete properties

🗓️ 배포 예정일

Chrome 114은 2023년 5월 24일에 정식 배포 예정이다. 5월 4일부터 11일 사이에 크롬 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

4. Chrome NEXT

⚠️ [Chrome 119] 선언적 Shadow DOM 활성화에 사용하는 비표준 shadowroot 속성 지원 중단

선언적 Shadow DOM은 <template> 요소에 shadowroot 속성을 지정해 템플릿에서 직접 Shadow DOM을 활성화할 수 있는 기능이다. 표준에서 이 속성에 대한 이름을 shadowrootmode로 변경함에 따라 기존 shadowroot 속성을 지원 중단한다. shadowroot는 크롬에서 그대로 동작하나, Chrome 111에서 추가된 스트리밍 기능을 사용할 수 없다. shadowrootmode는 Chrome 111 이상에서 사용할 수 있으며, 다른 브라우저에서도 지원 예정이므로 shadowrootmode 속성을 사용하는 것이 좋다.

<host-element>
-  <template shadowroot="open">
+ <template shadowrootmode="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Chrome 112에서 shadowroot 속성에 대한 지원 중단 미리 보기를 추가할 예정이다. 배포 후 chrome://flags에서 해당 기능을 활성화해 속성 지원 중단을 미리 체험할 수 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: Deprecate non-standard shadowroot attribute for declarative shadow DOM (Deprecated)
• 선언적 섀도 DOM(Declarative Shadow DOM)
• Shadow DOM v1 - Self-Contained Web Components
• Feature: Declarative Shadow DOM

⚠️ [Chrome 119] RTCPeerConnection.getStats() 콜백 방식 지원 중단 📌

RTCPeerConnection.getStats()는 해당 오디오나 비디오 연결에 대한 통계 자료를 반환하는 API다. 현재 크롬에서 이 API는 프로미스를 반환하는 최신 버전과, 콜백을 사용하는 구버전 두 가지로 나뉜다.

myPeerConnection.getStats(); // 최신 버전, Promise 반환
myPeerConnection.getStats(null, onSuccess, onFailure); // 구버전, Promise 반환하지 않음

콜백 방식은 모던 자바스크립트와 어울리지 않고, 표준 스펙 문서도 없어 장기적으로 지원을 중단할 예정이다.

Chrome 113에서는 콜백 방식 사용 시 콘솔에 경고를 노출하며, chrome://flags에서 지원 중단을 체험할 수 있는 기능을 추가할 예정이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

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

참조

• Feature: [WebRTC] Callback-based legacy getStats()
• Intent to Deprecate and Remove: Legacy callback-based RTCPeerConnection.getStats() API
• RTCPeerConnection.getStats()

✅ [Chrome ???] 내부망에 대한 하위 리소스 요청 제한 📌

내부망 접근 규칙(Local Network Access) 적용의 일부로 하위 리소스(.js, .css 등)를 요청할 때 내부망(사설 IP, localhost)에 대한 접근 제한을 검토 중이다. 정식 적용 일정은 불투명하나, 미리 보기로 일부 기능을 체험할 수 있다.

공개 웹 사이트의 내부망 하위 리소스 접근 제한

공개 웹 사이트(공개 IP로 접근 가능한 사이트)에서 내부망에 하위 리소스(.js, .css 등) 요청 시 반드시 보안 컨텍스트(HTTPS)를 사용하도록 제한한다. 내부망의 하위 리소스에 접근하려면 보안 컨텍스트를 사용하도록 변경해야 한다.

Chrome 86 이상의 chrome://flags에서 해당 기능을 활성화해 접근 제한을 미리 체험할 수 있다.

내부망에 하위 리소스 요청 시 사전 요청 발송

내부망에 하위 리소스 요청 시 사전 요청을 보내 연결 허용 여부를 먼저 묻는다.

Chrome 98 이상의 chrome://flags에서 해당 기능을 활성화해 사전 요청 발송을 미리 체험할 수 있다.

참조

• Feature: Restrict "private network requests" for subresources from public websites to secure contexts.
• Feature: Private Network Access preflight requests for subresources
• Local Network Access