← กลับไปหน้าบทเรียนบทที่ 15
15. Deploy ขึ้น Vercel + Security Headers
next.config.ts
typescript
const nextConfig = {
poweredByHeader: false,
async headers() {
return [
{
source: "/:path*",
headers: [
// Content Security Policy
{ key: "Content-Security-Policy", value: contentSecurityPolicy },
// HSTS — 2 years
{ key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
{ key: "X-Content-Type-Options", value: "nosniff" },
{ key: "X-Frame-Options", value: "DENY" },
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
// Permissions Policy — ปิดทุกอย่างที่ไม่ได้ใช้
{ key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=(), payment=()" },
],
},
];
},
};Content Security Policy (CSP)
default-src 'self'
script-src 'self' 'unsafe-inline' # Next.js hydration
style-src 'self' 'unsafe-inline' # Tailwind JIT
img-src 'self' data: blob: https://*.supabase.co
connect-src 'self' https://*.supabase.co wss://*.supabase.co
frame-src 'none' / frame-ancestors 'none' # ป้องกัน clickjacking
upgrade-insecure-requestsVercel Config
json
// .vercel/project.json — auto-generated by Vercel CLIการ Deploy
bash
# Build
npm run build
# TypeScript check
npm run typecheck
# Vercel CLI
npx vercel --prod
# หรือเชื่อม GitHub auto-deploy📥 ดาวน์โหลดฉบับเต็ม
