ตัวแปรสภาพแวดล้อมและความลับคืออะไร คู่มือฉบับเข้าใจง่าย

ตัวแปรสภาพแวดล้อม (environment variable) คือการตั้งค่าที่มีชื่อ เช่น DATABASE_URL หรือ STRIPE_SECRET_KEY ซึ่งส่งให้แอปของคุณตอนรัน แทนที่จะเขียนค่าไว้ในโค้ด ความลับ (secret) คือตัวแปรสภาพแวดล้อมที่ค่าต้องเป็นส่วนตัว เช่น API key รหัสผ่าน หรือคีย์ลงลายมือชื่อ การเก็บค่าเหล่านี้ไว้นอกโค้ดทำให้คุณเปลี่ยนค่าได้โดยไม่ต้องแก้แอป ใช้ค่าต่างกันสำหรับการทดสอบและลูกค้าจริง และป้องกันไม่ให้รั่วไหลเมื่อคุณแชร์หรือเผยแพร่โค้ด

ทำไมเรื่องนี้สำคัญเมื่อสร้างแอปด้วย AI

ทันทีที่แอปของคุณทำงานร่วมกับบริการอื่น เช่น รับชำระเงิน ส่งอีเมล หรือเรียกโมเดล AI แอปจะต้องมีคีย์ ตัวสร้างแอปด้วย AI มักขอคีย์เหล่านี้อยู่เสมอ และตำแหน่งที่คีย์ไปอยู่นั้นจะเป็นตัวกำหนดว่าแอปของคุณปลอดภัยหรือไม่

มีสองเรื่องที่มักผิดพลาดในแอปที่สร้างด้วย AI:

• คีย์ถูกวางลงในแชตหรือในโค้ด คีย์จะไปอยู่ในประวัติแชท ไฟล์โปรเจกต์ และไฟล์ส่งออกหรือที่เก็บโค้ดทุกแห่ง ใครเห็นก็ใช้บัญชีของคุณได้
• คีย์ถูกใช้ในเบราว์เซอร์ ถ้าโค้ดที่เรียก Stripe หรือ OpenAI ทำงานในหน้าเว็บ คีย์จะถูกส่งไปยังผู้เข้าชมทุกคน มีคนคอยดูอยู่จริง และเครื่องมือสแกนอัตโนมัติก็ค้นหาคีย์ที่หลุดอยู่ตลอดเวลา

การเข้าใจตัวแปรสภาพแวดล้อมช่วยให้คุณเห็นทั้งสองปัญหาและขอให้แก้ไขได้

ตัวอย่างใกล้ตัว: ตู้เซฟในโรงแรม

โค้ดของแอปเปรียบเหมือนห้องพักในโรงแรม แขก (รวมถึงแม่บ้านและทุกคนที่คุณให้บัตรคีย์) เดินผ่านห้องนี้ได้ คุณคงไม่วางพาสปอร์ตไว้บนโต๊ะ

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

วิธีการทำงาน

โค้ดของคุณอ้างถึงชื่อ ไม่ใช่ค่า ในภาษา JavaScript ที่ทำงานบนเซิร์ฟเวอร์ โค้ดจะหน้าตาแบบ process.env.STRIPE_SECRET_KEY เมื่อแอปเริ่มทำงาน แพลตฟอร์มที่รันแอปจะใส่ค่าให้กับชื่อนั้น เปลี่ยนค่าในการตั้งค่าของแพลตฟอร์ม รีสตาร์ตหรือปล่อยใช้งานใหม่ แอปก็จะใช้ค่าใหม่โดยไม่ต้องแก้โค้ด

ค่าจะมาจากไหนขึ้นอยู่กับที่ที่แอปทำงาน:

ตัวแปรสาธารณะกับตัวแปรลับ

ไม่ใช่ตัวแปรสภาพแวดล้อมทุกตัวที่เป็นความลับ ควรแยกออกเป็นสองกลุ่ม:

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

ตัวอย่างจริง: ปุ่มสรุปด้วย AI

คุณต้องการปุ่ม “สรุปโน้ตนี้” ที่เรียกโมเดล AI

เวอร์ชันที่ไม่ปลอดภัย: โค้ดของปุ่มทำงานในเบราว์เซอร์และเรียกผู้ให้บริการ AI โดยตรง พร้อมเขียน API key ไว้ในโค้ด ใช้งานได้ในพรีวิว แต่ก็หมายความว่าใครก็ได้เปิดเครื่องมือนักพัฒนาของเบราว์เซอร์ คัดลอกคีย์ และใช้งานจนค่าใช้จ่ายในบัญชีของคุณพุ่งสูง

เวอร์ชันที่ปลอดภัย:

1. คุณสร้างคีย์ที่ผู้ให้บริการ AI แล้วเก็บเป็นความลับชื่อ OPENAI_API_KEY (หรือชื่อที่คล้ายกัน) ในการตั้งค่าโปรเจกต์
2. ฝั่ง backend มีเส้นทาง POST /api/summarise ที่อ่าน process.env.OPENAI_API_KEY ตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้แล้ว และเรียกผู้ให้บริการ
3. ปุ่มเรียกเส้นทาง ของคุณ ไม่ใช่ผู้ให้บริการ เบราว์เซอร์จึงไม่เคยเห็นคีย์
4. เพิ่มความลับเดียวกันในการตั้งค่าของแอปที่เผยแพร่แล้ว แล้วปล่อยใช้งานใหม่ เพื่อให้เว็บไซต์จริงมีคีย์ด้วย

