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

들어가며

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

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

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

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

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

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

목차

1. Chrome 114

   • ✅ CSS 단락 균형
   • ✅ Scrollend 이벤트
   • ✅ Popover API
   • ✅ CSS zoom 속성 지원 중단 미리 보기 📌
   • 🗓️ 배포일

2. Chrome 115

   • ⚠️ document.domain 설정자(Setter) 지원 중단 📌
   • ✅ WebAssembly.Module() 파일 크기 제한 증가
   • ✅ CSS Motion Path
   • ✅ display, content-visibility의 애니메이션 사용 지원
   • ✅ CSS 불연속 속성의 Transition 지원
   • ✅ CSS 스크롤 애니메이션
   • 🗓️ 배포 예정일

3. Chrome NEXT

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

1. Chrome 114

✅ CSS 단락 균형

CSS Level 4에서 추가된 text-wrap과 white-space-collapse 속성을 추가한다. 이 둘은 white-space 속성을 나눈 것으로, white-space 속성은 이 둘의 축약 속성이 된다. white-space-collapse는 기존의 white-space처럼 빈 공간 활용을 정의하며, text-wrap은 공간에 글자를 어떻게 배치할지를 정의한다.

그중에서도 text-wrap: balance 기존에 없던 배치 알고리즘이다. text-wrap: balance를 적용하면 브라우저가 해당 언어, 국가를 고려해 가장 균형 잡힌 형태로 줄바꿈을 맞춰 준다.

(출처: CSS text-wrap: balance)

text-wrap: wrap을 적용했을 때와 비교해 단락의 총 줄 개수는 변하지 않는다. 이는 특히 글의 제목을 표현할 때 유용할 수 있어 Chrome 팀은 다음과 같이 적용하길 권장한다.

h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
  text-wrap: balance;
}

하지만 * 선택자를 사용해 모든 요소에 text-wrap: balance를 적용하는 방법은 추천하지 않는다. text-wrap: balance 속성은 각 요소마다 브라우저에 별도의 계산 요청을 보내기에 아직 성능 문제가 있을 수 있다.

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

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

참조

• CSS headline balancing
• CSS text-wrap: balance
• CSS Text Module Level 4

✅ Scrollend 이벤트

Document, VisualViewport, 그리고 각 HTML 요소에 scrollend 이벤트를 추가한다.

scrollend 이벤트는 실제로 브라우저가 스크롤을 마쳤을 때 발생한다.

기존에는 스크롤이 끝났는지 정확하게 판단할 수 있는 방법이 없었다. scroll 이벤트와 setTimeout()을 사용해 아래처럼 스크롤이 끝났는지를 추측할 뿐이었다.

const onDocumentScrollend = (onScrollend) => {
  let timer = null;
  const handler = () => {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      onScrollend();
    }, 100);
  };

  document.addEventListener('scroll', handler);
};

onDocumentScrollend(() => {
  console.log('scroll ends!');
});

위 방법은 대부분의 경우 잘 동작한다. 하지만 이벤트가 최소 100ms 늦게 발생한다는 점과, 사용자가 스크롤 도중 100ms 이상 멈춘다면 제대로 동작하지 않는 등 정확하다고 보기 어렵다.

scrollend 이벤트를 사용하면 브라우저에서 스크롤이 끝난 시점을 알려주므로 더 확실하게 기능을 구현할 수 있다. Firefox 최신 버전에는 이미 기능이 적용되었으니 한 번 확인해 보자.

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

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

참조

• Scrollend Event
• Events - Scrolling
• Element: scrollend event

✅ 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 115에 배포될 예정이니 참고하자.

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

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

참조

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

✅ CSS zoom 속성 지원 중단 미리 보기 📌

비표준 CSS 속성인 zoom의 지원 중단 미리 보기가 추가될 예정이다.

zoom은 요소 크기 배율을 지정하는 CSS 속성이다. transform: scale()과 유사하나, zoom은 실제 레이아웃에 영향을 미치며, 애니메이션을 지원하지 않는다는 점이 다르다.

정식 지원 중단은 오는 9월에 배포 예정인 Chrome 117로 논의 중이다. 아직 zoom을 사용하는 페이지가 있다면 표준 속성인 transform으로의 전환을 고려해야 한다. 현재 이 속성을 사용하는 페이지는 전체 페이지의 약 0.5% 정도라고 한다.

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

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

참고

• Remove zoom CSS property
• zoom
• scale()

🗓️ 배포일

Chrome 114는 2023년 5월 24일에 정식 배포되었다.

2. Chrome 115

⚠️ 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: 의견 없음
• 웹 개발자: 의견 없음

참조

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

✅ WebAssembly.Module() 파일 크기 제한 증가

new WebAssembly.Module(bytes)는 Web Assembly 바이트 코드를 모듈로 파싱한다.

fetch('example.wasm')
  .then((response) => response.arrayBuffer())
  .then((bytes) => {
    const m = new WebAssembly.Module(bytes);

    WebAssembly.instantiate(m, importObject).then((result) => result.exports.exported_func());
  });

이 동작은 동기로 이루어진다. 모듈의 크기가 너무 크면 메인 스레드를 너무 오래 점유할 수 있어 기존에는 WebAssembly.Module()로 파싱할 수 있는 모듈의 크기를 4KB로 제한했다.

Chrome 115부터는 이 제한을 8MB로 늘릴 예정이다. 현재 가장 성능이 낮은 기기(Google Pixel 1)에서 8MB 모듈을 파싱했을 때 큰 무리가 없었다고 한다.

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

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

참조

