การจัดการความลับและตัวแปรสภาพแวดล้อม

ในแอปพลิเคชันรีแอกต์ ตัวแปรสภาพแวดล้อมแบ่งเป็นสองประเภท ได้แก่ ฝั่งเซิร์ฟเวอร์ (ไม่เคยส่งไปยังเบราว์เซอร์) และฝั่งไคลเอนต์ (ฝังอยู่ในชุดรวม JavaScript) การทำความเข้าใจว่าตัวแปรของคุณอยู่ในประเภทใดคือขั้นตอนแรกของการจัดการข้อมูลลับ เพราะตัวแปรฝั่งไคลเอนต์ถือเป็นข้อมูลสาธารณะได้ทันทีเมื่อเผยแพร่ชุดรวมแล้ว

ในโครงการไวต์ เฉพาะตัวแปรที่มีคำนำหน้า VITE_ เท่านั้นที่จะถูกรวมไว้ในชุดรวมฝั่งไคลเอนต์ VITE_PUBLIC_API_URL=https://api.example.com สามารถเข้าถึงได้จากโค้ดในเบราว์เซอร์ผ่าน import.meta.env.VITE_PUBLIC_API_URL ตัวแปรอื่นทั้งหมดจะถูกตัดออกจากชุดรวมขณะสร้าง และยังคงอยู่เฉพาะฝั่งเซิร์ฟเวอร์

ใน Next.js คำนำหน้า NEXT_PUBLIC_ จะเปิดเผยตัวแปรให้ JavaScript ในเบราว์เซอร์เข้าถึงได้ NEXT_PUBLIC_ANALYTICS_ID=UA-123 จะถูกฝังไว้ในชุดรวมฝั่งไคลเอนต์ ตัวแปรที่ไม่มีคำนำหน้านี้ (เช่น DATABASE_URL) จะเข้าถึงได้เฉพาะในโค้ดฝั่งเซิร์ฟเวอร์ (คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ เส้นทางเอพีไอ และการดำเนินการฝั่งเซิร์ฟเวอร์) และจะไม่ถูกส่งไปยังเบราว์เซอร์

ตัวแปรที่ไม่มีคำนำหน้าก็ยังอาจถูกเข้าถึงได้หากมีการแปลงเป็นข้อมูลอนุกรมโดยไม่ตั้งใจ ตัวอย่างเช่น หากคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ส่งออบเจ็กต์การกำหนดค่าทั้งหมดเป็นพร็อพไปยังคอมโพเนนต์ฝั่งไคลเอนต์ และการกำหนดค่านั้นมี DATABASE_URL ข้อมูลลับดังกล่าวจะปรากฏใน HTML ที่ส่งไปยังเบราว์เซอร์ การส่งพร็อพอย่างระมัดระวังและการตรวจสอบการแปลงเป็นข้อมูลอนุกรมจะช่วยป้องกันปัญหานี้

สิ่งต่อไปนี้ต้องไม่ปรากฏในชุดรวมฝั่งไคลเอนต์: สตริงการเชื่อมต่อฐานข้อมูลและรหัสผ่าน คีย์ลับเอพีไอของบริการภายนอก (คีย์ลับของสตริปและคีย์เอพีไอของ OpenAI) คีย์ส่วนตัว RSA/EC ข้อมูลลับสำหรับลงลายเซ็นโทเค็นเว็บ JSON และโทเค็นยืนยันตัวตนของบริการภายใน หากจำเป็นต้องใช้สิ่งใดในรายการนี้เพื่อเรียกเอพีไอ ให้ส่งการเรียกนั้นผ่านจุดปลายทางฝั่งเซิร์ฟเวอร์

รูปแบบแบ็กเอนด์สำหรับส่วนหน้า (BFF) วางชั้นเซิร์ฟเวอร์ขนาดเล็กไว้ระหว่างแอปรีแอกต์กับบริการภายนอกที่มีข้อมูลอ่อนไหว ไคลเอนต์เรียก /api/stripe/charge เซิร์ฟเวอร์ BFF แนบคีย์ลับของสตริปแล้วเรียกเอพีไอของสตริป จากนั้น BFF ส่งกลับเฉพาะข้อมูลการตอบกลับที่จำเป็น ข้อมูลลับจะคงอยู่บนเซิร์ฟเวอร์ตลอดเวลา

