CSP (Content Security Policy): Tăng Cường Bảo Mật Website Toàn Diện

CSP (Content Security Policy) đang ngày càng trở nên quan trọng trong việc bảo vệ website khỏi các cuộc tấn công. Mặc dù chưa được triển khai rộng rãi tại Việt Nam, với Thế Giới Di Động là một trong số ít các website lớn áp dụng, CSP mang lại những lợi ích bảo mật đáng kể. Vậy CSP là gì và tại sao bạn nên triển khai nó cho website của mình?

Bài viết này sẽ cung cấp một cái nhìn toàn diện về CSP, từ khái niệm cơ bản đến hướng dẫn triển khai và giải quyết các vấn đề thường gặp.

CSP Hoạt Động Như Thế Nào?

CSP là một lớp bảo vệ bổ sung được triển khai phía trình duyệt, giúp ngăn chặn các request độc hại phát исходя từ website của bạn. CSP hoạt động dựa trên nguyên tắc danh sách trắng (whitelist), cho phép bạn chỉ định các nguồn (domain) hoặc loại tài nguyên (script, style, image, frame) mà trình duyệt được phép tải và thực thi trên website. Bất kỳ request nào không nằm trong danh sách trắng sẽ bị chặn ngay lập tức.

CSP được cấu hình thông qua HTTP header, được trả về từ webserver hoặc mã nguồn của website.

Ví dụ, một hacker có thể chèn thẻ <script> độc hại vào website của bạn. Tuy nhiên, với CSP, trình duyệt sẽ chặn script này nếu nó không đến từ một nguồn đã được cho phép.

CSP giúp người dùng truy cập website của bạn với giao diện “sạch” nhất, ngăn chặn các mã độc hoặc quảng cáo không mong muốn. Ngay cả các tiện ích mở rộng trình duyệt như BeeCost, vốn theo dõi giá cả, cũng không thể hoạt động trên các website có CSP, ví dụ như sentayho.com.vn.

Điều này cũng giúp ngăn chặn các hành vi thu thập thông tin người dùng trái phép hoặc các thủ thuật cạnh tranh không lành mạnh như “gợi ý giá” của Cốc Cốc.

Các Chỉ Thị (Directives) của CSP

CSP không chỉ giới hạn ở việc kiểm soát JavaScript. Nó còn có thể được sử dụng để quản lý các loại tài nguyên khác như hình ảnh, CSS, frame, webfont và media. Điều này tạo ra một lớp bảo mật toàn diện, đảm bảo rằng người dùng chỉ tải và sử dụng những tài nguyên mà bạn cho phép.

Dưới đây là một số chỉ thị CSP phổ biến:

  • default-src: Chỉ định nguồn mặc định cho tất cả các loại tài nguyên.
  • script-src: Xác định các nguồn hợp lệ cho JavaScript.
  • style-src: Xác định các nguồn hợp lệ cho CSS.
  • img-src: Xác định các nguồn hợp lệ cho hình ảnh.
  • font-src: Xác định các nguồn hợp lệ cho font chữ.
  • media-src: Xác định các nguồn hợp lệ cho các file media (video, audio).
  • frame-src: Xác định các nguồn hợp lệ cho các frame (iframe).
  • connect-src: Xác định các nguồn hợp lệ mà website có thể kết nối đến (ví dụ: API).
  • object-src: Xác định các nguồn hợp lệ cho các plugin (ví dụ: Flash).

Thuộc Tính và Giá Trị của CSP Directive

Mỗi chỉ thị CSP có thể chứa nhiều giá trị, cho phép bạn linh hoạt trong việc cấu hình. Dưới đây là một số giá trị phổ biến:

  • 'self': Cho phép tải tài nguyên từ cùng domain với website.
  • 'unsafe-inline': Cho phép sử dụng JavaScript và CSS inline (không khuyến khích vì lý do bảo mật).
  • 'unsafe-eval': Cho phép sử dụng hàm eval() (không khuyến khích vì lý do bảo mật).
  • data:: Cho phép sử dụng data URI cho hình ảnh.
  • https://*.example.com: Cho phép tải tài nguyên từ bất kỳ subdomain nào của example.com thông qua HTTPS.

Ví dụ, cấu hình sau cho phép tải JavaScript từ cùng domain, từ www.googletagmanager.com và từ sentayho.com.vn:

script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com sentayho.com.vn

Để xác định danh sách các domain mà website của bạn tải tài nguyên về, bạn có thể sử dụng các công cụ như WebPagetest. Việc này đặc biệt quan trọng đối với các website sử dụng quảng cáo, vì quảng cáo thường tải tài nguyên từ nhiều domain khác nhau.

Triển Khai CSP trên WordPress

