API Key คืออะไร เก็บในไฟล์ .env ยังไงไม่ให้หลุดขึ้น GitHub

เวลามีน้องๆ ที่เพิ่งเริ่มเล่นกับ ChatGPT API, Gemini API หรือ Claude API ถามทีมเราว่า "ได้ API Key มาแล้ว เป็นตัวอักษรยาวๆ หนึ่งชุด ต้องเอาไปแปะไว้ตรงไหนในโค้ด" คำตอบที่เราตอบบ่อยที่สุดคือ "ที่ไหนก็ได้ ยกเว้นในโค้ด" ฟังดูเหมือนมุก แต่เป็นคำตอบที่จริงจังที่สุดเท่าที่เราให้ได้

ที่ต้องจริงจังกว่าเดิมเพราะช่วงหลังมีทางรั่วใหม่เพิ่มเข้ามา คือ AI ที่ช่วยเราเขียนโค้ดเอง ทั้งการ Copy โค้ดทั้งไฟล์ไปถาม ChatGPT และการเปิด AI Coding Agent ให้อ่านโปรเจกต์ทั้งโฟลเดอร์ ถ้า Key ยังนอนอยู่ในโค้ด มันก็เดินทางไปกับโค้ดทุกที่

วันนี้ Superdev Academy จะพาไปดูว่า API Key คืออะไร ทำไมมันหลุดง่ายกว่าที่คิด นิสัย 3 ข้อที่ควรทำตั้งแต่โปรเจกต์แรก และถ้าวันหนึ่งมันหลุดไปแล้ว ต้องทำอะไรก่อนหลัง

API Key คืออะไร พูดง่ายๆ คือรหัสผ่านที่ผูกกับบัญชีจ่ายเงินของคุณ

ถ้ายังไม่แน่ใจว่า API คืออะไร แนะนำให้อ่าน API คืออะไร ก่อน แล้วค่อยกลับมาอ่านต่อ ส่วนบทความนี้จะโฟกัสแค่ "กุญแจ" ที่ใช้เปิดประตู API

API Key คือรหัสชุดหนึ่งที่ผู้ให้บริการออกให้ เพื่อให้โปรแกรมของคุณยืนยันตัวตนได้ทุกครั้งที่ส่ง Request (คำขอ) ไปหาเซิร์ฟเวอร์ของเขา เซิร์ฟเวอร์ไม่รู้หรอกว่าใครนั่งพิมพ์อยู่หน้าจอ มันรู้แค่ว่า Request นี้ถือ Key ของบัญชีไหนมา แล้วก็คิดค่าใช้งานเข้าบัญชีนั้น ถ้าส่ง Key ผิดหรือ Key ถูกยกเลิกไปแล้ว เซิร์ฟเวอร์จะตอบกลับเป็น Error 401 ซึ่งอ่านความหมายของรหัสแบบนี้ได้ใน HTTP Status Code คืออะไร

Anthropic อธิบายไว้ตรงที่สุดในหน้า API Key Best Practices ว่า API Key เหมือนหมายเลขบัตรเครดิต ถ้ามีคนได้ Key ของคุณไปแล้วเอาไปใช้ ค่าใช้จ่ายจะถูกเรียกเก็บจากคุณ

API Key ไม่ใช่แค่รหัสเข้าระบบ มันคือรหัสที่ใช้เงินในบัญชีคุณได้

Key ของแต่ละเจ้าได้มาจากคนละที่ ของ OpenAI มาจาก OpenAI Platform ของ Gemini มาจาก Google AI Studio ของ Claude มาจาก Claude Console แต่กติกาการเก็บรักษาเหมือนกันทุกเจ้า

ทำไม API Key ถึงหลุดง่ายกว่าที่คิด

GitHub เปิดเผยในบล็อกเมื่อวันที่ 1 เมษายน 2025 ว่า ตลอดปี 2024 มีข้อมูลลับ (Secret) หลุดบน GitHub มากกว่า 39 ล้านรายการ ตัวเลขนี้รวมทุกประเภท ทั้ง API Key, รหัสผ่าน และ Token ไม่ได้นับเฉพาะ Key ของบริการ AI แต่ก็พอบอกได้ว่าเรื่องนี้ไม่ใช่ความผิดพลาดของคนส่วนน้อย

