このページは Cloud Translation API によって翻訳されました。

Chrome 83 の新機能

Pete LePage

Chrome 83 の Stable 版へのロールアウトが開始されました。

必知事項は次のとおりです。

信頼できる型は、クロスサイトスクリプティングの脆弱性を防ぐのに役立ちます。
フォーム要素に重要な変更が行われます。
メモリリークを検出する新しい方法があります。
ネイティブファイルシステム API は、追加機能を使用して新しいオリジントライアルを開始します。
新しいクロスオリジンポリシーがある
Google は、ウェブで優れたユーザーエクスペリエンスを実現するために重要と考えられる品質シグナルについて、統一的な目安を提供する Web Vitals プログラムを導入しました。
その他

Pete LePage と申します。自宅で撮影しながら、Chrome 83 のデベロッパー向け新機能についてお話しします。

信頼できるタイプ

DOM ベースのクロスサイトスクリプティングは、ウェブで最も一般的なセキュリティ上の脆弱性の 1 つです。うっかりページにタグを導入してしまいがちです信頼できる型を使用すると、危険な可能性がある関数にデータを渡す前にデータを処理する必要があるため、このような脆弱性を防ぐことができます。

たとえば、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 の Trusted Types で DOM ベースのクロスサイトスクリプティングの脆弱性を防ぐをご覧ください。

フォームコントロールの更新

HTML フォームコントロールは日々使用されており、ウェブのインタラクティブ機能の多くに欠かせないものです。使いやすく、アクセシビリティが組み込まれており、Google のユーザーになじみがあります。フォームコントロールのスタイルは、ブラウザやオペレーティングシステムによって異なる場合があります。また、デバイス間で一貫した外観を実現するため、多くの 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 の更新

Chrome 83 では、Native File System API により、書き込み可能なストリームのサポートとファイルハンドルの保存機能を含む新しいオリジントライアルが開始されました。

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

書き込み可能なストリームを使用すると、ファイルへの書き込みが大幅に容易になります。また、ストリームであるため、レスポンスを 1 つのストリームから別のストリームに簡単にパイプできます。

ファイルハンドルを IndexedDB に保存すると、状態を保存したり、ユーザーがどのファイルを操作していたかを確認したりできます。たとえば、最近編集したファイルのリストを保持し、ユーザーが最後に作業していたファイルを開くなどです。

これらの機能を使用するには、新しいオリジントライアルトークンが必要です。詳細と新しいオリジントライアルトークンの取得方法については、web.dev の最新記事 The Native File System API: Simplifying access to local files をご覧ください。

その他のオリジントライアル

オリジントライアルの機能の一覧をご覧ください。

新しいクロスオリジンポリシー

一部のウェブ API では、Spectre などのサイドチャネル攻撃のリスクが高まります。このリスクを軽減するために、ブラウザにはクロスオリジン分離と呼ばれるオプトインベースの分離環境が用意されています。クロスオリジン分離状態により、document.domain の変更も防止されます。document.domain を変更できると、同一サイトのドキュメント間の通信が可能になり、同一生成元ポリシーの抜け穴と見なされていました。

詳しくは、Eiji の投稿 COOP と COEP を使用してウェブサイトを「クロスオリジン分離」するをご覧ください。

ウェブに関する指標

ユーザーエクスペリエンスの質の測定には、多くの側面があります。ユーザーエクスペリエンスの一部の要素はサイトやコンテキストに固有ですが、すべてのウェブエクスペリエンスに不可欠な共通のシグナルセット「Core Web Vitals」があります。このような主要なユーザーエクスペリエンスのニーズには、ページコンテンツの読み込みエクスペリエンス、インタラクティビティ、視覚的な安定性などがあり、これらが 2020 年の Core Web Vitals の基礎となっています。

Largest Contentful Paint は、認識された読み込み速度を測定し、ページの読み込みタイムライン上でページのメインコンテンツが読み込まれたと思われる時点をマークします。
初回入力遅延は、応答性を測定し、ユーザーがページを初めて操作しようとしたときに感じるエクスペリエンスを定量化します。
Cumulative Layout Shift は、視覚的な安定性を測定し、表示されるページコンテンツの予期しないレイアウトシフトの量を定量化します。

これらの指標はすべて、重要なユーザー中心の結果を捉え、現場で測定可能であり、ラボ診断指標と同等のサポートとツールを備えています。たとえば、Largest Contentful Paint は読み込みの概要を示す指標ですが、First Contentful Paint（FCP）と Time to First Byte（TTFB）にも大きく依存します。これらの指標は、モニタリングと改善に引き続き重要です。

詳しくは、Chromium ブログの Web Vitals のご紹介: 健全なサイトに不可欠な指標をご覧ください。

その他

Chrome で、バーコードの検出とデコードを行う Barcode Detection API をサポートするようになりました。
新しい CSS @supports 関数は、CSS セレクタの特徴検出を提供します。
新しい ARIA アノテーションは、意味的意味（<mark> に類似）を持つコメント、提案、テキストハイライトでスクリーンリーダーのユーザー補助をサポートします。
prefers-color-scheme メディアクエリを使用すると、作成者が独自のダークモードをサポートし、作成したエクスペリエンスを完全に制御できます。
JavaScript で共有ワーカー内のモジュールがサポートされるようになりました。

今後の予定が気になる場合は、詳しくは、Fugu API トラッカーをご覧ください。

Chrome 83 の新機能

信頼できるタイプ

フォーム コントロールの更新

オリジン トライアル

measureMemory() でメモリを測定する