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

들어가며

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

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

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

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

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

💡 개발자 미리 보기(🧪)는 chrome://flags에서 Experimental Web Platform features 항목을 활성화하거나(Developer Trial), Origin Trial을 활성화해 사용할 수 있다.

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

목차

1. Chrome 121

   • ✅ 교차 출처 <iframe> 이동 시 사용자 입력 일시 제한 📌
   • 🗓️ 배포일

2. Chrome 122

   • ✅ Iterator 메서드
   • ✅ Set 메서드
   • 🧪 새로운 사용자 지정 상태 문법 미리 보기
   • 🧪 하위 정규식 수정자 미리 보기
   • 🗓️ 배포 예정일

3. Chrome NEXT

   • 🚫 [Chrome 127] Mutation 이벤트 제거 📌
   • ⚠️ unload 이벤트 지원 중단 📌
   • ⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단
   • ⚠️ 제3자 쿠키 지원 중단 📌
   • ✅ 내부망에 대한 하위 리소스 요청 규칙 적용

1. Chrome 121

✅ 교차 출처 <iframe> 이동 시 사용자 입력 일시 제한 📌

교차 출처의 <iframe>이 화면에서 이동한 경우, 사용자의 입력을 일정 시간 무시하도록 변경한다. 갑자기 화면을 이동해 사용자가 원치 않는 클릭을 하도록 유도하는 공격을 방지하기 위한 조치로, 기존에는 <iframe> 내부에서 IntersectionObserver의 최신 버전을 사용하는 경우에만 적용했던 기능이다.

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

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

참조

• Feature: Discard Input Events To Recently Moved Cross-Origin Iframes
• Clickjacking Threats - Repositioning the trusted window

🗓️ 배포일

Chrome 121은 2024년 1월 17일에 정식 배포되었다.

2. Chrome 122

✅ Iterator 메서드

Iterator 객체에 prototype 및 각종 메서드를 추가한다. 이번에 추가되는 메서드는 .map(mapperFn), .filter(filtererFn), .find(fn), .forEach(fn) 등으로 기존에 배열에서 사용하던 메서드와 기능적으로 유사하며, take(limit), drop(limit)처럼 Iterator에 특화된 메서드도 있다.

function* naturals() {
  let i = 0;
  while (i < 10) {
    yield i;
    i += 1;
  }
}

const mapResult = naturals().map((v) => v * 10);
mapResult.next(); // {value: 0, done: false}
mapResult.next(); // {value: 10, done: false}
mapResult.next(); // {value: 20, done: false}

const filterResult = naturals().filter((v) => v % 2 === 0);
filterResult.next(); // {value: 0, done: false}
filterResult.next(); // {value: 2, done: false}
filterResult.next(); // {value: 4, done: false}

naturals().find((v) => v > 1); // 2

naturals().forEach((v) => {
  console.log(v);
});
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

const takeResult = naturals().take(3);
takeResult.next(); // {value: 0, done: false}
takeResult.next(); // {value: 1, done: false}
takeResult.next(); // {value: 2, done: false}
takeResult.next(); // {value: undefined, done: true}

const dropResult = naturals().drop(2);
dropResult.next(); // {value: 2, done: false}
dropResult.next(); // {value: 3, done: false}

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

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

참조

• Feature: Iterator helpers
• Iterator Helpers

✅ Set 메서드

고유 원소를 관리하는 Set 객체에 교집합, 합집합 등 집합 관련 메서드를 추가한다.

const odds = new Set([1, 3, 5, 7, 9]);
const evens = new Set([2, 4, 6, 8, 10, 12, 14, 16]);
const primes = new Set([2, 3, 5, 7, 11, 13, 17, 19]);
const squares = new Set([1, 4, 9, 16]);
const fours = new Set([4, 8, 12, 16]);

// 교집합
odds.intersection(squares); // Set(2) { 1, 9 }

// 합집합
evens.union(squares); // Set(6) { 1, 2, 3, 4, 6, 8, 9, 10, 12, 14, 16 }

// 서로소 집합인가?
primes.isDisjointFrom(squares); // true
odds.isDisjointFrom(squares); // false

// 부분 집합인가?
fours.isSubsetOf(evens); // true
fours.isSubsetOf(fours); // true
squares.isSubsetOf(evens); // false