ไม่ต้องรู้สึกผิดถ้าคุณเคยเกือบพลาด เพราะทางรั่วส่วนใหญ่ไม่ได้มาจากความประมาทแบบโจ่งแจ้ง มันมาจากความสะดวกเล็กๆ ที่เราทำกันทุกวัน

• Hardcode ไว้ในโค้ด: เขียน Key ลงไปในไฟล์ .py หรือ .js ตรงๆ เพื่อให้รันได้เร็ว แล้วลืมเอาออกก่อน Push ขึ้น GitHub

• ใส่ไว้ในโค้ดฝั่ง Frontend: โค้ดที่รันในเบราว์เซอร์ ใครเปิดเว็บก็ดูได้ทุกบรรทัด

• Copy ไปถามในแชต: วางโค้ดทั้งไฟล์ให้ ChatGPT หรือ Claude ช่วยแก้ Bug โดยไม่ได้สังเกตว่ามี Key ติดไปด้วย

• AI Coding Agent อ่านทั้งโฟลเดอร์: เครื่องมืออย่าง Claude Code ทำงานโดยอ่านไฟล์ในโปรเจกต์ ถ้าไม่ได้กันไว้ ไฟล์ที่เก็บ Key ก็อยู่ในสายตาของมันด้วย

สองข้อหลังเป็นทางรั่วแบบใหม่ของยุค AI หลักการเดียวกับที่ Anthropic เตือนไว้ในหน้าเดียวกันเรื่องเครื่องมือของบุคคลที่สาม (เช่น IDE บนเว็บหรือระบบ CI/CD) ว่า การเอา Key ไปใส่ในเครื่องมือของคนอื่น เท่ากับให้ผู้พัฒนาเครื่องมือนั้นเข้าถึงบัญชีของคุณได้

นิสัยที่ 1: เก็บ Key ไว้ในไฟล์ .env

ไฟล์ .env คือไฟล์ข้อความธรรมดาที่วางไว้ในโฟลเดอร์โปรเจกต์ เก็บค่าลับเป็นบรรทัดแบบ ชื่อ=ค่า ตอนรันโปรแกรม ค่าพวกนี้จะถูกโหลดเข้าไปเป็น Environment Variable (ตัวแปรสภาพแวดล้อม) โค้ดของเราแค่เรียกชื่อตัวแปร ไม่ต้องรู้ค่าจริงเลย

หน้าตาไฟล์ .env ประมาณนี้ ค่าในตัวอย่างเป็นค่าสมมติทั้งหมด

# .env  (ห้ามขึ้น GitHub)
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
GEMINI_API_KEY=your-gemini-key-here
ANTHROPIC_API_KEY=your-claude-key-here

ฝั่ง Python ใช้แพ็กเกจ python-dotenv ตามตัวอย่างที่ Anthropic ให้ไว้

from dotenv import load_dotenv
import os

load_dotenv()
api_key = os.getenv("ANTHROPIC_API_KEY")

ฝั่ง Node.js ใช้แพ็กเกจ dotenv แล้วอ่านผ่าน process.env

require("dotenv").config();
const apiKey = process.env.OPENAI_API_KEY;

เรื่องชื่อตัวแปรมีรายละเอียดเล็กๆ ที่ช่วยได้เยอะ เอกสารของ Google ระบุว่า SDK ของ Gemini จะอ่าน GEMINI_API_KEY หรือ GOOGLE_API_KEY ให้อัตโนมัติ ตั้งชื่อให้ตรงตั้งแต่แรกก็ไม่ต้องส่ง Key ผ่านโค้ดเลยสักบรรทัด ถ้าอยากเห็นการจัดการ Config ที่ละเอียดขึ้น ทั้งฝั่ง Go และ Node.js ต่อได้ที่ JS2GO EP.26 การใช้ Environment Variables และ Configurations

นิสัยที่ 2: ใส่ .env ไว้ใน .gitignore ก่อน commit แรก