ดอตอีเอ็นวี-วอลต์เข้ารหัสไฟล์ .env ของคุณ และช่วยให้สามารถแบ่งปันและนำไปใช้งานอย่างปลอดภัยในสภาพแวดล้อมต่าง ๆ โดยไม่ต้องบันทึกข้อมูลลับแบบข้อความธรรมดาไว้ในระบบควบคุมเวอร์ชัน ทางเลือกสำหรับการใช้งานจริง ได้แก่ HashiCorp Vault (ระดับองค์กร), AWS Parameter Store (SSM) และ GCP Secret Manager ซึ่งทั้งหมดรองรับการดึงข้อมูลลับผ่านเอพีไอขณะทำงาน แทนการดึงในเวลาสร้าง

แพลตฟอร์มการผสานรวมและส่งมอบอย่างต่อเนื่อง (การดำเนินการของ GitHub และการผสานรวมต่อเนื่องของ GitLab) มีพื้นที่จัดเก็บข้อมูลลับแบบเข้ารหัส ซึ่งเข้าถึงได้ในรูปตัวแปรสภาพแวดล้อมระหว่างการสร้าง ให้จัดเก็บข้อมูลลับไว้ในพื้นที่ Secrets ของ GitHub และอ้างอิงในกระบวนการทำงานด้วย ${{ secrets.STRIPE_SECRET_KEY }} ข้อมูลลับจะถูกปกปิดในบันทึก และจะไม่ถูกรวมไว้ในผลงานที่สร้าง

Next.js และไวต์รองรับไฟล์ .env หลายไฟล์: .env (ทุกสภาพแวดล้อม), .env.local (ค่าทับในเครื่อง ซึ่งไม่รวมในการติดตามของระบบควบคุมเวอร์ชัน), .env.development และ .env.production ไฟล์ในเครื่องจะแทนที่ค่าจากไฟล์ที่ใช้ร่วมกัน ทำให้สามารถกำหนดค่าเฉพาะสำหรับนักพัฒนาแต่ละคนได้โดยไม่กระทบสภาพแวดล้อมอื่น

หลังจากสร้างแล้ว ให้ตรวจสอบชุดรวม JavaScript เพื่อหาข้อมูลลับที่อาจถูกเปิดเผยโดยไม่ตั้งใจ เรียกใช้ grep -r "password|secret|api_key" dist/ หรือใช้เครื่องมือเฉพาะทางอย่างการวิเคราะห์ด้วย strings กับไฟล์ที่สร้าง ข้อมูลลับบางอย่างหากถูกใส่ไว้โดยไม่ตั้งใจจะสังเกตได้ชัดจากรูปแบบ เช่น ตัวระบุเฉพาะแบบยูยูไอดี สตริงเบส64 หรือคำนำหน้าคีย์อย่าง sk_live_

แต่ละสภาพแวดล้อมและแต่ละบริการควรเข้าถึงเฉพาะข้อมูลลับที่จำเป็นต้องใช้เท่านั้น ไคลเอนต์รีแอกต์ไม่จำเป็นต้องมีข้อมูลลับใด ๆ เลย — ควรได้รับเพียงตัวระบุสาธารณะ เซิร์ฟเวอร์ BFF ต้องการเฉพาะข้อมูลลับที่จำเป็นสำหรับเอพีไอที่เรียกใช้ สภาพแวดล้อมการพัฒนาควรใช้คีย์เอพีไอที่ไม่ใช่ของระบบจริง มีสิทธิ์จำกัดและกำหนดเพดานค่าใช้จ่ายไว้

จะเกิดอะไรขึ้นกับตัวแปรสภาพแวดล้อมของ Next.js ที่มีคำนำหน้า NEXT_PUBLIC_

ไวต์ใช้ VITE_ และ Next.js ใช้ NEXT_PUBLIC_ เพื่อเปิดเผยตัวแปรให้ชุดรวมฝั่งไคลเอนต์เข้าถึงได้ ตัวแปรอื่นทั้งหมดมีไว้เฉพาะฝั่งเซิร์ฟเวอร์เท่านั้น อย่าใส่รหัสผ่านฐานข้อมูล คีย์ลับเอพีไอ หรือข้อมูลลับสำหรับลงลายเซ็นโทเค็นเว็บ JSON ไว้ในโค้ดฝั่งไคลเอนต์ ใช้รูปแบบ BFF เพื่อส่งการเรียกเอพีไอที่มีข้อมูลอ่อนไหวผ่านตัวกลาง ใช้ดอตอีเอ็นวี-วอลต์ AWS Parameter Store หรือ Secrets ของ GitHub เพื่อจัดการข้อมูลลับในระบบจริง และตรวจสอบชุดรวมที่สร้างแล้วเพื่อหาข้อมูลลับที่อาจถูกเปิดเผยโดยไม่ตั้งใจ