Hướng dẫn cấu hình Security Headers (CSP, HSTS, X-Frame-Options) cho Website Next.js

Bên cạnh yếu tố nội dung và tốc độ, Tính bảo mật (Security) là tiêu chí hàng đầu được Google đánh giá trong tiêu chuẩn Google E-E-A-T. Một website thiếu các thẻ tiêu chuẩn bảo mật Security Headers dễ bị hacker chèn mã độc, tấn công XSS hoặc nhúng iframe giả mạo (Clickjacking).

1. 4 Thẻ Security Headers quan trọng nhất cho Website

1. Content Security Policy (CSP): Chống tấn công XSS bằng cách chỉ cho phép nạp script/CSS từ các nguồn tin cậy đã khai báo.
2. X-Frame-Options (DENY hoặc SAMEORIGIN): Ngăn chặn các website lạ nhúng trang web của bạn vào thẻ iframe để lừa đảo.
3. Strict-Transport-Security (HSTS): Ép trình duyệt luôn kết nối qua giao thức mã hóa an toàn HTTPS.
4. X-Content-Type-Options (nosniff): Ngăn trình duyệt tự ý đoán sai kiểu file dữ liệu.

2. Cách cấu hình Security Headers trong file next.config.js

Cấu hình trực tiếp trong file cấu hình máy chủ Next.js next.config.js:

const securityHeaders = [
  { key: 'X-DNS-Prefetch-Control', value: 'on' },
  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
];

module.exports = {
  async headers() {
    return [{ source: '/:path*', headers: securityHeaders }];
  },
};

3. Kiểm tra điểm bảo mật trên SecurityHeaders.com

Sau khi Deploy website lên Vercel, truy cập trang securityheaders.com và gỡ URL của bạn vào kiểm tra. Nếu kết quả đạt **Điểm A hoặc A+**, website của bạn đã đạt chuẩn bảo mật hàng đầu thế giới.

Kết luận

Cấu hình Security Headers là bước hoàn thiện kỹ thuật SEO chuyên nghiệp. Uwmee Software thiết kế website Next.js được tối ưu sẵn 100% Security Headers đạt điểm A+. Xem thêm bài viết so sánh tính bảo mật Next.js vs WordPress.