VAPID Key Generator: สร้าง key pair สำหรับ Web Push ในเบราว์เซอร์

ถ้าคุณทำ web push notification บริการ push ของผู้ผลิตเบราว์เซอร์จะไม่ยอมรับข้อความแม้แต่ข้อเดียว จนกว่า server ของคุณจะพิสูจน์ตัวตนได้ ซึ่ง Web Push ต้องใช้ VAPID keys เพื่อพิสูจน์ตัวตนของ server ต่อ push services และทุก subscription ที่เบราว์เซอร์ส่งให้คุณจะผูกกับ key pair หนึ่งคู่โดยเฉพาะทางการเข้ารหัสลับ ถ้าสร้าง key pair ผิดที่หรือผิดวิธี ทั้งระบบ notification ของคุณก็จะสะสมปัญหานั้นไว้

VAPID Key Generator ฟรีของเราสร้าง key pair ให้คุณภายในไม่กี่วินาที โดยใช้ Web Crypto API ในตัวเบราว์เซอร์สร้าง P-256 ECDSA key pair แท้จริง แล้วส่งออกทั้งสองฝั่งเป็นรูปแบบ base64url (RFC 4648 หัวข้อ 5 ไม่มี padding) ซึ่งตรงกับที่ push libraries ต้องการพอดี ทุกอย่างทำงานฝั่ง client ทั้งหมด จึงไม่มี private key ไปผ่านเซิร์ฟเวอร์ใดเลย

บทความนี้จะอธิบายว่าเครื่องมือสร้างอะไรให้, key แต่ละตัวไปอยู่ที่ไหน และวิธีเลี่ยงข้อผิดพลาดที่ทำให้ subscription ของ user จริงใช้งานไม่ได้

ทำไมต้องใช้ VAPID Key Generator?

• private key ไม่เคยออกจากเครื่องคุณ — key ถูกสร้างในเบราว์เซอร์ผ่าน Web Crypto API ไม่มีการอัปโหลด, ไม่มี log ฝั่งเซิร์ฟเวอร์, ไม่มีสำเนาเก็บไว้ที่ไหน แม้ตัดอินเทอร์เน็ตหลังโหลดหน้าเว็บแล้วก็ยังใช้งานได้
• รูปแบบถูกต้องตั้งแต่ครั้งแรก — output เป็น base64url ตาม RFC 4648 หัวข้อ 5: ใช้ตัวอักษรที่ปลอดภัยกับ URL และไม่มี padding = สตริงที่ได้วางลง applicationServerKey หรือ library อย่าง web-push ได้ทันทีโดยไม่ต้องแปลงเอง
• เป็น P-256 ECDSA ตามมาตรฐาน — สเปก Web Push (RFC 8291 สำหรับการเข้ารหัสข้อความ, RFC 8292 สำหรับ VAPID) กำหนดใช้เส้นโค้ง P-256 ดังนั้น key เหล่านี้ใช้งานร่วมกับ push service หลักทุกเจ้าได้
• ไม่ต้องติดตั้งอะไรเพิ่ม — ปกติคุณต้องเปิด openssl หรือติดตั้ง npm package กว่าจะได้ key สักคู่ ที่นี่ไม่ต้องใช้ CLI — เปิดหน้าเว็บแล้วกดปุ่ม generate
• ฟรีและไม่ต้องสมัครสมาชิก — ไม่มี account, ไม่มี API key, ไม่จำกัดการใช้งาน

ฟีเจอร์หลัก

มีรายละเอียดน่ารู้สองข้อ:

• public key เป็น EC point แบบ uncompressed ขนาด 65 ไบต์ ที่ขึ้นต้นด้วย marker byte 0x04 ซึ่งเป็นเหตุผลที่ VAPID public key แบบ base64url เกือบทั้งหมดขึ้นต้นด้วยตัว B — ใช้เป็นจุดเช็กสภาพได้สะดวก
• ทั้งสอง key แสดงพร้อมกันเพียงครั้งเดียว — ไม่มี account ไว้กู้คืน จึงควร copy และเก็บทั้งคู่ทันที

วิธีการใช้งาน

1. เปิด VAPID Key Generator — ไม่ต้องสมัครหรือติดตั้ง ใช้ได้กับเบราว์เซอร์สมัยใหม่ทุกตัว
2. กดปุ่ม generate — Web Crypto API จะสร้าง P-256 ECDSA key pair ใหม่ แล้วแสดงทั้งสอง key เป็นรูปแบบ base64url
3. copy และเก็บทั้งสอง key ทันที — private key เก็บใน secrets manager หรือ server environment ส่วน public key เก็บไว้กับ application configuration เครื่องมือกู้คืน key ให้ภายหลังไม่ได้
4. นำ key แต่ละตัวไปวางฝั่งของมัน — ส่ง public key เป็น applicationServerKey ในคำสั่ง subscribe ของเบราว์เซอร์ และโหลด private key จาก environment variable บน push server ของคุณ
5. ทดสอบส่ง notification — เมื่อวางครบสองฝั่ง ลองส่งข้อความหนึ่งฉบับตั้งแต่ต้นจนจบ เพื่อยืนยันว่า subscription และการส่งใช้งานได้จริงก่อนขึ้นของจริง

