Ngăn chặn tấn công XSS bằng Content Security Policy (CSP)

Bài viết được sự cho phép bởi tác giả Sơn Dương

CSP là gì

Content Security Policy (CSP) là một lớp bảo mật bổ sung giúp phát hiện và giảm thiểu một số loại tấn công nhất định, bao gồm cả tấn công Cross-Site Scripting (XSS) và dữ liệu. Các cuộc tấn công này được sử dụng cho mọi thứ, từ đánh cắp dữ liệu, làm mất mặt trang web, đến phân phối phần mềm độc hại.

Cách hoạt động của CSP

Khi máy chủ phản hồi trong header với thẻ Content-Security-Policy hoặc một thẻ <meta> trong HTML Document như:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

thì ngay lập tức trình duyệt hỗ trợ sẽ kích hoạt các biện pháp bảo vệ người dùng bằng cách hạn chế việc tải và thực thi các tài nguyên như Javascript, CSS, iframe, Web Worker, fonts…

Ví dụ thẻ <meta> trên tương đương với việc đặt thuộc tính Content-Security-Policy sau vào trong header của phản hồi:

Content-Security-Policy: default-src 'self'

thì trình duyệt sẽ chỉ tải những tài nguyên nếu chúng xuất phát từ nguồn của tên miền hiện tại (không bao gồm subdomain).

Tuy nhiên cách tốt nhất vẫn là phản hồi thuộc tính Content-Security-Policy trong header để kích hoạt CSP bởi vì việc đặt vào <meta> sẽ bị bỏ qua nếu như kẻ tấn công đính kèm mã vào phía trước. Hơn nữa một số thẻ policy sẽ không hoạt động đối với <meta>.

  Responsive giao diện cực đỉnh với Container Queries

  Bí kíp code CSS hiệu quả hơn mà các bạn nên biết

Cách đặt policy

Bằng cách đặt các thẻ policy lại với nhau để tạo ra một policy hoàn chỉnh mà bạn mong muốn thiết lập cho trang web. Có rất nhiều thẻ policy cho bạn lựa chọn, default-src hoặc script-src để ngăn thực thi mã inline hoặc lệnh eval(), default-src hoặc style-src để hạn chế áp dụng style từ thẻ <style> hoặc một thuộc tính inline style.

Để xem danh sách các thẻ policy đầy đủ bạn có thể xem tại Content-Security-Policy header.

Ví dụ:

Chỉ tải các nội dung từ chính tên miền và các tên miền phụ:

Content-Security-Policy: default-src 'self' example.com *.example.com

Tải ảnh từ bất kì nguồn nào đó, hạn chế tải video hoặc âm thanh và các tệp javascript:

Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com

Tham khảo việc làm CSS Hồ Chí Minh hấp dẫn trên TopDev

Cấu hình báo cáo

Cấu hình báo cáo (report) giúp chúng ta phát hiện ra có kẻ đang cố gắng tấn công vào trang web. Bằng cách đặt thẻ report-uri vào thuộc tính Content-Security-Policy kèm theo URI nhận báo cáo trình duyệt sẽ tự động gửi một POST request đến địa chỉ đó kèm theo body là thông tin chi tiết của cuộc tấn công.

Ví dụ thuộc tính Content-Security-Policy đang xác định:

Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri http://reportcollector.example.com/collector.cgi

Sau đó hãy tạo một file html:

<!DOCTYPE html>
<html>
  <head>
    <title>Sign Up</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    ... Content ...
  </body>
</html>

Rõ ràng href="css/style.css" đã vi phạm policy style-src cdn.example.com thế nên nếu cố tình chạy file html trên trình duyệt sẽ gửi một POST request đến report-uri nội dung như:

{
  "csp-report": {
    "document-uri": "http://example.com/signup.html",
    "referrer": "",
    "blocked-uri": "http://example.com/css/style.css",
    "violated-directive": "style-src cdn.example.com",
    "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri http://reportcollector.example.com/collector.cgi"
  }
}

Tổng kết

Content Security Policy là một giải pháp nhằm ngăn chặn tấn công XSS và một số loại tấn công khác như clickjacking, code injection… nhắm vào khai thác việc thực thi nội dung độc hại trong ngữ cảnh của trang web. Nó hoạt động bằng cách chỉ tải và thực thi tài nguyên từ những nguồn được xác định rõ ràng từ trước thông qua phản hồi Content-Security-Policy có trong header hoặc thông qua thẻ <meta> trong mã HTML.

Bài viết gốc được đăng tải tại vntalking.com

Có thể bạn quan tâm:

Đừng bỏ lỡ việc làm IT hấp dẫn trên TopDev