TOAST UI

Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts

월간 크롬 이슈 리포트 2022년 7월호

들어가며

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

💡M은 Milestone을 의미하며, M103은 103버전을 의미한다.

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

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

목차

  1. M103

    • Web Share 파일 확장자에 .avif 추가
    • SerialPort forget()

  2. M104

    • U2F 보안 키 API 제거
    • 📌 쿠키의 Expires/Max-Age 속성 상한
    • 전체 화면 기능 위임
    • 멀티 스크린 윈도우 배치: 전체 화면 도우미 윈도우
    • 📌 setTimeout(..., 0) timeout 고정 제거
    • 레거시 Client Hint 모드 제거
    • 웹 번들로 하위 리소스 로드
    • 비동기 Clipboard API용 웹 커스텀 포맷
    • WebGL 캔버스 색상 관리

  3. M105 (dev)

    • 비보안 컨텍스트에서의 WebSQL 지원 중단 및 제거
    • onbeforeinput 전역 이벤트 핸들러 속성 추가
    • 대체된 요소에 대한 CSS overflow
    • 📌 커스텀 식별자에서 CSS default 키워드 사용 제한(제거)
    • 스트리밍 업로드 fetch()
    • navigateEvent.scroll()
    • 제스처 스크롤 DOM 이벤트 제거

  4. Origin Trial

    • 안전한 결제 확인(SPC) - 옵트아웃(opt-out) 지원

  5. 지원 중단 및 제거 예정

    • 📌 document.domain setter 지원 중단
    • 컨텍스트 보안을 위한 공개 웹 사이트의 하위 리소스에 대한 "사설 네트워크 요청" 제한
    • navigateEvent.restoreScroll() 제거
    • navigateEvent.transitionWhile() 제거
    • Event.path 지원 중단
    • "canmakepayment" 이벤트에서의 판매자 식별자 지원 중단

버전별 이슈 리스트

1. M103

Web Share 파일 확장자에 .avif 추가

이슈

웹사이트는 사용자가 소셜 미디어, 이메일, 채팅 등을 통해 사진 및 기타 파일들을 공유할 수 있기를 원할 수 있다. Web Share API는 이미 크롬 OS 및 Windows 같은 많은 플랫폼에 제공되지만 .avif는 아직 지원되지 않는다.

.avif는 JPEG보다 더 나은 압축 효율과 디테일 보존을을 보여준다. Web Share에 .avif를 추가하면 .avif의 사용 확산에 도움이 될 것이다.

표준화

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

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

References

SerialPort forget()

이슈

일부 사이트는 Serial Port에 접근할 수 있는 장기적인 권한을 유지하는 데 관심이 없을 수 있다. 예를 들어, 공용 컴퓨터에 탑재된 교육용 웹 애플리케이션을 여러 장치에서 공유할 때를 생각해보자. 사용자에 의해 생성된 권한이 많아질수록 사용자 경험이 나빠진다.

웹 플랫폼에 최근 추가된 HIDDevice 및 USBDevice forget()에 이은 SerialPort forget() 메서드를 사용하면 웹 개발자는 사용자가 부여한 SerialPort에 대한 권한을 자발적으로 취소할 수 있다.

다음과 같이 사용한다.

// Serial port 요청
const port = await navigator.serial.requestPort();

// 이후에 serial port에 대한 권한 취소
await port.forget();

표준화

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

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

References

2. M104

U2F 보안 키 API 제거

이슈

U2F는 크롬의 보안 키 API이다. 이를 통해 사이트는 USB 보안 키에 공개 키 자격 증명을 등록하고 이중 인증 절차 시스템을 구축할 수 있다. U2F는 웹 표준이 되지 않았으며 WebAuthn(M67)에 포함되었다. U2F 및 Cryptotoken은 명백히 유지관리 모드에 있으며 2년 전부터 사이트를 WebAuthn으로 마이그레이션하도록 권장해왔다.

표준화

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

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

References

📌 쿠키의 Expires/Max-Age 속성 상한

이슈

이제 쿠키가 명시적인 Expires/Max-Age 속성으로 설정되면 향후 400일 이내로 제한된다. 이전에는 이 제한이 없었고 수천년 이후에나 만료될 수 있었다.