// 상위 집합인가?
evens.isSupersetOf(fours); // true
evens.isSupersetOf(evens); // true
evens.isSupersetOf(squares); // false

이 메서드는 아직 제안 단계로 세부 동작이 바뀔 수 있으니 사용 시 참고하자.

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

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

참조

• Feature: Set methods
• Set methods

🧪 새로운 사용자 지정 상태 문법 미리 보기

사용자 지정 요소(Custom elements)에서 해당 요소의 상태를 관리하는 사용자 지정 상태(Custom state)의 새 문법 미리 보기를 추가한다. 사용자 지정 상태는 아직 논의 중인 스펙으로, 기존에는 상태의 이름 앞에 --를 붙여 사용했다.

states.add('--loading');

custom-element:--loading {
  border: 1px dotted green;
}

크롬은 이 문법을 다른 브라우저보다 먼저 적용했다. 하지만 CSS 표준 논의 과정에서 제안 중인 @custom-selectors와 문법이 겹침을 발견해 새로운 형태로 문법을 수정했다.

custom-element:state(loading) {
  border: 1px dotted green;
}

이번 업데이트에는 새로운 문법의 미리 보기만을 추가한다. 웹킷은 이미 해당 기능을 배포했으며, 기존 문법은 지원 중단 예정이므로 새로운 문법을 사용하길 권장한다.

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

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

참조

• Feature: CSS custom state new :state() syntax
• HTML Standard - Custom state pseudo-class
• Using Custom elements

🧪 하위 정규식 수정자 미리 보기

하위 정규식을 대상으로 플래그를 수정할 수 있는 새 문법의 미리 보기를 추가한다. 기존에는 설정한 플래그를 일부만 바꾸는 게 불가능했으나, 이 기능을 사용하면 정규식 내부에서 플래그를 바꿔 사용할 수 있다.

const regex = /^[a-z](?-i:[a-z])$/i;
regex.test('ab'); // true
regex.test('Ab'); // true
regex.test('aB'); // false

위 예제의 정규식은 첫 번째 문자로 알파벳 대소문자, 두 번째 문자로 알파벳 소문자만을 허용한다. 전역에 i 플래그를 설정했으나, 하위 정규식을 수정해 두 번째 문자는 i 플래그의 영향을 받지 않도록 한 것이다.

문법은 (?{부호}{플래그}:{하위 정규식})이며, - 부호를 사용하면 해당 플래그를 하위 정규식에서 제외한다. 부호를 사용하지 않으면 해당 하위 정규식에만 해당 플래그를 적용한다.

const regex = /^(?i:[a-z])[a-z]$/;
regex.test('ab'); // true
regex.test('Ab'); // true
regex.test('aB'); // false

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

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

참조

• Feature: RegExp modifiers
• Regular Expression Pattern Modifiers for ECMAScript

🗓️ 배포 예정일

Chrome 122은 2024년 2월 14일에 정식 배포 예정이다.

3. Chrome NEXT

🚫 [Chrome 127] Mutation 이벤트 제거 📌

MutationEvent는 DOM 요소에 변경이 있을 때 발생하는 이벤트로, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved 등이 있다.

element.addEventListener(
  'DOMNodeInserted',
  (event) => {
    console.log('새로운 요소를 감지했습니다.', event.srcElement);
  },
  false
);

element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

이 이벤트를 사용하면 DOM 변경을 추적할 수 있으나, 설계상 결함과 치명적인 성능 문제를 이유로 2011년에 표준에서 퇴출되었다.

2012년에 더 안정적인 MutationObserver가 등장하여 현재 대부분의 브라우저에서 이 이벤트 사용 시 콘솔에 경고를 노출한다. 아직 MutationEvent를 사용한다면 MutationObserver로 전환할 것을 적극 권장한다.

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('새로운 요소를 감지했습니다.', ...mutation.addedNodes);
    }
  }
});

observer.observe(element, { childList: true });
element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

Chrome 115부터는 Mutation 이벤트 사용 시 좀 더 강력한 경고를 노출하며, 2024년 7월 말 배포 예정인 Chrome 127에서는 해당 API를 제거할 예정이다.

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

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

참조

