Chrome 83의 새로운 기능

Pete LePage

Chrome 83이 안정화 버전으로 출시되기 시작했습니다.

다음 사항에 유의하시기 바랍니다.

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 83에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

신뢰할 수 있는 유형

DOM 기반 교차 사이트 스크립팅은 웹에서 가장 일반적인 보안 취약점 중 하나입니다. 실수로 페이지에 도입할 수 있습니다. 신뢰할 수 있는 유형은 데이터를 위험할 수 있는 함수에 전달하기 전에 데이터를 처리해야 하므로 이러한 유형의 취약점을 방지하는 데 도움이 됩니다.

innerHTML를 예로 들면 신뢰할 수 있는 유형이 사용 설정된 경우 문자열을 전달하려고 하면 브라우저가 문자열을 신뢰할 수 있는지 알 수 없으므로 TypeError와 함께 실패합니다.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

대신 textContent와 같은 안전한 함수를 사용하거나 신뢰할 수 있는 유형을 전달하거나 요소를 만들고 appendChild()를 사용해야 합니다.

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

신뢰할 수 있는 유형을 사용 설정하기 전에 report-only CSP 헤더를 사용하여 위반사항을 식별하고 수정해야 합니다.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

그런 다음 모든 단추를 한 다음 제대로 켤 수 있습니다. 자세한 내용은 web.dev에서 신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지를 참조하세요.

양식 컨트롤 업데이트

HTML 양식 컨트롤은 매일 사용하며 웹의 상호작용에 중요한 역할을 합니다. 사용하기 쉽고 접근성이 기본 제공되며 사용자에게 익숙합니다. 양식 컨트롤의 스타일은 브라우저와 운영체제에서 일관되지 않을 수 있습니다. 또한 기기에서 일관된 모양을 제공하기 위해 여러 CSS 규칙을 제공해야 하는 경우가 많습니다.

이전에는 양식 컨트롤의 기본 스타일을 지정했습니다.
양식 컨트롤의 스타일이 업데이트되었습니다.

Microsoft에서 양식 컨트롤의 모양을 현대화하기 위해 노력한 점이 매우 인상적이었습니다. 더 나은 시각적 스타일 외에도 향상된 터치 지원과 키보드 지원을 비롯한 향상된 접근성을 제공합니다.

새로운 양식 컨트롤은 이미 Microsoft Edge에 출시되었으며 이제 Chrome 83에서도 사용할 수 있습니다. 자세한 내용은 Chromium 블로그의 양식 컨트롤 및 포커스 업데이트를 참고하세요.

오리진 트라이얼

measureMemory()로 메모리 측정

Chrome 83에서 오리진 트라이얼을 시작하는 performance.measureMemory()는 페이지의 메모리 사용량을 측정하고 메모리 누수를 감지할 수 있는 새로운 API입니다.

메모리 누수는 쉽게 발생할 수 있습니다.

  • 이벤트 리스너 등록 취소를 잊어버림
  • iframe에서 개체 캡처
  • 작업자 닫지 않음
  • 배열에서 객체 누적
  • 자연어 이해 플랫폼입니다

메모리 누수가 발생하면 페이지가 느려지고 사용자에게 부풀려져 보일 수 있습니다.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

새 API에 관한 자세한 내용은 web.dev의 measureMemory()로 웹페이지의 총 메모리 사용량 모니터링을 참고하세요.

Native File System API 업데이트

Native File System API는 쓰기 가능한 스트림 지원 및 파일 핸들을 저장하는 기능을 갖춘 새로운 오리진 트라이얼을 Chrome 83에서 시작했습니다.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

쓰기 가능한 스트림을 사용하면 파일에 훨씬 쉽게 쓸 수 있으며 스트림이므로 한 스트림에서 다른 스트림으로 응답을 쉽게 파이핑할 수 있습니다.

파일 핸들을 IndexedDB에 저장하면 상태를 저장하거나 사용자가 작업 중인 파일을 기억할 수 있습니다. 예를 들어 최근에 수정한 파일 목록을 유지하거나 사용자가 작업한 마지막 파일을 열 수 있습니다.

