ウェブプッシュ プロトコル

ライブラリを使用してプッシュ メッセージをトリガーする方法について説明しましたが、これらのライブラリは具体的に何をしているのでしょうか。

ネットワーク リクエストを実行する際に、リクエストの形式が正しいことを確認します。このネットワーク リクエストを定義する仕様は、ウェブ push プロトコルです。

このセクションでは、サーバーがアプリケーション サーバー鍵で自身を識別する方法と、暗号化されたペイロードと関連データを送信する方法について概説します。

これはウェブプッシュの見栄えの良い部分ではありませんし、私は暗号化の専門家ではありませんが、これらのライブラリが内部で何を行っているかを知っておくと便利なので、各部分を見てみましょう。

アプリケーション サーバー キー

ユーザーを登録するときに、applicationServerKey を渡します。このキーはプッシュ サービスに渡され、ユーザーを登録したアプリケーションがプッシュ メッセージをトリガーしているアプリケーションでもあることを確認するために使用されます。

プッシュ メッセージをトリガーすると、プッシュ サービスがアプリケーションを認証できるようにする一連のヘッダーが送信されます。（これは VAPID 仕様で定義されています）。

具体的にどのような意味があり、どのようなことが起こるのでしょうか。アプリケーション サーバー認証の手順は次のとおりです。

1. アプリケーション サーバーは、非公開のアプリケーション鍵を使用して一部の JSON 情報に署名します。
2. この署名付き情報は、POST リクエストのヘッダーとしてプッシュ サービスに送信されます。
3. プッシュ サービスは、pushManager.subscribe() から受信した保存済みの公開鍵を使用して、受信した情報が公開鍵に関連する秘密鍵で署名されていることを確認します。注意: 公開鍵は、subscribe 呼び出しに渡される applicationServerKey です。
4. 署名付き情報が有効な場合、プッシュ サービスはプッシュ メッセージをユーザーに送信します。

情報の流れの例を以下に示します。（左下の凡例で公開鍵と秘密鍵を確認できます）。

リクエストのヘッダーに追加される「署名付き情報」は JSON Web Token です。

JSON ウェブトークン

JSON Web Token（JWT）は、受信者が送信者を検証できるように、第三者にメッセージを送信する方法です。

第三者がメッセージを受信する場合は、送信者の公開鍵を取得し、その公開鍵を使用して JWT の署名を検証する必要があります。署名が有効な場合、JWT は一致する秘密鍵で署名されているため、想定される送信者からのものです。

https://jwt.io/ には、署名を自動で実行できるライブラリが多数用意されています。可能であれば、これらのライブラリを使用することをおすすめします。完全性を保つため、署名付き JWT を手動で作成する方法を見てみましょう。

ウェブプッシュと署名付き JWT

署名付き JWT は単なる文字列ですが、ドットで結合された 3 つの文字列と見なすこともできます。

最初の文字列と 2 番目の文字列（JWT 情報と JWT データ）は、base64 でエンコードされた JSON の一部であり、一般公開されています。

最初の文字列は JWT 自体に関する情報で、署名の作成に使用されたアルゴリズムを示します。

ウェブプッシュの JWT 情報には、次の情報が含まれている必要があります。

{
  "typ": "JWT",
  "alg": "ES256"
}

2 番目の文字列は JWT データです。これにより、JWT の送信者、対象者、有効期間に関する情報が提供されます。

ウェブプッシュの場合、データの形式は次のようになります。

{
  "aud": "https://some-push-service.org",
  "exp": "1469618703",
  "sub": "mailto:example@web-push-book.org"
}

aud 値は「オーディエンス」です。つまり、JWT の対象者です。ウェブプッシュの場合、オーディエンスはプッシュ サービスであるため、プッシュ サービスのオリジンに設定します。

exp 値は JWT の有効期限です。これにより、スヌーピングで JWT をインターセプトしても、JWT を再利用できなくなります。有効期限は秒単位のタイムスタンプで、24 時間を超えないようにする必要があります。

Node.js では、次を使用して有効期限を設定します。

Math.floor(Date.now() / 1000) + 12 * 60 * 60;