รูปแบบนี้ ซึ่งเบราว์เซอร์เรียกเซิร์ฟเวอร์ของคุณ และเซิร์ฟเวอร์เก็บคีย์และเรียกบริการ ใช้ได้กับการชำระเงิน อีเมล แผนที่ และ API ที่มีค่าใช้จ่ายทุกตัว คู่มือการใช้ LLM API อธิบายกรณีของ AI อย่างละเอียดกว่านี้

คำศัพท์สำคัญ

• ไฟล์ .env: ไฟล์ข้อความที่มีบรรทัด ชื่อ=ค่า ใช้ตอนพัฒนาในเครื่อง ใส่ไว้ใน .gitignore เพื่อไม่ให้ถูก commit
• .env.example: สำเนาที่มีแต่ชื่อ ไม่มีค่าจริง commit ไว้เพื่อให้คนอื่นรู้ว่าต้องตั้งค่าอะไรบ้าง
• Rotate (เปลี่ยนคีย์): แทนที่ความลับด้วยค่าใหม่ และเพิกถอนค่าเก่า
• ขอบเขต / สิทธิ์: ผู้ให้บริการหลายรายให้สร้างคีย์ที่ทำได้เฉพาะบางอย่าง คีย์ที่ส่งอีเมลได้อย่างเดียวจะอันตรายน้อยกว่าคีย์ที่ทำได้ทุกอย่าง
• คีย์ทดสอบ กับ คีย์ใช้งานจริง: ผู้ให้บริการอย่าง Stripe ให้คีย์แยกสำหรับการทดสอบและสำหรับเงินจริง ใช้คีย์ทดสอบจนกว่าจะเปิดตัว
• Signing secret: ความลับที่ใช้ตรวจว่าข้อความ เช่น webhook มาจากผู้ส่งที่ถูกต้องจริง

ความเข้าใจผิดและข้อผิดพลาดที่พบบ่อย

• “repository ของฉันเป็นส่วนตัว ดังนั้นใส่คีย์ไว้ได้” repository ส่วนตัวก็ถูกแชร์ fork ส่งออก และโคลนไปยังแล็ปท็อปได้ คีย์ก็ไม่ควรอยู่ตรงนั้น ถ้าคุณเชื่อมโปรเจกต์กับ GitHub ให้ตรวจว่าไม่มีไฟล์ .env รวมอยู่ด้วย
• “ฉันลบแล้ว ก็หายไปแล้ว” Git เก็บประวัติไว้ และประวัติแชทก็เก็บข้อความไว้ ถ้าคีย์เคยหลุดออกไป ให้เปลี่ยนคีย์ใหม่
• ใส่คำนำหน้าสาธารณะให้ความลับ VITE_OPENAI_KEY จะทำให้คีย์ของคุณไปอยู่ในไฟล์ที่เบราว์เซอร์โหลด
• ลืมปล่อยใช้งานใหม่ การเปลี่ยนตัวแปรในการตั้งค่ามักมีผลหลังจากแอปรีสตาร์ตหรือเผยแพร่อีกครั้งเท่านั้น
• คีย์เดียวสำหรับทุกอย่าง การแยกคีย์ทดสอบกับคีย์จริง และแยกตามแอป ทำให้เพิกถอนคีย์หนึ่งได้โดยไม่กระทบส่วนอื่น
• ไม่มีขีดจำกัดการใช้จ่าย สำหรับ API ที่คิดเงิน ให้ตั้งงบหรือขีดจำกัดในแดชบอร์ดของผู้ให้บริการ เผื่อกรณีที่คีย์หลุด

สิ่งที่ควรขอจากตัวสร้างแอปด้วย AI

• “อ่านคีย์ Stripe secret จากตัวแปรสภาพแวดล้อมชื่อ STRIPE_SECRET_KEY ใช้เฉพาะบนเซิร์ฟเวอร์”
• “ตรวจให้แน่ใจว่าไม่มีความลับถูกใช้ในโค้ดฝั่ง client และไม่ใส่คำนำหน้า VITE_ / NEXT_PUBLIC_”
• “สร้างไฟล์ .env.example ที่ระบุตัวแปรทุกตัวที่แอปต้องใช้ โดยไม่ใส่ค่า และตรวจว่า .env ถูก git ignore”
• “ตรวจไฟล์ frontend ที่ build แล้วว่ามีสตริงใดที่หน้าตาเหมือน API key หรือไม่”

เช็กลิสต์ความปลอดภัยสำหรับแอปที่สร้างด้วย AI ของเราครอบคลุมเรื่องความลับควบคู่กับการตรวจอื่น ๆ ก่อนเปิดตัว

ความลับบน Mythex

บน Mythex ความลับคือตัวแปรสภาพแวดล้อมของโปรเจกต์ที่ถูกใส่ทั้งในแซนด์บ็อกซ์ของพรีวิวและในแอปที่เผยแพร่แล้ว คุณเพิ่มได้ที่ การตั้งค่าโปรเจกต์ → Secrets หรือพิมพ์ /secrets ในแชต เมื่อเอเจนต์ต้องใช้คีย์ จะแสดงการ์ดความลับในแชต ทำให้ค่าถูกกรอกลงในช่องฟอร์ม ไม่ไปปรากฏในบทสนทนา ถ้าคุณเปลี่ยนความลับของแอปที่ใช้งานจริง ให้เผยแพร่อีกครั้งเพื่อให้การปล่อยใช้งานรับค่าใหม่ การส่งออกโปรเจกต์ไม่รวมความลับ และไฟล์ .env ที่นำเข้าจะถูกลบออก ให้คุณใส่ใหม่ในการตั้งค่า ดู ตัวแปรสภาพแวดล้อมและความลับ และ ความลับในแชต ในเอกสาร

คำถาม