• Feature: Mutation Events (Deprecated)
• UI Events
• MutationEvent
• MutationObserver

⚠️ unload 이벤트 지원 중단 📌

unload 이벤트는 해당 문서를 떠나거나 하위 리소스를 메모리에서 해제할 때 발생하는 이벤트이다. 이 이벤트를 이용하면 사용자가 페이지를 종료하기 전에 특정 동작을 실행할 수 있다.

window.addEventListener('unload', (event) => {
  navigator.sendBeacon('/api/log', 'unload!');
});

하지만 unload 이벤트는 beforeunload 이벤트와 달리 기본 동작을 취소(event.preventDefault())할 수 없어 이벤트가 아예 발생하지 않기도 한다. W3C의 통계에 따르면 unload 이벤트가 제대로 발생하는 경우가 Chrome 데스크탑에서는 95%, 모바일에서는 57% ~ 68% 정도로, 이는 모바일 환경의 특성상 브라우저가 아닌 다른 앱을 보다가 브라우저 자체를 종료하는 경우가 빈번하기 때문이다.

Chrome은 점진적으로 unload 이벤트를 제거한다는 계획으로, 먼저 Permission-Policy를 추가하고, 기본값을 deny로 바꾸며, 결과적으로는 unload 이벤트 자체를 제거할 계획이다. Chrome 117에서 unload 이벤트의 허용 여부를 결정하는 Permission-Policy의 미리 보기를 추가했으니 참고하자.

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

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

참조

• Feature: Deprecate unload event
• [draft] add unload permissions-policy feature
• Window: unload event

⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단

CSS의 사용자 지정 상태 문법은 사용자가 직접 요소의 상태를 지정해 가상 선택자 등으로 사용할 수 있는 기능으로, 현재 초안 상태다.

class MyCustomElement extends HTMLElement {
  set checked(flag) {
    if (flag) {
      this._internals.states.add('--foo');
    } else {
      this._internals.states.delete('--foo');
    }

    console.log(this._internals.states.has('--foo'));
  }
}

.custom:--foo {
  color: red;
}

기존에는 예시처럼 --foo와 같은 문법을 사용했으나, 이 문법이 현재 제안 중인 @custom-selectors 문법과 겹쳐 :state(foo)로 문법을 변경하였다.

.custom:state(foo) {
  color: red;
}

현재 Chrome 90에서 구현한 구형 문법을 사용하는 사이트는 약 0.03%로 Chrome 팀은 먼저 구형 문법을 지원 중단하기 위한 일정을 논의 중이다.

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

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

참조

• Feature: Deprecate old CSS custom state syntax
• [selectors] Custom state pseudo class proposal
• CustomStateSet
• CSS Extensions - Custom Selectors

⚠️ 제3자 쿠키 지원 중단 📌

제3자 쿠키(Third-Party Cookies)는 현재 도메인과 다른 도메인에서 발행한 쿠키를 말한다. 제3자 쿠키를 활용하면 사용자의 취향, 활동 정보 등을 파악할 수 있어 광고 마케팅 분야에서 자주 사용했으나, 원하지 않는 개인정보까지 유출될 수 있다는 큰 단점이 있다.

크롬은 이미 관련 법 준수를 위해 2020년 1월부터 제3자 쿠키의 중단을 예고했다. 그동안 영향이 큰 점을 고려해 지원 중단을 계속 미뤄왔으나, 2024년부터는 점진적으로 제3자 쿠키를 지원 중단할 예정이다.

구글이 대안으로 사용자의 개인정보는 보호하되, 기존의 제3자 쿠키가 하던 역할을 대체할 수 있는 Privacy Sandbox를 개발 중이니 참고하자.

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

• Firefox: 배포 완료
• Safari: 배포 완료
• 웹 개발자: 복합적

참조

• Feature: Deprecate Third-Party Cookies
• The Privacy Sandbox

✅ 내부망에 대한 하위 리소스 요청 규칙 적용

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

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

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

Chrome 86 이상에서 실험적 웹 기능을 활성화해 접근 제한을 미리 체험할 수 있다.

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

내부망에 하위 리소스 요청 시 사전 요청을 보내 연결 허용 여부를 먼저 묻는다. 현재는 사전 요청 실패 시 개발자 콘솔에 경고만 노출한다.

참조

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