ไฟล์ .env ช่วยแยก Key ออกจากโค้ดก็จริง แต่ถ้าไฟล์ .env ถูก commit ขึ้นไปด้วย ก็เท่ากับไม่ได้แยกอะไรเลย ขั้นนี้จึงต้องมาคู่กันเสมอ

ไฟล์ .gitignore คือรายชื่อไฟล์ที่บอก Git ว่า "ไม่ต้องสนใจไฟล์พวกนี้" เพิ่มบรรทัดนี้ลงไป

# .gitignore
.env
.env.*
!.env.example

บรรทัดสุดท้ายคือทริกที่ทีมส่วนใหญ่ใช้กัน สร้างไฟล์ .env.example ที่มีแต่ชื่อตัวแปร ไม่มีค่าจริง แล้ว commit ไฟล์นี้ขึ้นไปแทน คนที่ Clone โปรเจกต์ไปจะรู้ว่าต้องเตรียม Key อะไรบ้าง โดยที่ไม่มีใครเห็น Key ของคุณ

จุดที่มือใหม่พลาดบ่อยที่สุดคือลำดับ เอกสารของ Git ระบุชัดว่า .gitignore ไม่มีผลกับไฟล์ที่ Git ติดตาม (Track) อยู่แล้ว ถ้าเผลอ commit .env ไปก่อนแล้วค่อยมาเพิ่มใน .gitignore ทีหลัง Git จะยังติดตามไฟล์นั้นต่อ ต้องรัน git rm --cached .env เพื่อเลิกติดตามก่อน ถ้ายังไม่คล่องเรื่อง commit กับ push ลองอ่าน GitHub คืออะไร ประกอบ

นิสัยที่ 3: อย่าวาง Key ในที่ที่คนอื่นมองเห็นได้

สองข้อแรกกันไม่ให้ Key ขึ้น GitHub ข้อนี้กันทางรั่วที่เหลือ ซึ่งมีสามที่หลักๆ

โค้ด Frontend: อะไรก็ตามที่ส่งไปรันในเบราว์เซอร์ ผู้ใช้เปิดดูได้หมด เอกสารของ Vite เตือนตรงๆ ว่าตัวแปรที่ขึ้นต้นด้วย VITE_ จะถูกฝังลงในโค้ดตอน Build และไม่ควรใส่ข้อมูลลับอย่าง API Key ส่วนเอกสาร Gemini API ก็บอกว่าอย่า Hardcode Key ลงในเว็บหรือแอปมือถือ ให้มี Backend เป็นตัวกลางถือ Key แล้วให้ Frontend เรียกผ่าน Backend อีกที

แชตกับ AI: ก่อนวางโค้ดให้ ChatGPT หรือ Claude ช่วยดู ให้กวาดตาหาบรรทัดที่มี Key ก่อนทุกครั้ง ถ้าโค้ดอ่าน Key จาก .env อยู่แล้ว ปัญหานี้จะหายไปเองเกือบทั้งหมด เพราะในโค้ดมีแค่ชื่อตัวแปร

AI Coding Agent: เครื่องมือพวกนี้ตั้งค่ากันไม่ให้อ่านไฟล์บางไฟล์ได้ ตัวอย่างในเอกสารการตั้งค่าของ Claude Code คือการใส่ Read(./.env) ไว้ในรายการ deny ของ Permission เพื่อไม่ให้มันเปิดไฟล์ .env เลย ถ้าคุณเริ่มใช้ Agent ช่วยเขียนโค้ดแล้ว ลองอ่าน ทำงานกับ AI Coding Agent ยังไง ประกอบด้วย

Repository เป็น Private อยู่แล้ว ไม่ต้องทำก็ได้ไม่ใช่เหรอ

จริงๆ ก็มีเหตุผลนะ ถ้า Repo เป็น Private ทำคนเดียว คนนอกก็มองไม่เห็นไฟล์ในนั้นอยู่แล้ว ความเสี่ยงวันนี้ต่ำกว่า Public Repo มาก

