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

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

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

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

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

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

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

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

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

ウェブに関する指標

ユーザーエクスペリエンスの品質を測定するには、さまざまな側面があります。ユーザーエクスペリエンスを構成する要素の中には、サイトやコンテキストに固有のものもありますが、すべてのウェブエクスペリエンスにおいて重要となる共通のシグナル（ウェブに関する主な指標）があります。このようなコアなユーザーエクスペリエンスのニーズには、ページコンテンツの読み込みエクスペリエンス、インタラクティビティ、視覚的安定性が含まれます。これらを組み合わせたものが、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() でメモリを測定する