Initial commit

Author: colecrouter

.npmignore

@@ -0,0 +1,6 @@
+node_modules
+npm-debug.log
+src
+test
+README.md
+.gitignore

README.md

@@ -0,0 +1,84 @@
+# web-push-browser
+
+> This project is not affiliated or based upon the original [web-push](https://github.com/web-push-libs/web-push) package or [web-push-lib](https://github.com/web-push-libs) organization.
+
+This package is aimed at being a lightweight replacement for [web-push](https://github.com/web-push-libs/web-push), as (at the time of writing) it relies on Node.js dependencies that are not available in the browser.
+
+## Installation
+
+```bash
+npm install web-push-browser
+```
+
+## Example Usage
+
+### Subscribing a User
+
+```ts
+import { fromBase64Url } from 'web-push-browser';
+
+//...
+
+const registration = await navigator.serviceWorker.register('./service-worker.js', { type: 'module' });
+try {
+    // Subscribe to push notifications
+    const sub = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: fromBase64Url(PUBLIC_VAPID_KEY),
+    });
+
+    // Store the subscription in your backend
+    // ...
+} catch (err) {
+    console.error('Failed to subscribe to notifications', err);
+    if (await registration.pushManager.getSubscription()) {
+        // Cleanup if existing subscription exists
+        await sub.unsubscribe();
+    }
+}
+```
+
+### Sending a Push Notification
+
+```ts
+import { sendNotification, deserializeVapidKeys } from 'web-push-browser';
+
+// You can use `deserializeVapidKeys` to convert your VAPID keys from strings into a KeyPair
+const keyPair = await deserializeVapidKeys({
+    publicKey: PUBLIC_VAPID_KEY,
+    privateKey: VAPID_PRIVATE_KEY,
+});
+
+const sub = // Get the subscription from your backend
+const { auth, p256dh } = sub.keys;
+
+const res = await sendPushNotification(
+    keyPair,
+    {
+        endpoint: sub.endpoint,
+        keys: {
+            auth: auth,
+            p256dh: p256dh,
+        },
+    },
+    "[email protected]",
+    JSON.stringify("Insert JSON payload here"),
+);
+if (!res.ok) {
+    console.error('Failed to send push notification', res);
+}
+```
+
+### Generating VAPID Keys
+
+```js
+import { generateVapidKeys, serializeVapidKeys } from 'web-push-browser';
+
+const keys = await generateVapidKeys();
+const serializedKeys = await serializeVapidKeys(keys);
+console.log(serializedKeys);
+```
+
+## Extended Usage
+
+This package only supports the basic functionality. If you need more advanced features, such as proxies, custom headers, etc. you can access the internal functions to create your own requests.

package-lock.json

@@ -1,21 +1,18 @@
 {
-  "name": "webpush-notification",
+  "name": "web-push-browser",
   "version": "1.0.0",
   "description": "Minimal library for sending notifications via the browser Push API",
-  "main": "build/pushNotification.js",
+  "main": "build/index.js",
   "dependencies": {
     "jose": "^5.8.0"
   },
   "devDependencies": {
-    "base64url": "^3.0.1",
-    "js-crypto-hkdf": "^1.0.7",
     "typescript": "^5.5.4"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc"
   },
   "author": "Cole Crouter",
   "license": "ISC",
   "type": "module"
-}
+}

package.json

@@ -0,0 +1,28 @@
+import { SignJWT } from "jose";
+
+/**
+ * Generate and sign a JWT token.
+ *
+ * To be used in the `Authorization` header of a POST request to a web Push API endpoint.
+ * @param privateVapidKey - The private key to sign the JWT with.
+ * @param endpoint - The URL of the web Push API endpoint.
+ * @param email - The email address to use as the `sub` claim. For example, `[email protected]`.
+ * @returns
+ */
+export async function createJWT(
+	privateVapidKey: CryptoKey,
+	endpoint: URL,
+	email: string,
+): Promise<string> {
+	const aud = endpoint.origin;
+	const exp = Math.floor(Date.now() / 1000) + 12 * 60 * 60; // 12 hours from now
+	const sub = `mailto:${email}`;
+
+	return await new SignJWT({
+		aud,
+		exp,
+		sub,
+	})
+		.setProtectedHeader({ alg: "ES256", typ: "JWT" })
+		.sign(privateVapidKey);
+}

src/crypto/deriveSharedSecret.ts

@@ -0,0 +1,118 @@
+import type { PushNotificationSubscription } from "../types.js";
+import { fromBase64Url } from "../utils/base64url.js";
+
+/**
+ * Encrypt a plaintext payload using the keys provided by the PushSubscription.
+ * @param payload - The plaintext payload to encrypt.
+ * @param keys - The keys from the PushSubscription.
+ */
+export async function encryptPayload(
+	payload: string,
+	keys: PushNotificationSubscription["keys"],
+) {
+	const encoder = new TextEncoder();
+	const salt = crypto.getRandomValues(new Uint8Array(16));
+
+	if (!keys.p256dh || !keys.auth) {
+		throw new Error("Missing p256dh or auth key");
+	}
+
+	// Get the p256dh and auth keys from the subscription
+	const auth =
+		typeof keys.auth === "string" ? fromBase64Url(keys.auth) : keys.auth;
+	const p256dh =
+		typeof keys.p256dh === "string" ? fromBase64Url(keys.p256dh) : keys.p256dh;
+
+	// Generate a new ECDH key pair for this encryption
+	const localKeyPair = await crypto.subtle.generateKey(
+		{ name: "ECDH", namedCurve: "P-256" },
+		true,
+		["deriveBits"],
+	);
+
+	// Import the client's public key
+	const clientPublicKey = await crypto.subtle.importKey(
+		"raw",
+		p256dh,
+		{ name: "ECDH", namedCurve: "P-256" },
+		true,
+		[],
+	);
+
+	// Generate a shared secret
+	const sharedSecret = await crypto.subtle.deriveBits(
+		{ name: "ECDH", public: clientPublicKey },
+		localKeyPair.privateKey,
+		256,
+	);
+
+	// Create the PRK
+	const prk = await crypto.subtle.importKey(
+		"raw",
+		await crypto.subtle.digest(
+			"SHA-256",
+			new Uint8Array([
+				...new Uint8Array(auth),
+				...new Uint8Array(sharedSecret),
+			]),
+		),
+		{ name: "HKDF" },
+		false,
+		["deriveBits"],
+	);
+
+	// Derive the Content Encryption Key
+	const cekInfo = encoder.encode("Content-Encoding: aes128gcm");
+	const cek = await crypto.subtle.deriveBits(
+		{
+			name: "HKDF",
+			hash: "SHA-256",
+			salt: salt,
+			info: cekInfo,
+		},
+		prk,
+		128,
+	);
+
+	const iv = crypto.getRandomValues(new Uint8Array(12));
+
+	// Encrypt the payload
+	const encryptedPayload = await crypto.subtle.encrypt(
+		{ name: "AES-GCM", iv: iv },
+		await crypto.subtle.importKey(
+			"raw",
+			new Uint8Array(cek),
+			{ name: "AES-GCM" },
+			false,
+			["encrypt"],
+		),
+		encoder.encode(payload),
+	);
+
+	// Prepend the salt and server public key to the payload
+	// Export the server's public key
+	const serverPublicKeyBytes = new Uint8Array(
+		await crypto.subtle.exportKey("raw", localKeyPair.publicKey),
+	);
+
+	// Construct the header
+	const header = new Uint8Array([
+		...salt, // 16 bytes
+		...new Uint8Array(4), // 4 bytes for record size (we'll fill this later)
+		...serverPublicKeyBytes, // 65 bytes for public key
+	]);
+
+	// Construct the full message
+	const message = new Uint8Array([
+		...header,
+		...new Uint8Array(encryptedPayload),
+	]);
+
+	// Now fill in the record size
+	const recordSize = new Uint32Array([encryptedPayload.byteLength]);
+	new Uint8Array(message.buffer, 16, 4).set(new Uint8Array(recordSize.buffer));
+	const encrypted = message.buffer;
+	const serverPublicKey = localKeyPair.publicKey;
+
+	return { encrypted, salt, serverPublicKey };
+}