送信元のアプリとプッシュ サービス間の時刻の差異による問題を回避するため、24 時間ではなく 12 時間です。

最後に、sub の値は URL または mailto メールアドレスのいずれかである必要があります。これは、プッシュ サービスが送信者に連絡する必要がある場合に、JWT から連絡先情報を取得できるようにするためです。（そのため、ウェブプッシュ ライブラリにはメールアドレスが必要でした）。

JWT 情報と同様に、JWT データは URL セーフの base64 文字列としてエンコードされます。

3 つ目の文字列（署名）は、最初の 2 つの文字列（JWT Info と JWT Data）をドット文字で結合し、「未署名トークン」と呼ぶものに署名した結果です。

署名プロセスでは、ES256 を使用して「未署名トークン」を暗号化する必要があります。JWT 仕様によると、ES256 は「P-256 曲線と SHA-256 ハッシュ アルゴリズムを使用する ECDSA」の略です。ウェブ暗号を使用して、次のように署名を作成できます。

// Utility function for UTF-8 encoding a string to an ArrayBuffer.
const utf8Encoder = new TextEncoder('utf-8');

// The unsigned token is the concatenation of the URL-safe base64 encoded
// header and body.
const unsignedToken = .....;

// Sign the |unsignedToken| using ES256 (SHA-256 over ECDSA).
const key = {
  kty: 'EC',
  crv: 'P-256',
  x: window.uint8ArrayToBase64Url(
    applicationServerKeys.publicKey.subarray(1, 33)),
  y: window.uint8ArrayToBase64Url(
    applicationServerKeys.publicKey.subarray(33, 65)),
  d: window.uint8ArrayToBase64Url(applicationServerKeys.privateKey),
};

// Sign the |unsignedToken| with the server's private key to generate
// the signature.
return crypto.subtle.importKey('jwk', key, {
  name: 'ECDSA', namedCurve: 'P-256',
}, true, ['sign'])
.then((key) => {
  return crypto.subtle.sign({
    name: 'ECDSA',
    hash: {
      name: 'SHA-256',
    },
  }, key, utf8Encoder.encode(unsignedToken));
})
.then((signature) => {
  console.log('Signature: ', signature);
});

push サービスは、公開アプリケーション サーバー鍵を使用して JWT を検証し、署名を復号して、復号された文字列が「署名なしトークン」（JWT の最初の 2 つの文字列）と同じであることを確認できます。

署名付き JWT（3 つの文字列がドットで結合されている）は、WebPush が先頭に付加された Authorization ヘッダーとしてウェブ プッシュ サービスに送信されます。次に例を示します。

Authorization: 'WebPush [JWT Info].[JWT Data].[Signature]';

また、Web Push プロトコルでは、公開アプリケーション サーバー鍵は、p256ecdsa= が先頭に付加された URL セーフの Base64 エンコード文字列として Crypto-Key ヘッダーで送信する必要があると規定されています。

Crypto-Key: p256ecdsa=[URL Safe Base64 Public Application Server Key]

ペイロードの暗号化

次に、プッシュ メッセージでペイロードを送信して、ウェブアプリがプッシュ メッセージを受信したときに受信したデータにアクセスできるようにする方法について説明します。

他のプッシュ サービスを使用したことのあるユーザーからよく寄せられる質問は、ウェブプッシュ ペイロードを暗号化する必要があるのはなぜかということです。ネイティブ アプリでは、プッシュ メッセージでデータをプレーン テキストとして送信できます。

ウェブプッシュの利点のひとつは、すべてのプッシュ サービスが同じ API（ウェブプッシュ プロトコル）を使用するため、デベロッパーがプッシュ サービスの提供元を気にする必要がないことです。正しい形式でリクエストを行うと、プッシュ メッセージが送信されます。デメリットは、信頼できない push サービスにデベロッパーがメッセージを送信する可能性があることです。ペイロードを暗号化することで、プッシュ サービスは送信されたデータを読み取ることができません。情報を復号できるのはブラウザのみです。これにより、ユーザーのデータが保護されます。

ペイロードの暗号化は、メッセージ暗号化仕様で定義されています。