rfc6265bix 초안대로 이제 쿠키의 Expires/Max-Age 속성에 대한 상한이 포함된다. RECOMMENDED 제한은 기간이 400일이지만 사용자 에이전트는 제한을 더 작게 조정할 수 있다. 제한보다 큰 속성은 제한까지 줄여야한다.

크롬의 측정에 따르면 모든 쿠키 셋 중 약 20%가 향후 400일 이상의 Expires/Max-Age를 갖는다. 그 20% 중 절반은 2년을 목표로 하고, 1/4은 10년 이상을 목표로 하고 나머지는 그 이상의 범위에 분산되어 있다.

표준화

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

References

전체 화면 기능 위임

이슈

전체 화면 기능 위임을 통해 윈도우는 발신자 윈도우에서 일시적인 사용자 활성화를 포기한 후 신뢰하는 다른 윈도우로 requestFullscreen()를 호출하는 기능을 전송할 수 있다.

M100에 배포된 일반 위임 메커니즘을 기반으로 한다.

표준화

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

References

멀티 스크린 윈도우 배치: 전체 화면 도우미 윈도우

이슈

전체 화면 도우미 윈도우를 사용하면 사이트에서 단일 사용자 활성화에서 전체 화면 콘텐츠와 팝업 윈도우를 별도의 화면에 배치할 수 있다.

기존 다중 화면 윈도우 배치에 대한 약간의 개선 사항이다.

데모

표준화

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

References

📌 setTimeout(..., 0) timeout 고정 제거

이슈

이전의 setTimeout(..., 0) 호출은 가능한 한 빨리 콜백을 실행하는 대신 1ms의 timeout으로 고정되었다. 이 timeout 고정이 제거되었으며, 이전의 동작을 하려면 setTimeout(..., 1)을 사용해야 한다.

표준화

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

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

References

레거시 Client Hint 모드 제거

이슈

4가지 레거시 Client Hint(dpr, width, viewport-width, device-memory)는 기본 allowlist가 self이지만 안드로이드에서는 *인 것처럼 동작한다. 기본 allowlist가 *인 것은 Client Hint Infrastructure 표준에 맞지 않는다. 이 문제를 수정하면 이런 Hint의 명시적 위임을 요구하여 안드로이드에서의 개인정보를 보호할 수 있다.

표준화

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

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

References

웹 번들로 하위 리소스 로드

이슈

웹 번들같은 여러 리소스를 번들로 묶을 수 있는 형식을 사용한다. 이를 통해 많은 리소스를 효율적으로 로드하는 새로운 접근 방식을 제공한다.

webpack 같은 자바스크립트 번들러의 결과물은 HTTP 캐시와 잘 상호작용하지 않는다. 좋은 도구지만 최적의 방식으로 동작하도록 구성하기 힘들고 동적 번들링 같은 새로운 요구사항과도 호환되지 않는다.(예: 트리 셰이킹을 이용한 작은 편집은 캐시를 전부 무효화할 수 있다)

자바스크립트 번들러를 사용하면 전체 바이트를 받을 때까지 실행을 기다려야한다. 이상적으로 여러 하위 리소스를 로드하는 것은 전체 스트리밍 및 병렬화를 활용할 수 있어야 하지만 모든 리소스가 하나의 자바스크립트로 번들링되는 경우에는 불가능하다.

표준화

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

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

References

비동기 Clipboard API용 웹 커스텀 포맷

이슈

웹 커스텀 포맷을 사용한다면 웹사이트에서 표준 웹 커스텀 포맷을 사용하여 정제되지 않은 임의의 페이로드를 읽고 쓸 수 있을 뿐만 아니라 OS별 포맷(레거시 앱 지원용)의 제한된 하위 집합을 읽고 쓸 수 있다.

클립보드 형식의 이름은 콘텐츠가 웹에서 가져온 것임을 나타내기 위해 표준 방식으로 브라우저에 의해 조작된다. 이를 통해 네이티브 애플리케이션이 정제되지 않은 콘텐츠를 수락하도록 선택할 수 있다.

데모

표준화

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

References