กลไกการทำงานของ VAPID อย่างละเอียด

ฝ่ายที่เกี่ยวข้องในการส่ง push

Web Push มีสามฝ่าย เบราว์เซอร์ เป็นฝ่าย subscribe โดยติดต่อ push service ที่ผู้ผลิตเบราว์เซอร์เลือกไว้ ซึ่งจะคืน subscription endpoint URL พร้อม encryption material (p256dh และ auth keys) push service — ได้แก่ Google, Mozilla, Apple หรือ Microsoft — เก็บข้อความชั่วคราวแล้วส่งต่อให้เบราว์เซอร์ สุดท้าย application server ของคุณ เป็นคนตัดสินใจว่าจะส่งเมื่อไหร่และเรียก endpoint นั้น VAPID คือสัญญาระหว่างฝ่ายสุดท้ายนี้กับ push service

VAPID ยืนยันตัวตน server อย่างไร

ทุกคำขอส่งข้อความจะแนบ JSON Web Token ที่เซ็นด้วย VAPID private key ด้วยอัลกอริทึม ES256 (ECDSA บน P-256) โดย token ระบุ subject (sub, URL สำหรับติดต่อ), audience (aud, origin ของ push service) และเวลาหมดอายุ (exp) แล้วส่งไปใน header Authorization push service จะตรวจลายเซ็นกับ public key ที่เก็บไว้พร้อม subscription เพื่อยืนยันว่าคำขอมาจาก application server ตัวจริง ไม่ใช่ตัวปลอม — กลไกเดียวกันนี้คือวิธีที่ push service ระบุและจำกัดอัตราการส่งของผู้ส่งแต่ละราย

ทำไมต้อง P-256 และ base64url

สเปกกำหนดใช้ P-256 ทั้งสำหรับลายเซ็น VAPID และการเข้ารหัสข้อความ จึงเป็นเหตุผลที่เครื่องมือนี้ใช้ P-256 primitives ของ Web Crypto โดยตรง ส่วน base64url สำคัญเพราะ key เหล่านี้ต้องเดินทางผ่าน URL, HTTP headers และ JSON payloads ที่ base64 ปกติอยู่ไม่รอด: base64 มาตรฐานใช้ + และ / ซึ่งพังใน URL บวก padding = ที่บาง parser ปฏิเสธ base64url เปลี่ยนเป็น - และ _ พร้อมตัด padding ออก ทำให้สตริงใช้ได้ครบทุกที่ที่จำเป็น

key แต่ละตัวไปอยู่ที่ไหน และควร rotate เมื่อไหร่

public key อยู่ฝั่ง client: ส่งเป็น applicationServerKey ตอนเรียก pushManager.subscribe() และ push service จะเก็บไว้กับ subscription private key อยู่ฝั่ง server เท่านั้น โหลดจาก environment variable หรือ secret manager — ใครถือมันไว้ก็ส่ง push ในนามแอปพลิเคชันของคุณได้ และเนื่องจาก subscription ผูกกับ key pair ที่ใช้ตอน subscribe การ rotate key จะทำให้ push service ปฏิเสธ subscription เก่าจนกว่า user แต่ละคนจะกลับมา subscribe ใหม่ การ rotate บางครั้งจำเป็น เช่น หลังสงสัยว่า key รั่ว แต่ควรทำอย่างมีแผน ไม่ใช่กดเล่น ๆ

กรณีการใช้งานจริง

เพิ่ม web push ให้ PWA

ถ้าคุณทำ PWA ที่มี notification เรียก user กลับมา VAPID คือใบเบิกทาง สร้าง key หนึ่งคู่ ต่อ public key เข้า flow การ subscribe แล้วคุณจะได้ push ตามมาตรฐานที่ใช้ได้ทั้ง Chrome, Firefox, Edge และ Safari

notification server และ background job

traffic push จริงส่วนใหญ่มาจาก backend process — cron runner, queue worker, event pipeline ซึ่งต้องมี private key เป็น configuration โดยสตริง base64url ที่ได้จากเครื่องมือวางลง environment variable แบบ VAPID_PRIVATE_KEY ที่ web-push (Node.js) หรือ pywebpush (Python) ใช้ได้ทันที

แยก key ราย environment