プッシュ メッセージ ペイロードを暗号化する具体的な手順を説明する前に、暗号化プロセスで使用されるいくつかの手法について説明します。（プッシュ暗号化に関する優れた記事を投稿した Mat Scales に感謝します）。

ECDH と HKDF

ECDH と HKDF はどちらも暗号化プロセス全体で使用され、情報を暗号化する目的でメリットがあります。

ECDH: 楕円曲線 Diffie-Hellman 鍵交換

たとえば、Alice と Bob という 2 人のユーザーが情報を共有したいとします。Alice と Bob の両方に独自の公開鍵と秘密鍵があります。アリスとボブは公開鍵を共有します。

ECDH で生成された鍵の有用な特性は、アリスが自分の秘密鍵とボブの公開鍵を使用して秘密値「X」を作成できることです。Bob も同じことを行えます。自分の秘密鍵と Alice の公開鍵を使用して、同じ値「X」を独立して作成します。これにより、「X」は共有シークレットになり、アリスとボブは公開鍵のみを共有する必要があります。これで、Bob と Alice は「X」を使用して、相互間のメッセージを暗号化および復号できるようになりました。

私の知る限り、ECDH は、共有シークレット「X」を作成するこの「機能」を可能にする曲線のプロパティを定義します。

これは ECDH の概要です。詳しくは、こちらの動画をご覧ください。

コードに関しては、ほとんどの言語 / プラットフォームには、これらの鍵を簡単に生成できるライブラリが付属しています。

ノードでは、次のようにします。

const keyCurve = crypto.createECDH('prime256v1');
keyCurve.generateKeys();

const publicKey = keyCurve.getPublicKey();
const privateKey = keyCurve.getPrivateKey();

HKDF: HMAC ベースの鍵導出関数

ウィキペディアには HKDF の簡潔な説明が記載されています。

HKDF は、弱い鍵マテリアルを暗号的に強力な鍵マテリアルに変換する HMAC ベースの鍵導出関数です。たとえば、Diffie Hellman 交換された共有シークレットを、暗号化、完全性チェック、認証に使用できる鍵マテリアルに変換できます。

基本的に、HKDF は特に安全でない入力を受け取り、より安全にします。

この暗号化を定義する仕様では、ハッシュ アルゴリズムとして SHA-256 を使用する必要があります。ウェブプッシュの HKDF で生成される鍵は 256 ビット（32 バイト）以下にする必要があります。

ノードの実装は次のようになります。

// Simplified HKDF, returning keys up to 32 bytes long
function hkdf(salt, ikm, info, length) {
  // Extract
  const keyHmac = crypto.createHmac('sha256', salt);
  keyHmac.update(ikm);
  const key = keyHmac.digest();

  // Expand
  const infoHmac = crypto.createHmac('sha256', key);
  infoHmac.update(info);

  // A one byte long buffer containing only 0x01
  const ONE_BUFFER = new Buffer(1).fill(1);
  infoHmac.update(ONE_BUFFER);

  return infoHmac.digest().slice(0, length);
}

このサンプルコードは、Mat Scale の記事を参考にしています。

これは、ECDH と HKDF を大まかにカバーしています。

ECDH は、公開鍵を共有して共有シークレットを生成する安全な方法です。HKDF は、安全でないマテリアルを安全にするための方法です。

これは、ペイロードの暗号化時に使用されます。次に、入力として受け取るものと、その暗号化方法について説明します。

入力

ペイロードを含むプッシュ メッセージをユーザーに送信するには、次の 3 つの入力が必要です。

1. ペイロード自体。
2. PushSubscription の auth シークレット。
3. PushSubscription の p256dh キー。

auth と p256dh の値は PushSubscription から取得されますが、サブスクリプションの場合、次の値が必要になります。

subscription.toJSON().keys.auth;
subscription.toJSON().keys.p256dh;

subscription.getKey('auth');
subscription.getKey('p256dh');

auth 値はシークレットとして扱い、アプリの外部と共有しないでください。

p256dh キーは公開鍵であり、クライアント公開鍵とも呼ばれます。ここでは、p256dh をサブスクリプション公開鍵と呼びます。サブスクリプション公開鍵はブラウザによって生成されます。ブラウザは秘密鍵を秘密に保ち、ペイロードの復号に使用します。