• 8MB Limit for WebAssembly.Module() on the Main Thread
• WebAssembly.Module() constructor

✅ CSS Motion Path

CSS에 offset-path 속성에 사용할 수 있는 함수를 추가한다. offset-path는 offset의 하위 속성으로, 해당 요소가 움직일 경로를 지정하는 속성이다.

(출처: Motion Path Module Level 1)

기존에는 path()로 사용하는 경우가 대부분이었으나, 업데이트 이후에는 각도로 경로를 지정하는 ray(), 원을 그리는 circle(), polygon() 등 다양한 함수를 지원할 예정이다.

(출처: Motion Path Module Level 1)

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

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

참조

• CSS Motion Path
• Motion Path Module Level 1
• offset

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

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

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

참조

• 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 115부터는 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: 의견 없음
• 웹 개발자: 의견 없음

참조

• Transitions on specified discrete properties
• Make discrete properties transition at 50%; exclude them from 'all'. #4441

✅ CSS 스크롤 애니메이션

현재 CSS 애니메이션은 모두 document.timeline으로 접근 가능한 DocumentTimeline을 애니메이션 시간값으로 사용한다. DocumentTimeline은 문서를 연 후 지난 밀리초 단위의 시간값으로, 현재 CSS 애니메이션이 모두 경과 시간을 기반으로 동작한다는 의미이기도 하다.

Chrome 115에서 정식 반영 예정인 ScrollTimeline, ViewTimeline은 요소의 스크롤 위치값을 애니메이션의 시간값으로 사용한다.

기존에는 위와 같은 예제를 구현하기 위해 스크립트가 필수였으나, 새롭게 추가되는 animation-timeline 속성과 scroll() 함수를 사용하면 CSS만으로도 위와 같은 기능을 구현할 수 있다.

@keyframes animate-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  position: fixed;
  transform-origin: left center;
  width: 100%;
  height: 48px;
  background-color: coral;
  animation: animate-progress auto linear;
  animation-timeline: scroll(root vertical);
}

scroll() 함수에는 스크롤 요소를 지정하는 <scroller>와 방향을 지정하는 <axis> 두 가지 속성을 넘길 수 있다. 인자를 생략하면 <scroller>는 가장 가까운 스크롤 요소를 찾는 nearest, <axis>는 block을 기본값으로 지정한다.

또 다른 ViewTimeline은 animation-timeline에 view() 함수를 사용해 지정해 사용할 수 있다. ScrollTimeline이 스크롤 진행도를 시간값으로 사용한다면, ViewTimeline은 해당 요소가 스크롤에 따라 화면에 보이는 정도를 시간값으로 사용한다.

(출처: Animate elements on scroll with Scroll-driven animations)

위 예시에서 요소가 화면 아래에 있다면 애니메이션의 진행도는 0%, 요소가 완전히 화면 위에 있다면 100%가 된다. view()에는 scroll()과 마찬가지로 방향을 지정하는 <axis>와, 진행도 계산에 사용할 요소의 경계를 설정하는 <view-timeline-inset>을 넘길 수 있다.

.foo {
  animation-timeline: view(block 12px);
}

이 기능은 아직 비표준으로 사용법이나 이름 등이 바뀔 수 있음에 주의하자.

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

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

참조

• Scroll-driven animations
• Scroll-driven Animations
• Scroll-driven Animations Demo
• scroll-timeline
• Animate elements on scroll with Scroll-driven animations

🗓️ 배포 예정일

Chrome 115는 2023년 7월 12일에 정식 배포 예정이다. 5월 31일부터 6월 8일 사이에 크롬 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

3. Chrome NEXT

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

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

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

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

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

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

참조

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

⚠️ [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: 의견 없음
• 웹 개발자: 의견 없음

참조

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

⚠️ [Chrome 119] WebSQL 지원 중단

WebSQL은 과거 브라우저에 데이터를 저장하기 위해 제안된 API로, Webkit 기반의 일부 브라우저에서만 사용이 가능했다. 하지만 이 프로젝트는 보안 구현 등의 어려움으로 1년 만에 폐기되었고, Webkit도 2019년에 이 API를 지원 중단했다.

이미 대부분의 브라우저에서 [Web Storage API], IndexedDB API 같은 최신 저장소 API를 사용할 수 있어 이 API를 지원 중단한다. 이미 Chrome 97에서 제3자 컨텍스트에서 WebSQL을 제거했으며, Chrome 105에서는 보안 연결을 사용하지 않는 페이지에서의 사용을 지원 중단했다.

웹에서 SQL을 계속 사용하려면 웹 어셈블리를 이용한 SQLite가 공식 대안이므로 참고하자.

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

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

참조

• Deprecate and Remove WebSQL
• Web SQL Database
• sqlite3 WebAssembly & JavaScript Documentation Index

⚠️ [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>

정식 지원 중단은 내년 7월에 배포 예정인 Chrome 127로 예정 중이나, 일정에 변동이 있을 수 있으니 참고하자.

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

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

참조

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

⚠️ [Chrome ???] unload 이벤트 지원 중단

unload 이벤트는 해당 문서 또는 자식 문서를 해제할 때 발생하는 이벤트이다. 이 이벤트를 이용하면 사용자가 페이지를 종료하기 전에 특정 동작을 실행할 수 있다.

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

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

이 항목은 제안 중으로 적용 여부는 확실하지 않으나, 기존에 unload 이벤트에 의존하는 코드가 있다면 관심을 가지고 지켜볼 필요가 있다.

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

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

참조

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

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

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

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

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

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

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

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

참조

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