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

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

Những mẩu tin ngắn hàng ngày dành cho bạn
  • Một phần mềm giúp chuyển đổi văn bản thành giọng nói do một lập trình viên người Việt làm ra - J2TEAM - Text to Speech (Free). Bạn có thể chuyển đổi hàng chục ngôn ngữ sang hàng chục giọng đọc tự nhiên khác nhau. Điều đặc biệt là nó miễn phí.

    Đánh giá sơ bộ thì chuyển đổi văn bản dài hoặc văn bản bằng tiếng Việt thuần thì rất tốt. Còn dính thêm các từ tiếng Anh thì nó đọc hơi buồn cười 😅

    » Xem thêm
  • Quá ghê ghớm, Codeium - vốn được biết đến như một đối thủ của Github Copilot, khi nó cho người dùng dùng miễn phí không giới hạn. Mới đây họ giới thiệu thêm Windsurf Editor - không chỉ còn là VSCode Extentions nữa mà là một trình Editor luôn - cạnh tranh trực tiếp với Cursor. Và điểm chính là nó... hoàn toàn miễn phí 🫣.

    » Xem thêm
  • Tin vui đầu này, Github Copilot đã chính thức có bản Free cho tất cả mọi người.

    Github Copilot là một trợ lý AI code cùng chúng ta, nó có thể tự động hoàn thành mã, trò chuyện hoặc sửa lỗi. Hiện đang hỗ trợ nhiều trình soạn thảo, IDE phổ biến như VSCode, JetBrains, XCode...

    Phiên bản miễn phí đang bị giới hạn 2000 Suggestions, và khoảng 50 requests đến tính năng Chat hàng tháng. Sau đó bạn có thể nâng cấp lên các phiên bản cao cấp hơn với giá từ 10$.

    Theo đánh giá của mình thì Copilot rất tốt và xứng đáng trong tầm giá, đang dùng hàng ngày 😄

    » Xem thêm

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>.

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

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.

Tài liệu tham khảo:

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.
Author

Xin chào, tôi tên là Hoài - một anh Dev kể chuyện bằng cách viết ✍️ và làm sản phẩm 🚀. Với nhiều năm kinh nghiệm lập trình, tôi đã đóng góp một phần công sức cho nhiều sản phẩm mang lại giá trị cho người dùng tại nơi đang làm việc, cũng như cho chính bản thân. Sở thích của tôi là đọc, viết, nghiên cứu... Tôi tạo ra trang Blog này với sứ mệnh mang đến những bài viết chất lượng cho độc giả của 2coffee.dev.Hãy theo dõi tôi qua các kênh LinkedIn, Facebook, Instagram, Telegram.

Bạn thấy bài viết này có ích?
Không

Bình luận (2)

Nội dung bình luận...
Avatar
Ẩn danh1 năm trước
cho minh hoi ngu xíu. *** Khi dùng script từ bên ngoài thì phài set vào CSP *** khi trang web của mình bị hack thì thôi..... còn khi trang web bên ngoài bị hack thì nó sẽ bi add mã độc vào. web mình vần down về và chạy mã đó. vậy CSP có còn hữu ích ko?
Trả lời
Avatar
Xuân Hoài Tống1 năm trước
Mình nghĩ việc cài đặt extension đã là chấp nhận một phần rủi ro rồi. Nó có thể can thiệp sâu vào trang web để từ đó đánh cắp hoặc tự ý thực thi mã không được phép. Mình không dám khẳng định CSP là không hiệu quả. Ngoài kia có rất nhiều trường hợp cần phải có CSP mà không lường hết được. Một công cụ được tạo ra chắc chắn phải được sử dụng để giải quyết vấn đề nào đó. Điều đó phụ thuộc nhiều vào bài toán cần giải quyết. Bạn thấy đấy, trang web của mình hiện tại không áp dụng CSP đơn giản là do thấy chưa cần thiết.
Avatar
Ẩn danh1 năm trước
ok. cam on ban. Theo minh thay thi ban ko dam nhan CSP la that su ko can thiet. theo minh thi no ko can thiet that. tai vi neu khong dung script ben thu 3. thi van phai dung 'self' mà 'self' thi hacker vẫn lừa bạn cài extention duoc. rồi extension vẫn chạy script ok.
Avatar
Xuân Hoài Tống1 năm trước
Àh, mình cũng có giải thích ở câu trả lời bên dưới rồi: "Nếu bên thứ 3 bị hack, rõ ràng là lúc này CSP cũng không chống lại được gì vì bạn đã "trust" cho tất cả tài nguyên của bên đó rồi."
Avatar
Ẩn danh1 năm trước
ý mình là CSP nó có thật sự cần thiết ko?
Avatar
Xuân Hoài Tống1 năm trước
Thắc mắc của bạn cũng là vấn đề chung của rất nhiều người lâu nay. Có một nguyên tắc là đừng bao giờ tin hoàn toàn vào bên thứ 3, chưa nói đến việc kẻ tấn công có thể hack vào hệ thống đó hay không mà đôi khi chính nhà phát triển thư viện cũng có khả năng là kẻ tấn công. Bạn có thể tìm thấy nhiều vụ tấn công liên quan đến việc sử dụng thư viện của bên thứ 3 trên mạng Internet. Rất nhiều cảnh báo được đưa ra. Nhiều dự án chỉ sử dụng tài nguyên trên chính hệ thống của mình bằng việc tự lưu trữ lại toàn bộ script... Nhưng thế là chưa đủ, nhiều vấn đề phát sinh như tốc độ, khả năng cập nhật... rồi chưa kể thư viện thứ 3 cần phải mở thêm kết nối bên ngoài khác nữa... Nói tóm lại, sử dụng thư viện thứ 3 đồng nghĩa với việc bạn chấp nhận rủi ro một phần, vì thế hãy lựa chọn thư viện "chính chủ", uy tín... Nếu bên thứ 3 bị hack, rõ ràng là lúc này CSP cũng không chống lại được gì vì bạn đã "trust" cho tất cả tài nguyên của bên đó rồi.
Avatar
Nguyễn Quang Tú2 năm trước
Giống với cors rồi
Trả lời
Avatar
Xuân Hoài Tống2 năm trước
Không giống đâu bạn, bạn có thể tìm đọc các bài viết nói về sự khác nhau giữ CORS và CSP nhưng đại loại là CORS cho phép một trang web thực hiện một request đến trang khác mà được phép sử dụng cả session, cookie... của trang đó. Còn CSP cho phép một trang web ngăn chính nó tải nội dung (có khả năng độc hại) như là các tập js, css... từ các nguồn không mong muốn (như một biện pháp bảo vệ chống lại XSS)