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

Chrome 83 の新機能

Pete LePage

Twitter GitHub Glitch Mastodon ホームページ

現在、Chrome 83 の安定版のリリースが開始されます。

フォーマットの詳細については次をご覧ください。

信頼できるタイプは、クロスサイトスクリプティングの脆弱性を防ぐのに役立ちます。
フォーム要素を重要な見直しする。
メモリリークを検出する新しい方法があります。
ネイティブファイルシステム API が、追加された機能を含む新しいオリジントライアルを開始します。
新しいクロスオリジンポリシーを利用できます。
Google は、ウェブに関する指標プログラムを導入し、ウェブ上で優れたユーザーエクスペリエンスを提供するために不可欠と思われる品質シグナルに関する統一的なガイダンスを提供しています。
その他。

私は 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 の 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.
}

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

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

これらの機能を使用するには、新しいオリジントライアルトークンが必要です。詳細と新しいオリジントライアルトークンの取得方法については、web.dev で更新された記事 Native File System API: ローカルファイルへのアクセスの簡素化をご覧ください。

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

オリジントライアルに含まれる機能の一覧をご確認ください。

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

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

詳細については、Eiji の投稿 Making your website "クロスオリジン分離" using COOP and COEP: Eiji の投稿をご覧ください。

ウェブに関する指標

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

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

これらの指標はすべて、ユーザー中心の重要な成果をキャプチャし、現場で測定可能で、サポートとなるラボの診断指標と同等のツールを備えています。たとえば、Largest Contentful Paint は読み込みの主要指標ですが、First Contentful Paint（FCP）と最初のバイトまでの時間（TTFB）にも大きく依存しており、これらはモニタリングと改善に引き続き重要です。

詳細については、Chromium ブログの Web Vitals のご紹介: 健全なサイトに関する重要な指標をご覧ください。

その他

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

今後の予定については、Fugu API トラッカーをご覧ください。

参考資料

ここでは、主なハイライトの一部のみを取り上げています。Chrome 83 で追加された変更点については、以下のリンクをご覧ください。

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。

私はピートルページです。Chrome 84 がリリースされたらすぐに Chrome の新機能をお知らせします。

Chrome 83 の新機能

信頼できるタイプ

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

オリジン トライアル

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