auth、p256dh、payload の 3 つの値は入力として必要です。暗号化プロセスの結果は、暗号化されたペイロード、塩値、データの暗号化にのみ使用される公開鍵になります。

Salt

ソルトは 16 バイトのランダム データである必要があります。NodeJS では、次の手順で塩を作成します。

const salt = crypto.randomBytes(16);

公開鍵 / 秘密鍵

公開鍵と秘密鍵は、P-256 楕円曲線を使用して生成する必要があります。これは、Node で次のように行います。

const localKeysCurve = crypto.createECDH('prime256v1');
localKeysCurve.generateKeys();

const localPublicKey = localKeysCurve.getPublicKey();
const localPrivateKey = localKeysCurve.getPrivateKey();

これらのキーを「ローカルキー」と呼びます。暗号化にのみ使用され、アプリケーション サーバー鍵とは関係ありません。

ペイロード、認証シークレット、サブスクリプション公開鍵を入力として、新しく生成された塩とローカル鍵のセットを用意したら、実際に暗号化を行う準備が整います。

共有 Secret

最初のステップは、サブスクリプション公開鍵と新しい秘密鍵を使用して共有シークレットを作成することです（アリスとボブの ECDH の説明を思い出してください。など）を特定します。

const sharedSecret = localKeysCurve.computeSecret(
  subscription.keys.p256dh,
  'base64',
);

これは、次のステップで疑似乱数鍵（PRK）の計算に使用されます。

疑似乱数キー

疑似乱数鍵（PRK）は、プッシュ サブスクリプションの認証シークレットと、先ほど作成した共有シークレットの組み合わせです。

const authEncBuff = new Buffer('Content-Encoding: auth\0', 'utf8');
const prk = hkdf(subscription.keys.auth, sharedSecret, authEncBuff, 32);

Content-Encoding: auth\0 文字列の用途について疑問に思われるかもしれません。つまり、ブラウザは受信メッセージを復号して、想定されるコンテンツ エンコードを探すことができますが、明確な目的はありません。\0 は、値が 0 のバイトをバッファの末尾に追加します。これは、コンテンツ エンコードにこれだけのバイトを想定し、その後に値 0 のバイト、その後に暗号化されたデータを想定する、メッセージを復号するブラウザによって想定されます。

擬似乱数鍵は、認証、共有シークレット、エンコード情報の一部を HKDF で実行するだけです（つまり、暗号的に強力にします）。

コンテキスト

「コンテキスト」は、後で暗号ブラウザで 2 つの値を計算するために使用されるバイトセットです。基本的に、サブスクリプション公開鍵とローカル公開鍵を含むバイト配列です。

const keyLabel = new Buffer('P-256\0', 'utf8');

// Convert subscription public key into a buffer.
const subscriptionPubKey = new Buffer(subscription.keys.p256dh, 'base64');

const subscriptionPubKeyLength = new Uint8Array(2);
subscriptionPubKeyLength[0] = 0;
subscriptionPubKeyLength[1] = subscriptionPubKey.length;

const localPublicKeyLength = new Uint8Array(2);
subscriptionPubKeyLength[0] = 0;
subscriptionPubKeyLength[1] = localPublicKey.length;

const contextBuffer = Buffer.concat([
  keyLabel,
  subscriptionPubKeyLength.buffer,
  subscriptionPubKey,
  localPublicKeyLength.buffer,
  localPublicKey,
]);

最後のコンテキスト バッファは、ラベル、サブスクリプション公開鍵のバイト数、鍵自体、ローカル公開鍵のバイト数、鍵自体です。

このコンテキスト値は、ノンスとコンテンツ暗号鍵（CEK）の作成に使用できます。

コンテンツ暗号鍵とノンス

ノンスは、1 回しか使用できないため、リプレイ攻撃を防ぐ値です。

コンテンツ暗号鍵（CEK）は、最終的にペイロードの暗号化に使用される鍵です。

まず、ノンスと CEK のデータバイトを作成する必要があります。これは、コンテンツ エンコード文字列の後に、計算したコンテキスト バッファが続くだけです。

