Chrome 83의 새로운 기능

피트 레페이지

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

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

저는 Pete LePage입니다. 재택근무를 하면서 재택근무를 하고 있습니다. 이제 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에서 업데이트된 문서인 Native File System API: 로컬 파일 액세스 간소화에서 모든 세부정보와 새로운 오리진 트라이얼 토큰을 가져오는 방법을 확인하세요.

기타 오리진 트라이얼

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

새로운 교차 출처 정책

일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 완화하기 위해 브라우저는 교차 출처 분리라는 선택 기반 격리 환경을 제공합니다. 또한 교차 출처 분리 상태는 document.domain의 수정을 방지합니다. document.domain를 변경할 수 있으면 동일 사이트 문서 간의 통신이 허용되며 동일 출처 정책의 허점으로 간주됩니다.

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

웹 바이탈

사용자 환경의 품질을 측정하는 데는 여러 가지 측면이 있습니다. 사용자 환경의 일부 측면은 사이트 및 컨텍스트에 따라 다르지만, 모든 웹 환경에 중요한 '코어 웹 바이탈'이라는 공통 신호 세트가 있습니다. 이러한 핵심 사용자 환경 요구사항에는 로드 환경, 상호작용성, 페이지 콘텐츠의 시각적 안정성이 포함되며 모두 합쳐 2020 코어 웹 바이탈의 기반이 됩니다.

  • 최대 콘텐츠 렌더링 시간은 인지된 로드 속도를 측정하고 페이지의 기본 콘텐츠가 로드될 가능성이 있는 페이지 로드 타임라인의 지점을 표시합니다.
  • 최초 입력 반응 시간은 반응성을 측정하고 사용자가 페이지와 처음 상호작용하려고 할 때 느끼는 경험을 수치화합니다.
  • 레이아웃 변경 횟수는 시각적 안정성을 측정하고 표시되는 페이지 콘텐츠의 예상치 못한 레이아웃 변경의 양을 정량화합니다.

이러한 모든 측정항목은 중요한 사용자 중심 결과를 포착하고, 현장 측정 가능하며, 지원되는 실험실 진단 측정항목 및 도구를 포함합니다. 예를 들어 최대 콘텐츠 렌더링 시간은 최상위 로드 측정항목이지만, 모니터링과 개선에 중요한 부분인 콘텐츠가 포함된 첫 페인트 (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의 새로운 기능을 알려드리겠습니다.