Mặc dù việc triển khai CSP tốt nhất nên được thực hiện ở phía webserver, bạn vẫn có thể chèn CSP header vào website WordPress một cách dễ dàng bằng nhiều cách.

Lưu ý rằng các plugin hoặc đoạn code chỉ giúp bạn chèn CSP header, còn nội dung và giá trị của header phải do bạn tự quyết định.

Sử Dụng Plugin

Cách đơn giản nhất là sử dụng plugin WP Content Security Plugin. Sau khi cài đặt và kích hoạt, bạn có thể cấu hình CSP trong phần Settings > CSP Options.

Chèn Code Trực Tiếp

Bạn có thể chèn trực tiếp code vào file functions.php của theme đang sử dụng.

function header_csp_generate(){
  header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' sentayho.com.vn; style-src 'self' 'unsafe-inline' sentayho.com.vn; img-src 'self' data: sentayho.com.vn https://*.sentayho.com.vn; frame-src sentayho.com.vn; font-src 'self'; connect-src 'self' *.sentayho.com.vn; object-src 'none'");
}
add_filter('wp_head', 'header_csp_generate');

Cấu Hình Webserver

Đây là cách được khuyến nghị để đảm bảo bảo mật tốt nhất.

Nginx

Chèn đoạn code sau vào file /etc/nginx/nginx.conf trong block http, sau đó restart lại Nginx.

http {
  # ....
  add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' sentayho.com.vn;";
  # ....
}

Apache

Chèn đoạn code sau vào file .htaccess hoặc /etc/httpd/conf/httpd.conf, sau đó restart lại Apache.

Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' sentayho.com.vn;";

Kiểm Tra Cấu Hình CSP

Bạn có thể sử dụng công cụ CSP Evaluator của Google để kiểm tra cấu hình CSP của mình. Chỉ cần nhập tên miền và nhấn Check CSP, công cụ sẽ hiển thị các directive và đánh giá từ Google.

Một công cụ khác hữu ích là Security Headers, giúp kiểm tra tổng thể mức độ bảo mật của website dựa trên các response header.

Theo Dõi Vi Phạm CSP

Một tính năng quan trọng của CSP là Report URI, cho phép trình duyệt báo cáo lại các vi phạm CSP xảy ra trên website của bạn. Điều này giúp bạn phát hiện các cuộc tấn công và điều chỉnh cấu hình CSP cho phù hợp.

Để sử dụng Report URI, bạn cần một dịch vụ để thu thập và phân tích các báo cáo. Report URI là một dịch vụ miễn phí (với giới hạn 10,000 report/tháng) mà bạn có thể sử dụng.

Sau khi đăng ký và tạo một subdomain, bạn sẽ nhận được một đường dẫn để chèn vào cấu hình CSP:

report-uri yoursubdomain.report-uri.com/r/d/csp/reportOnly

Ví dụ:

function header_csp_generate(){
  header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' sentayho.com.vn; style-src 'self' 'unsafe-inline' sentayho.com.vn; img-src 'self' data: sentayho.com.vn https://*.sentayho.com.vn; frame-src sentayho.com.vn; font-src 'self'; connect-src 'self' *.sentayho.com.vn; object-src 'none'; report-uri yoursubdomain.report-uri.com/r/d/csp/reportOnly");
}
add_filter('wp_head', 'header_csp_generate');

Sau khoảng 30 phút, bạn sẽ bắt đầu nhận được các báo cáo vi phạm CSP.

Các Vấn Đề Thường Gặp

Việc triển khai CSP có thể gặp một số khó khăn, đặc biệt là khi bạn muốn đạt được mức độ bảo mật cao. Hai thuộc tính 'unsafe-inline' và 'unsafe-eval' thường bị đánh dấu là không an toàn.

Việc loại bỏ 'unsafe-inline' có thể gây ra vấn đề, vì nhiều plugin WordPress chèn các đoạn JavaScript inline (an toàn) vào website. Nếu bạn loại bỏ 'unsafe-inline', các đoạn JavaScript này sẽ không hoạt động, dẫn đến lỗi trên website.

CSP nonce là một giải pháp để cho phép các đoạn JavaScript inline cụ thể. Tuy nhiên, một số plugin tạo ra các đoạn JavaScript thay đổi ở mỗi trang, khiến việc sử dụng nonce trở nên khó khăn.

Kết Luận

CSP là một biện pháp bảo mật quan trọng giúp bảo vệ website của bạn khỏi các cuộc tấn công. Mặc dù việc cấu hình CSP có thể phức tạp và đòi hỏi sự cẩn trọng, lợi ích mà nó mang lại là rất lớn.

Hãy triển khai CSP càng sớm càng tốt để bảo vệ người dùng và website của bạn.