const nonceEncBuffer = new Buffer('Content-Encoding: nonce\0', 'utf8');
const nonceInfo = Buffer.concat([nonceEncBuffer, contextBuffer]);

const cekEncBuffer = new Buffer('Content-Encoding: aesgcm\0');
const cekInfo = Buffer.concat([cekEncBuffer, contextBuffer]);

この情報は、salt と PRK を nonceInfo と cekInfo と組み合わせて HKDF で実行されます。

// The nonce should be 12 bytes long
const nonce = hkdf(salt, prk, nonceInfo, 12);

// The CEK should be 16 bytes long
const contentEncryptionKey = hkdf(salt, prk, cekInfo, 16);

これにより、ノンスとコンテンツ暗号鍵が得られます。

暗号化を実行する

コンテンツ暗号鍵が作成されたので、ペイロードを暗号化できます。

コンテンツ暗号鍵を鍵として使用し、ノンスを初期化ベクトルとして AES128 暗号を作成します。

Node では、次のように行います。

const cipher = crypto.createCipheriv(
  'id-aes128-GCM',
  contentEncryptionKey,
  nonce,
);

ペイロードを暗号化する前に、ペイロードの前に追加するパディングの量を定義する必要があります。パディングを追加する理由は、盗聴者がペイロード サイズに基づいてメッセージの「タイプ」を特定するリスクを防ぐためです。

追加のパディングの長さを示すために、2 バイトのパディングを追加する必要があります。

たとえば、パディングを追加しなかった場合、値が 0 の 2 バイト（パディングなし）が存在し、この 2 バイトの後にペイロードが読み取られます。5 バイトのパディングを追加した場合、最初の 2 バイトの値は 5 になります。コンシューマは、さらに 5 バイトを読み取った後でペイロードの読み取りを開始します。

const padding = new Buffer(2 + paddingLength);
// The buffer must be only zeros, except the length
padding.fill(0);
padding.writeUInt16BE(paddingLength, 0);

次に、この暗号でパディングとペイロードを実行します。

const result = cipher.update(Buffer.concat(padding, payload));
cipher.final();

// Append the auth tag to the result -
// https://nodejs.org/api/crypto.html#crypto_cipher_getauthtag
const encryptedPayload = Buffer.concat([result, cipher.getAuthTag()]);

これで、暗号化されたペイロードが作成されました。正解です。

残す作業は、このペイロードをプッシュ サービスに送信する方法の決定です。

暗号化されたペイロードのヘッダーと本文

この暗号化されたペイロードをプッシュ サービスに送信するには、POST リクエストでいくつかのヘッダーを定義する必要があります。

暗号化ヘッダー

[Encryption] ヘッダーには、ペイロードの暗号化に使用されるsalt を含める必要があります。

16 バイトの塩は、Base64 URL セーフでエンコードし、次のように Encryption ヘッダーに追加する必要があります。

Encryption: salt=[URL Safe Base64 Encoded Salt]

Crypto-Key ヘッダー

Crypto-Key ヘッダーは、[アプリケーション サーバー鍵] セクションで公開アプリケーション サーバー鍵を格納するために使用されていることがわかりました。

このヘッダーは、ペイロードの暗号化に使用されるローカル公開鍵の共有にも使用されます。

生成されたヘッダーは次のようになります。

Crypto-Key: dh=[URL Safe Base64 Encoded Local Public Key String]; p256ecdsa=[URL Safe Base64 Encoded Public Application Server Key]

コンテンツ タイプ、長さ、エンコードのヘッダー

Content-Length ヘッダーは、暗号化されたペイロードのバイト数です。「Content-Type」ヘッダーと「Content-Encoding」ヘッダーは固定値です。以下に示します。

Content-Length: [Number of Bytes in Encrypted Payload]
Content-Type: 'application/octet-stream'
Content-Encoding: 'aesgcm'

これらのヘッダーを設定したら、暗号化されたペイロードをリクエストの本文として送信する必要があります。Content-Type が application/octet-stream に設定されていることに注意してください。これは、暗号化されたペイロードをバイトのストリームとして送信する必要があるためです。

NodeJS では、次のように行います。

