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

ライブラリを使用して push メッセージをトリガーする方法は見てきましたが、ライブラリは正確には何をしているのでしょうか。

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

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

これはウェブプッシュの面倒な側面であり、暗号化についてはあまり詳しくありませんが、ライブラリが内部で何を行っているかを把握しておくと便利です。

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

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

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

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

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

この情報フローの例を以下に示します。（左下の凡例に公開鍵と秘密鍵が示されています）。

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

JSON ウェブトークン

JSON ウェブトークン（略して JWT）は、サードパーティにメッセージを送信する方法です。これにより、受信者はメッセージの送信者を検証できます。

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

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

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

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

1 番目と 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;

送信アプリケーションと push サービス間のクロックの相違による問題を回避するため、24 時間ではなく 12 時間にします。

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

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

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

署名プロセスでは、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 も同じことを行えます。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 Secret。
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);

公開鍵 / 秘密鍵

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

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 文字列の用途について疑問に思われるかもしれません。つまり、ブラウザは受信メッセージを復号して、想定される content-encoding を探すことができますが、明確な目的はありません。\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 が期限切れになると、メッセージは push サービスキューから削除され、配信されなくなります。

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 サービスからのレスポンス

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

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

次のステップ

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

Codelab

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