WebGL 캔버스 색상 관리

이슈

WebGL 색상 관리 API를 구현한다.

WebGL은 다음 사양을 허용한다.

  • 드로잉 버퍼가 있는 색상 공간
  • 텍스처로 가져올 때 콘텐츠가 변환되어야하는 색상 공간

이전에는 둘 다 sRGB가 기본으로 설정되었으나 이제 display-p3도 사용 가능하다.

데모

표준화

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

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

References

3. M105 (dev)

비보안 컨텍스트에서의 WebSQL 지원 중단 및 제거

이슈

Web SQL Database 표준은 2009년 4월에 처음 제안되어 2010년 11월에 폐기되었다. Gecko는 이 기능을 구현하지 않았고 Webkit은 2019년에 이 기능을 더 이상 지원하지 않는다. W3C는 웹 데이터베이스가 필요하면 Web Storage 또는 Indexed Database를 채택하라고 권장한다.

표준화

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

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

References

onbeforeinput 전역 이벤트 핸들러 속성 추가

이슈

beforeinput 이벤트는 <input>, <textarea> 또는 contenteditable 요소의 값이 수정되려고 할 때 발생한다. 개발자가 더 쉽게 사용할 수 있도록 onbeforeinput 전역 콘텐츠 속성을 추가한다.

표준화

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

References

대체된 요소에 대한 CSS overflow

이슈

이 변경을 통해 기존 overflow 속성을 콘텐츠 상자 외부에 그리는 대체 요소와 함께 사용할 수 있다. object-view-box와 함께 사용하면 CSS shadow같은 적절한 ink-overflow 동작으로 커스텀 glow 또는 shadow가 적용된 이미지를 만들 수 있다.

표준화

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

References

📌 커스텀 식별자에서 CSS default 키워드 사용 제한(제거)

이슈

CSS에서 CSS 프로퍼티로 허용하는 값으로 사용하는(또는 앞으로 사용할 가능성이 있는) 키워드는 커스텀 식별자에서 허용되어서는 안된다. 많은 커스텀 식별자가 CSS 프로퍼티의 값이기도 하기 때문이다.

커스텀 식별자일 수 있는 경우, 이런 키워드를 모든 CSS 프로퍼티 또는 이미 커스텀 식별자를 허용하는 특정 CSS 속성에 속성 값으로 추가하여 손상될 콘텐츠를 만들 수 있다.

표준화

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

References

스트리밍 업로드 fetch()

이슈

전통적으로 바이트 배열 업로드는 WebSocket에서 구현되었지만 클라이언트/서버 코드가 지저분해졌다. 스트리밍 업로드 fetch()를 사용하면 더 간단해진다.

스트리밍 업로드 fetch를 사용하면 웹 개발자가 ReadableStream body를 가져올 수 있다. Fetch는 요청 및 응답 객체(및 네트워크 요청과 관련된 기타 항목)에 대한 일반 정의를 제공한다.

표준화

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

References

이슈

scroll()은 탐색이 순회가 아닐 때 호출될 수 있다는 점을 제외하고 기존 restoreScroll()과 매우 비슷하게 동작한다. 또한 수동 스크롤 모드가 아닐 때도 수동으로 스크롤을 수행할 수 있다.

처음 restoreScroll()을 설계할 때(이름에서 알 수 있듯이) 순회 동안 스크롤 위치를 복원하는 것으로 생각했다. 그러나 웹 개발자는 비순회 동일 문서 탐색 중에 스크롤 타이밍을 정확히 제어하기를 원할 수 있다.

표준화

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

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

References

제스처 스크롤 DOM 이벤트 제거

이슈

크롬 플러그인에서 사용하기 위해 추가된 'gesturescrollstart', 'gesturescrollupdate', 'gesturescrollend' 3가지 제스처 스크롤 DOM 이벤트는 표준이 아니다. 현재 이 API들은 전혀 동작하지 않는다.

표준화

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

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

References

4. Origin Trial

안전한 결제 확인(SPC) - 옵트아웃(opt-out) 지원

이슈

