Sec-CH-UA：Webサイトのパフォーマンスとユーザーエクスペリエンスを向上させるための鍵

Sec-CH-UAヘッダーの構成

Sec-CH-UAヘッダーの値は、以下の3つのコンポーネントで構成されます。

• アプリ: ブラウザのアプリケーションプラットフォーム (例: Android、iOS、Windowsなど)
• バージョン: ブラウザの主要バージョン番号 (例: 99、100など)
• ブランド: ブラウザのブランド名 (例: Chrome、Firefox、Safariなど)

これらのコンポーネントは、カンマで区切られた文字列として表現されます。

例:

Sec-CH-UA: "NotA;Brand";v="99";app="Android"

この例では、ブラウザはChromeではなく、バージョン99でAndroid上で動作しています。

Sec-CH-UAヘッダーの利点

Sec-CH-UAヘッダーを使用する利点は次のとおりです。

• ユーザーエクスペリエンスの向上: Webサイトは、ユーザーのブラウザとデバイスに合わせた最適なエクスペリエンスを提供できます。
• パフォーマンスの向上: Webサイトは、ユーザーのブラウザとデバイスに合わせたコンテンツと機能を提供することで、パフォーマンスを向上させることができます。
• ブラウザとデバイスの検出: Webサイトは、ユーザーのブラウザとデバイスをより正確に識別できます。

Sec-CH-UAヘッダーの使用

Sec-CH-UAヘッダーは、Webブラウザによってデフォルトで送信されます。Webサイト開発者は、このヘッダーの値を解析して、ユーザーのブラウザとデバイスに合わせたコンテンツと機能を提供することができます。

Sec-CH-UAヘッダーに関する注意事項

• Sec-CH-UAヘッダーは、ユーザーの同意なしに送信されるため、プライバシーに関する懸念があります。
• Sec-CH-UAヘッダーは、比較的新しいヘッダーであり、すべてのブラウザでサポートされているわけではありません。

Sec-CH-UAヘッダーは、Webサイトがユーザーのブラウザとデバイスに合わせた最適なエクスペリエンスを提供するために役立つHTTPヘッダーフィールドです。このヘッダーを使用することで、Webサイトはパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させることができます。

---

const ua = navigator.userAgentData;
const brand = ua.brands[0].brand;
const version = ua.brands[0].version;
const app = ua.platform;

const secCHUAHeader = `Sec-CH-UA: ${brand};v=${version};app=${app}`;
console.log(secCHUAHeader);

このコードを実行すると、次のような出力が得られます。

Sec-CH-UA: NotA;Brand;v=99;app=Android

Sec-CH-UAヘッダーを使用してブラウザとデバイスを判別する

以下のコードは、Sec-CH-UAヘッダーの値を使用してブラウザとデバイスを判別する方法を示しています。

const secCHUAHeader = req.headers['Sec-CH-UA'];
const uaData = parseSecCHUAHeader(secCHUAHeader);

if (uaData.brand === 'Chrome') {
  console.log('User is using Chrome browser');
} else if (uaData.brand === 'Firefox') {
  console.log('User is using Firefox browser');
} else {
  console.log('User is using other browser');
}

if (uaData.app === 'Android') {
  console.log('User is using Android device');
} else if (uaData.app === 'iOS') {
  console.log('User is using iOS device');
} else {
  console.log('User is using other device');
}

このコードは、リクエストヘッダーからSec-CH-UAヘッダーの値を取得し、parseSecCHUAHeader関数を使用して解析します。解析結果は、uaDataオブジェクトに格納されます。

uaDataオブジェクトには、ブラウザのブランド (brandプロパティ)、バージョン (versionプロパティ)、アプリケーションプラットフォーム (appプロパティ) などの情報が含まれています。

この情報を使用して、ブラウザとデバイスを判別することができます。

Sec-CH-UAヘッダーを使用してコンテンツを配信する

以下のコードは、Sec-CH-UAヘッダーの値を使用してコンテンツを配信する方法を示しています。

const secCHUAHeader = req.headers['Sec-CH-UA'];
const uaData = parseSecCHUAHeader(secCHUAHeader);

if (uaData.brand === 'Chrome' && uaData.version >= 90) {
  // Chrome 90以降の場合は、最新のWebP画像を提供する
  res.send(newResponseWithWebPImage());
} else {
  // Chrome 90未満の場合は、従来の画像を提供する
  res.send(newResponseWithJpegImage());
}

この情報を使用して、ブラウザとデバイスに合わせたコンテンツを配信することができます。

注: 上記のコードはあくまで例であり、実際の用途に合わせて変更する必要があります。

---

User Agent Client Hints (UA-CH)

UA-CHは、Webブラウザとデバイスに関する情報をWebサーバーに提供する新しい提案です。Sec-CH-UAと同様に、UA-CHはブラウザのバージョン、ブランド、プラットフォームなどの情報を提供します。

しかし、UA-CHはいくつかの点でSec-CH-UAよりも優れています。

• 詳細な情報: UA-CHは、Sec-CH-UAよりも多くの情報を提供することができます。
• プライバシー保護: UA-CHは、ユーザーの同意なしに送信されることがないように設計されています。

UA-CHは現在、主要なWebブラウザで開発中であり、今後数年の間に広く普及することが予想されます。

セカンドパーティクッキー

セカンドパーティクッキーは、ユーザーがWebサイトを訪問したときにそのサイトによって設定されるクッキーです。これらのクッキーは、ユーザーのブラウザとデバイスに関する情報を保存するために使用できます。

しかし、セカンドパーティクッキーにはいくつかの欠点があります。

• ブロックの可能性: 多くのWebブラウザは、プライバシー保護のためにセカンドパーティクッキーをブロックするように設定されています。
• プライバシーへの影響: セカンドパーティクッキーは、ユーザーの同意なしに設定される可能性があります。

ブラウザフィンガープリンティング

ブラウザフィンガープリンティングは、ユーザーのブラウザとデバイスを識別するためにさまざまな技術を組み合わせる手法です。これには、ユーザーエージェント文字列、キャンバス描画、JavaScript APIの使用などがあります。

しかし、ブラウザフィンガープリンティングは、倫理的な問題とプライバシーへの懸念があるため、推奨されていません。

将来的には、Sec-CH-UAよりも優れた代替手段が開発される可能性があります。例えば、W3Cは、新しいHTTPヘッダーやAPIを提案する可能性があります。

現時点では、UA-CHがSec-CH-UAの最も有望な代替手段です。しかし、UA-CHはまだ開発中であり、普及するまでには時間がかかる可能性があります。

将来的には、Sec-CH-UAよりも優れた代替手段が開発される可能性があります。

Sec-CH-UAを使用する際の注意点

Sec-CH-UAを使用する場合は、以下の点に注意する必要があります。

• プライバシーに関する懸念: Sec-CH-UAは、ユーザーの同意なしに送信されるため、プライバシーに関する懸念があります。
• すべてのブラウザでサポートされているわけではない: Sec-CH-UAは比較的新しいヘッダーであり、すべてのブラウザでサポートされているわけではありません。

これらの点を考慮した上で、Sec-CH-UAを使用するかどうかを判断する必要があります。