แนวปฏิบัติที่ดีคือหนึ่ง key pair ต่อหนึ่ง environment: development, staging และ production ต่างก็มี key ของตัวเอง วิธีนี้ทำให้การ config ผิดใน staging สแปม user จริงไม่ได้ และ key development ที่รั่วก็ไม่มีค่าอะไรใน production

ใช้สอนและ debug push flow

เพราะเครื่องมือแสดงทั้งสองฝั่งของ key pair เคียงกันในรูปแบบที่ถูกต้อง มันจึงเป็นสื่อการสอนที่ดี: ทีมงานจะเห็นชัดว่าสตริงไหนไปอยู่ใน applicationServerKey สตริงไหนไปอยู่ฝั่ง server — การสลับสองอันนี้เป็นสาเหตุอันดับหนึ่งที่ทำให้การตั้งค่า subscription ล้มเหลว

แนวปฏิบัติที่ดีที่สุด

• ถือว่า private key เท่ากับ password — เก็บใน secrets manager หรือ environment variable ฝั่ง server เท่านั้น ห้าม commit ลง version control หรือฝังในโค้ด client
• สร้างหนึ่ง key pair ต่อหนึ่ง environment — แยก development, staging และ production ออกจากกัน เพื่อไม่ให้ key ของฝั่งหนึ่งไปทำตัวเป็นอีกฝั่งได้
• สำรองข้อมูลอย่างปลอดภัย — private key ที่หายไม่สามารถกู้คืนได้ และการสร้างคู่ใหม่จะทำให้ subscription เดิมทั้งหมดใช้ไม่ได้จนกว่า user จะ subscribe ใหม่
• วางแผน rotate อย่างตั้งใจ — แจ้งล่วงหน้า, จับคู่กับหน้าต่างขอให้ user subscribe ใหม่ และเฝ้าดูจำนวน subscription ช่วงเปลี่ยน
• ใช้รูปแบบ output ตามที่เครื่องมือให้มาเป๊ะ — libraries คาดหวัง base64url ไม่มี padding อย่าห่อ key เป็น PEM หรือใส่ขึ้นบรรทัดใหม่
• จำไว้ว่ามีแค่ฝั่ง private เท่านั้นที่เป็นความลับ — public key ออกแบบมาให้แนบไปกับโค้ด client ได้ ส่วนที่ต้องปกป้องคือ private key

พร้อมสร้าง key ของคุณหรือยัง?

เปิด VAPID Key Generator ฟรี กด generate แล้วคุณจะได้ P-256 key pair รูปแบบ base64url ที่ถูกต้องภายในไม่กี่วินาที — ทั้งหมดในเบราว์เซอร์ของคุณ โดย private key ไม่เคยออกจากเครื่อง

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• WebAuthn Data Decoder — ถอดโครงสร้าง WebAuthn ที่ใช้ COSE P-256 keys เช่นกัน
• OpenSSL Command Generator — สร้างคำสั่ง openssl สำหรับ key และ certificate
• Hash Type Identifier — จำแนกประเภท hash string ที่ไม่รู้จัก

คำถามที่พบบ่อย

ถ: key ที่สร้างได้ถูกส่งไปเซิร์ฟเวอร์ใดหรือไม่?

ตอบ: ไม่ key pair ถูกสร้างในเบราว์เซอร์ของคุณด้วย Web Crypto API แล้วแสดงผลและ copy ในเครื่องเท่านั้น เครื่องมือยังใช้งานได้แม้ตัดอินเทอร์เน็ตหลังโหลดหน้าเว็บแล้ว

ถ: ใช้ key เหล่านี้กับ web-push npm package หรือ pywebpush ได้ไหม?

ตอบ: ได้ ทั้งสองรับ VAPID keys แบบ base64url ตรงตามที่เครื่องมือส่งออก ส่ง public key เป็น applicationServerKey ฝั่ง client และตั้งค่า private key ใน push setup ของ server

ถ: ถ้าทำ private key หายจะเกิดอะไรขึ้น?

ตอบ: กู้คืนไม่ได้ การสร้างคู่ใหม่จะทำให้ subscription เดิมทั้งหมดยังผูกกับ public key ตัวเก่า และการส่งหาพวกเขาจะได้รับ 403 จนกว่า user จะ subscribe ใหม่ — นั่นคือเหตุผลที่ต้องสำรองทันที

ถ: ต้องใช้ VAPID keys แยกกันระหว่างหลายเว็บไซต์ไหม?

ตอบ: ควรใช้ VAPID ระบุตัวตน application server ราย origin การใช้ key pair เดียวร่วมกันหลายเว็บไซต์จะทำให้การระบุแหล่งที่มาและการจำกัดอัตราส่งเสียหาย

ส่ง push อย่างมีความสุข!