특정 지역 및 상황에서 안전한 결제 확인과 상호작용하는 개발자는 옵트아웃 경험을 제공해야할 수 있다. 여기서 사용자는 개발자 서버에서 자신의 정보를 제거하기를 원한다고 나타낼 수 있다.

전통적으로 옵트아웃 경험에 대한 접근은 신뢰 당사자의 웹사이트에 직접 포함된다. 그러나 SPC의 경우에는 신뢰 당사자가 웹 콘텐츠 흐름의 일부가 아닐 수 있다. 인증이 타사 웹사이트(예: 판매자 사이트)에서 시작될 수 있기 때문이다.

옵트아웃 흐름에 대한 이런 요구사항을 지원하기 위해 SPC 브라우저 UX에서 옵트아웃에 대한 직접 지원을 실험하고 있다.

데모

표준화

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

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

References

5. 지원 중단 및 제거 예정

📌 document.domain setter 지원 중단

이슈

document.domain setter를 사용하면 개발자가 동일 출처 정책을 완화하여 크롬에서 관리하는 기본적인 보안 경계를 복잡하게 만든다. 또한 크롬의 프로세스 모델에 대한 post-Spectre 도입을 방해한다. Origin-keyed agent clusters를 통해 옵트인 해야하며 지원을 중단한다. setter는 남지만 출처가 변경되지 않는다.

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

다른 출처 간의 비동기 메시지를 보내기 위해서는 document.domain 대신 window.postMessage를 사용하기를 권장한다. M106에 적용 예정이었으나 적용이 연기되어 M109(23년 1/10 배포 예정)에 적용될 예정이다.

데모

표준화

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

References

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

이슈

공개 웹 사이트의 하위 리소스에 대한 사설 네트워크 요청은 보안 컨텍스트에서만 시작할 수 있어야 한다. 예를 들어 인터넷에서 인트라넷으로의 요청, 인터넷에서 루프백으로의 요청이 있다. 현재(M103) Origin Trial 중에 있으며, M113(23년 5/2 배포 예정)에 적용될 예정이다.

표준화

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

References

이슈

restoreScroll()은 navigationEvent.scroll()로 대체된다. scroll()은 개발자가 순회가 아닌 탐색에 대한 스크롤 타이밍을 제어할 수 있다는 점을 제외하면 동일하게 동작한다.

M108(11/29 배포 예정)에 적용될 예정이다.

표준화

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

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

References

이슈

navigateEvent.transitionWhile()은 탐색을 가로채서 동일한 문서의 탐색으로 변환한 다음, 제공된 프라미스를 사용하여 새로운 탐색이 완료되는 동안 브라우저와 웹 애플리케이션의 다른 부분에 전환 단계에 있다는 신호를 보낸다.

설계 결함이 보고되어 navigateEvent.transitionWhile()이 navigationEvent.intercept()로 대체된다. transitionWhile()의 동일한 기본 기능에 대해 보다 유용한 API를 제공하기 위해 intercept()가 도입되었다.

M108(11/29 배포 예정)에 적용될 예정이다.

표준화

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

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

References

Event.path 지원 중단

이슈

Event.path는 리스너가 호출될 객체의 배열인 이벤트의 경로를 반환하는 비표준 API이다. 크롬에서만 지원되므로 웹 호환성 문제가 발생한다. 웹 개발자는 동일한 결과를 반환하는 표준 API인 Event.composedPath()로 변경해야한다.

M109(23년 1/10 배포 예정)에 적용될 예정이다.

표준화

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

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

References

"canmakepayment" 이벤트에서의 판매자 식별자 지원 중단

이슈

"canmakepayment" 서비스 워커 이벤트는 사용자가 설치된 결제 앱에 등록된 카드가 있는지 여부를 판매자에게 알려준다. 판매자의 출처와 임의의 데이터를 결제 앱 출처에서 서비스 워커에게 조용히 전달한다.

사용자의 개인 정보를 개선하기 위해 "canmakepayment" 서비스 워커 이벤트에서 판매자의 출처 및 임의의 데이터를 제거해야한다.

M114(23년 5/30 배포 예정)에 적용될 예정이다.

표준화

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

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

References

#browser
#toastui
임재언2022.07.26
Back to list
Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts
© NHN Cloud Corp.