แต่ Private ไม่ได้แปลว่าจะ Private ตลอดไป วันหนึ่งคุณอาจเปิด Repo เป็น Public เพื่อใส่ใน Portfolio อาจชวนเพื่อนเข้ามาช่วยทำ หรืออาจเชื่อม Repo กับเครื่องมือภายนอกอีกหลายตัว และทุกครั้งที่ทำแบบนั้น Key ที่เคย commit ไว้ใน History ก็ถูกเปิดไปด้วย เพราะ Git จำทุก commit ที่เคยเกิดขึ้น ไม่ใช่แค่สภาพไฟล์ล่าสุด

อีกเหตุผลคือนิสัย คนที่ทำ .env กับ .gitignore จนเป็นมือแล้ว จะไม่พลาดในวันที่โปรเจกต์สำคัญจริง

ถ้า API Key หลุดไปแล้ว ทำตามลำดับนี้

สัญชาตญาณแรกของหลายคนคือรีบลบไฟล์แล้ว commit ใหม่ ซึ่งเป็นลำดับที่ผิด เพราะ Key ยังอยู่ใน History และยังใช้งานได้ ลำดับที่ถูกเป็นแบบนี้

1. Revoke หรือ Rotate Key ทันที: เข้าไปลบ Key เก่าในหน้าจัดการ Key ของผู้ให้บริการ แล้วสร้าง Key ใหม่ เอกสารของ GitHub ระบุว่าถ้าข้อมูลที่หลุดเป็น Secret ขั้นแรกคือ Revoke หรือ Rotate ก่อน เพราะเมื่อ Key ใช้ไม่ได้แล้ว คนที่ Clone ไปก็เอาไปทำอะไรต่อไม่ได้

2. ใส่ Key ใหม่ลงในไฟล์ .env: แล้วเช็กว่า .env อยู่ใน .gitignore จริง

3. ดูหน้า Usage ของบัญชี: เช็กว่ามีการเรียกใช้ที่คุณไม่ได้ทำหรือเปล่า ถ้ามี ให้ติดต่อผู้ให้บริการ

4. ค่อยล้าง History: GitHub แนะนำเครื่องมือ git-filter-repo สำหรับลบข้อมูลลับออกจาก History ขั้นนี้ทำทีหลังได้ เพราะ Key เก่าตายไปแล้วตั้งแต่ข้อ 1

Fun Fact: Anthropic เข้าร่วมโครงการ Secret Scanning Partner ของ GitHub ถ้า Key ของ Claude โผล่ใน Public Repo บน GitHub ทาง Anthropic จะปิด Key นั้นให้อัตโนมัติและส่งอีเมลแจ้ง แต่นั่นคือตาข่ายกันตก ไม่ใช่เหตุผลให้ประมาท และไม่ได้ช่วยในกรณีที่ Key หลุดทางแชตหรือทาง Frontend

ถ้าอยากเห็นภาพกว้างของการเขียนโค้ดให้ปลอดภัย นอกจากเรื่อง API Key อ่านต่อได้ที่ เทคนิค Secure Coding ที่มือใหม่ต้องรู้

สรุป: API Key คืออะไร และเก็บยังไงไม่ให้หลุด

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

• เก็บ Key ไว้ในไฟล์ .env

• ใส่ .env ไว้ใน .gitignore

• Key หลุดให้ Revoke ก่อน

และจำไว้ว่าโค้ด Frontend แชตกับ AI และ AI Coding Agent ก็คือที่ที่คนอื่นมองเห็นได้เหมือนกัน

ถ้าวันนี้ในโปรเจกต์ของคุณยังมี Key อยู่ในโค้ด ไม่ต้องตกใจ ใช้เวลาสิบนาทีย้ายมันไปไว้ใน .env เพิ่มบรรทัดใน .gitignore แล้วสร้าง Key ใหม่แทนตัวเก่าไปเลย แค่นี้โปรเจกต์ถัดไปของคุณก็เริ่มจากนิสัยที่ถูกแล้ว

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

Facebook: Superdev School (Superdev) — https://www.facebook.com/superdev.school.th

Instagram: superdevschool — https://www.instagram.com/superdevschool/

TikTok: superdevschool — https://www.tiktok.com/@superdevschool

Website: www.superdevacademy.com — https://www.superdevacademy.com/