Content Security Policy (CSP) là gì? Hướng dẫn cấu hình CSP Header chống XSS 100%

Mỗi năm có hàng ngàn website bị tin tặc tấn công chèn mã độc đánh cắp tài khoản ngân hàng và dữ liệu khách hàng thông qua lỗ hổng XSS. Content Security Policy (CSP - Chính sách bảo mật nội dung) là lớp lá chắn bảo mật mạnh mẽ nhất giúp **vô hiệu hóa 100% các cuộc tấn công chèn script độc hại** trên trình duyệt!

1. Content Security Policy (CSP) hoạt động thế nào?

CSP là một HTTP Response Header do Server trả về, quy định danh sách các **nguồn tài nguyên an toàn (Domain được phép)** mà trình duyệt được quyền tải và thực thi mã JavaScript, CSS, Hình ảnh hay Iframe. Bất kỳ đoạn mã script lạ nào chèn từ bên ngoài sẽ bị trình duyệt chặn đứng ngay lập tức!

2. Cấu hình Strict CSP Header với Nonce trong Next.js

Phương pháp bảo mật đỉnh cao nhất hiện nay là Strict CSP kết hợp Nonce (Mã số ngẫu nhiên dùng 1 lần). Trong file middleware.js của Next.js App Router:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data: https:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
  `;

  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-nonce', nonce);
  requestHeaders.set('Content-Security-Policy', cspHeader.replace(/\s{2,}/g, ' ').trim());

  return NextResponse.next({
    headers: requestHeaders,
  });
}

3. 3 Lưu ý khi triển khai CSP cho Website doanh nghiệp

• Khai báo Domain script bên thứ 3: Nếu website có dùng Google Analytics GA4 hay Chatbot Tawk.to, bạn phải chèn domain của các dịch vụ này vào script-src.
• Sử dụng chế độ Report-Only để thử nghiệm: Trước khi bật CSP cứng, dùng header Content-Security-Policy-Report-Only để ghi lại danh sách vi phạm mà không làm hỏng giao diện.
• Chặn nhúng Iframe (frame-ancestors 'none'): Ngăn chặn tấn công Clickjacking giả mạo giao diện.

Kết luận

Cấu hình CSP Header là tiêu chuẩn bắt buộc cho mọi website doanh nghiệp muốn đạt điểm A+ về bảo mật. Uwmee Software tích hợp sẵn bộ Security Headers & CSP chuẩn ISO cho mọi dự án Next.js bàn giao. Đọc thêm bài viết lỗ hổng XSS là gì.