이 기능을 사용하려면 새 출처 체험판 토큰이 필요합니다. web.dev에서 업데이트된 네이티브 파일 시스템 API: 로컬 파일에 대한 액세스 간소화 도움말을 참고하여 모든 세부정보와 새 출처 체험판 토큰을 받는 방법을 확인하세요.

기타 출처 무료 체험판

오리진 트라이얼의 전체 기능 목록을 확인하세요.

새로운 교차 출처 정책

일부 웹 API는 Spectre와 같은 측면 채널 공격의 위험을 증가시킵니다. 이러한 위험을 완화하기 위해 브라우저는 교차 출처 격리라는 선택 기반 격리 환경을 제공합니다. 교차 출처 격리 상태는 document.domain의 수정도 방지합니다. document.domain를 변경할 수 있으면 동일 사이트 문서 간의 통신이 가능해지며 이는 동일 출처 정책의 허점으로 간주되었습니다.

자세한 내용은 에이지님의 COOP 및 COEP를 사용하여 웹사이트 '교차 출처 격리'하기 게시물을 참고하세요.

웹 속성

사용자 환경 품질을 측정하는 방법에는 여러 가지가 있습니다. 사용자 환경의 일부 측면은 사이트 및 컨텍스트와 관련이 있기도 하지만, 모든 웹 환경에 중요한 공통적인 신호 집합인 '핵심 성능 보고서'가 있습니다. 이러한 핵심 사용자 환경 요구사항에는 페이지 콘텐츠의 로드 환경, 상호작용, 시각적 안정성이 포함되며, 이 요소들이 합쳐져 2020년 Core Web Vitals의 기반이 됩니다.

  • 최대 콘텐츠 페인트는 인지된 로드 속도를 측정하고 페이지의 주요 콘텐츠가 로드되었을 가능성이 있는 페이지 로드 타임라인의 지점을 표시합니다.
  • 최초 입력 지연은 응답성을 측정하고 사용자가 페이지와 처음 상호작용할 때 느끼는 경험을 수치화합니다.
  • 누적 레이아웃 변경은 시각적 안정성을 측정하고 표시되는 페이지 콘텐츠의 예기치 않은 레이아웃 변경량을 수치화합니다.

이러한 모든 측정항목은 중요한 사용자 중심 결과를 포착하고, 현장에서 측정할 수 있으며, 실험실 진단 측정항목 등가 항목과 도구를 지원합니다. 예를 들어 최대 콘텐츠 페인트는 최상위 로드 측정항목이지만, 콘텐츠가 포함된 첫 페인트 (FCP) 및 첫 바이트까지의 시간 (TTFB)에 크게 의존하며, 이는 모니터링 및 개선에 계속해서 중요합니다.

자세한 내용은 Chromium 블로그의 웹 바이탈 소개: 원활한 사이트 운영을 위한 필수 측정항목을 참고하세요.

기타

  • Chrome은 이제 바코드를 감지하고 디코딩하는 기능을 제공하는 Barcode Detection API를 지원합니다.
  • 새로운 CSS @supports 함수는 CSS 선택자에 대한 기능 감지를 제공합니다.
  • 새로운 ARIA 주석은 의미론적 의미가 있는 댓글, 제안, 텍스트 강조 표시의 스크린 리더 접근성을 지원합니다 (<mark>와 유사).
  • prefers-color-scheme 미디어 쿼리를 사용하면 작성자가 자체 어두운 테마를 지원하여 빌드하는 환경을 완전히 제어할 수 있습니다.
  • 이제 JavaScript에서 공유 작업자의 모듈을 지원합니다.

앞으로의 내용이 궁금하신가요? Fugu API 추적기를 확인해 보세요.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 83의 추가 변경사항은 아래 링크를 확인하세요.

구독

최신 동영상을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 피트 르페이지입니다. 머리를 자르고 싶지만 Chrome 84가 출시되는 대로 바로 이 자리에서 Chrome의 새로운 기능을 알려드리겠습니다.