Chương 11: An toàn là bạn - Testing & Security

Web chạy được rồi. Nhưng liệu nó có sập khi 100 người vào? Liệu nó có bị hack? Chương này là tấm khiên bảo vệ thành quả của bạn.

11.1 Testing - Kiểm thử tự động (Cho người lười)

Đừng test bằng cơm (Bấm tay thủ công).

11.1.1 Unit Test (Test từng hàm nhỏ)

• Nhờ AI viết Test: "Viết test case Jest cho hàm tinhTongTien(cart). Đảm bảo nó tính đúng khi giỏ hàng rỗng, và khi có mã giảm giá."
• Chạy lệnh npm test. Nếu xanh hết là yên tâm ngủ ngon.

11.1.2 E2E Test (Test người dùng thật) - Playwright

AI có thể viết kịch bản cho con robot tự mở Chrome lên, tự click mua hàng.

• Prompt: "Viết kịch bản Playwright: Vào trang chủ -> Click sản phẩm đầu tiên -> Bấm Add to Cart -> Vào trang Cart -> Kiểm tra xem có sản phẩm đó không."
• Bạn có thể setup cái này chạy tự động mỗi ngày để đảm bảo web không chết bất đắc kỳ tử.

11.2 Security - Những cái bẫy chết người

11.2.1 SQL Injection

Nếu bạn dùng Supabase Client (supabase.from...) hoặc ORM (Prisma), bạn đã an toàn 99%. Nếu bạn tự viết câu lệnh SQL nối chuỗi ("SELECT * FROM users WHERE name = '" + input + "'"), bạn sẽ chết. Luôn dùng Parameterized Query. (AI mặc định làm đúng, nhưng hãy nhắc nó).

11.2.2 IDOR (Lỗ hổng "Xem trộm đơn hàng") - Kinh điển

• Kịch bản: User vào xem đơn hàng /order/100. Họ tò mò sửa link thành /order/101.
• Hậu quả: Nếu server không check, họ sẽ thấy đơn của người khác.
• Giải pháp: Luôn kiểm tra quyền sở hữu ở Server (Backend). Đừng tin vào cái ID mà Client gửi lên. (Đây là lý do phải dùng RLS).

11.2.3 XSS (Cross Site Scripting)

User nhập bình luận: <script>hack()</script>. Nếu bạn hiển thị nguyên văn lên web, script đó sẽ chạy và hack người khác. Next.js/React mặc định đã chống cái này (Escape HTML). Yên tâm.

11.3 Debugging (Gỡ rối)

Khi code lỗi, đừng hoảng. Hãy tra cứu các bệnh thường gặp:

11.3.1 Lỗi "Module Not Found" (Do viết hoa/thường)

• Triệu chứng: Trên máy Mac/Win chạy ngon, lên Vercel báo lỗi File not found: ./components/Header.
• Nguyên nhân: Linux (Vercel) phân biệt hoa thường. File bạn là header.tsx nhưng bạn import Header.
• Giải pháp: Luôn đặt tên file chữ thường gạch nối (kebab-case) như product-card.tsx.

11.3.2 Prompt Mẫu: Giải quyết Git Conflict

Khi merge code bị conflict đỏ lòm:

Role: Senior DevOps. Task: Resolve Git Conflict in ProductList.tsx. Context: HEAD is Stable. dev is my new feature. Input: [Paste đoạn code bị conflict vào đây]. Goal: Merge safely, keeping the new feature but not breaking the stable code.

11.3.3 Prompt Mẫu: Checklist trước khi Deploy

Đừng bấm nút Deploy nếu chưa hỏi câu này:

Prompt: You are a DevOps engineer. Provide a deployment checklist for a Next.js e-commerce website on Vercel:

• Environment variables (Which ones should be secret?)
• API keys (Supabase Auth?)
• Database Policies (RLS check?)
• Build optimizations Verify if I am missing anything critical for a production launch.

11.4 Bảo vệ "Vùng cấm" (Admin Route Protection)

Đây là nơi bạn để lộ mọi bí mật kinh doanh. Phải bảo vệ 2 lớp.

11.4.1 Lớp 1: Middleware (Chặn từ cửa)

Trong Next.js, tạo file middleware.ts. Khi ai đó truy cập /admin/*, middleware sẽ chặn lại kiểm tra xem có Cookie đăng nhập chưa. Nếu chưa -> Đá về trang Login ngay lập tức.

11.4.2 Lớp 2: Role Check (Kiểm tra thẻ ngành)

Có Cookie chưa đủ. Phải check xem user đó có phải là role: 'admin' không? Hay chỉ là khách hàng Customer?

// Trong AdminLayout
if (user.role !== 'admin') return <ErrorPage message="Bạn không có quyền vào đây!" />

Tuyệt đối không để khách hàng mò vào trang Dashboard nhìn thấy doanh thu của bạn.

11.5 Monitoring - Camera giám sát

Web sập thì ai báo? Khách hàng báo hay bạn tự biết?

1. Sentry: Công cụ bắt lỗi. Khi user bị lỗi javascript, Sentry sẽ gửi email cho bạn kèm dòng code bị lỗi. (Có gói Free).
2. Vercel Analytics: Xem bao nhiêu người truy cập, trang nào chậm.
3. UptimeRobot: Ping web bạn 5 phút/lần. Nếu web không vào được (Server sập), nó nhắn tin vào điện thoại bạn ngay.

11.6 Đúc kết & Giới thiệu chương tiếp theo

An toàn không phải là tính năng. Nó là thói quen. Những bài học trong chương này sẽ theo bạn suốt sự nghiệp:

• Testing: Unit Test + E2E Test - ngủ ngon không sợ code chết
• Security: SQL Injection, IDOR, XSS - đừng để mất tiền oan
• Debugging: Biết cách tra bệnh thường gặp
• Monitoring: Sentry + UptimeRobot - biết trước khi khách phàn nàn

Bạn đã hoàn thành phần THỰC THI (Execution). Hệ thống VibeMaterial đã chạy, an toàn và ổn định. Nhưng câu chuyện không dừng lại ở đây. Ở Chương 12: Tương Lai & Mở Rộng, chúng ta sẽ bàn về tầm nhìn dài hạn - khi nào cần scale, công thức vạn năng CRUD + State + Auth, và cách mở rộng sang Mobile App, AI Chatbot.