const pushRequest = https.request(httpsOptions, function(pushResponse) {
pushRequest.write(encryptedPayload);
pushRequest.end();

ヘッダーを追加する

JWT / アプリケーション サーバー鍵に使用されるヘッダー（push サービスでアプリケーションを識別する方法）と、暗号化されたペイロードの送信に使用されるヘッダーについて説明しました。

プッシュ サービスが送信されるメッセージの動作を変更するために使用する追加のヘッダーもあります。これらのヘッダーの一部は必須ですが、他のヘッダーは省略可能です。

TTL ヘッダー

必須

TTL（有効期間）は、プッシュ メッセージが配信される前にプッシュ サービスに保持される秒数を指定する整数です。TTL が期限切れになると、メッセージはプッシュ サービス キューから削除され、配信されなくなります。

TTL: [Time to live in seconds]

TTL を 0 に設定すると、プッシュ サービスはすぐにメッセージを配信しようとしますが、デバイスに到達できない場合、メッセージはプッシュ サービス キューからすぐに破棄されます。

技術的には、プッシュ サービスは必要に応じてプッシュ メッセージの TTL を減らすことができます。プッシュ サービスからのレスポンスの TTL ヘッダーを確認することで、この状態かどうかを判断できます。

トピック

任意

トピックは、トピック名が一致する場合に、保留中のメッセージを新しいメッセージに置き換えるために使用できる文字列です。

これは、デバイスがオフラインのときに複数のメッセージが送信され、デバイスの電源がオンになっているときにユーザーに最新のメッセージのみを表示したい場合に便利です。

緊急度

任意

緊急度は、プッシュ サービスにメッセージの重要度を通知します。プッシュ サービスは、バッテリー残量が少ない場合にのみ重要なメッセージに対してデバイスを起動することで、デバイスのバッテリーを節約できます。

ヘッダー値は次のように定義されます。デフォルト値は normal です。

Urgency: [very-low | low | normal | high]

すべてをまとめる

仕組みについてご不明な点がございましたら、web-push-libs org でライブラリがプッシュ メッセージをトリガーする方法をご覧ください。

暗号化されたペイロードと上記のヘッダーを取得したら、PushSubscription の endpoint に POST リクエストを送信するだけです。

この POST リクエストのレスポンスをどうすればよいでしょうか。

プッシュ サービスからのレスポンス

push サービスにリクエストを送信したら、レスポンスのステータス コードを確認する必要があります。このステータス コードから、リクエストが成功したかどうかを判断できます。

ステータス コード	説明
201	作成されます。プッシュ メッセージを送信するリクエストが受信され、承認されました。
429	リクエスト数が多すぎます。つまり、アプリケーション サーバーがプッシュ サービスのレート上限に達しています。プッシュ サービスには、別のリクエストを実行できるまでの時間を示す「Retry-After」ヘッダーを含める必要があります。
400	無効なリクエストです。これは通常、ヘッダーのいずれかが無効であるか、形式が正しくないことを意味します。
404	見つかりませんでした。これは、定期購入が期限切れになり、使用できなくなったことを示します。この場合は、PushSubscription を削除し、クライアントがユーザーを再登録するのを待つ必要があります。
410	消えてしまいました。サブスクリプションは無効になっているため、アプリケーション サーバーから削除する必要があります。これは、PushSubscription で unsubscribe() を呼び出すと再現できます。
413	ペイロードのサイズが大きすぎます。push サービスがサポートする必要があるペイロードの最小サイズは 4,096 バイト（4 KB）です。

HTTP ステータス コードの詳細については、ウェブプッシュ標準（RFC8030）もご覧ください。

次のステップ

• ウェブでのプッシュ通知の概要
• プッシュの仕組み
• ユーザーを登録する
• 権限の UX
• ウェブプッシュ ライブラリを使用したメッセージの送信
• ウェブプッシュ プロトコル
• プッシュ イベントの処理
• 通知の表示
• 通知の動作
• 一般的な通知パターン
• プッシュ通知に関するよくある質問
• 一般的な問題とバグの報告

Codelab

• プッシュ通知クライアントを作成する
• プッシュ通知サーバーを構築する