React vs. XSS: Nơi các rào chắn kết thúc
React mặc định là an toàn. Nó thực hiện escape các giá trị trong JSX để ngăn chặn hầu hết các cuộc tấn công chèn mã (script injection). Tuy nhiên, điều này tạo ra một cảm giác an toàn giả tạo. React giúp giảm thiểu rủi ro XSS, chứ không loại bỏ hoàn toàn nó.
Có ba loại tấn công XSS chính:
- Reflected XSS: Kẻ tấn công gửi một liên kết độc hại. Máy chủ gửi ngay lập tức đoạn mã (script) đó trở lại cho người dùng. Trình duyệt sẽ thực thi đoạn mã này vì nó trông như thể đến từ một trang web đáng tin cậy.
- Stored XSS: Kẻ tấn công lưu một đoạn mã trên máy chủ của bạn. Nó nằm trong cơ sở dữ liệu, phần bình luận hoặc nhật ký (logs). Bất kỳ người dùng nào xem nội dung đó đều sẽ thực thi đoạn mã này.
- DOM Based XSS: Cuộc tấn công diễn ra hoàn toàn trên trình duyệt. Kẻ tấn công thay đổi các tham số URL hoặc các đầu vào phía client để khiến JavaScript của bạn hoạt động sai lệch.
Thực tế React bảo vệ bạn khỏi điều gì?
- Automatic Escaping: React xử lý các chuỗi dưới dạng văn bản thuần túy. Nếu bạn cố gắng chèn một thẻ script vào JSX, React sẽ hiển thị văn bản đó thay vì thực thi mã.
- Safe Rendering: React quản lý cách nội dung hiển thị. Điều này giúp giảm bớt nhu cầu sử dụng các API trình duyệt nguy hiểm.
- Less DOM Manipulation: React xử lý các cập nhật. Bạn không cần phải sử dụng
document.write()hayinnerHTMLthường xuyên.
React cung cấp các "lối thoát" (escape hatches). Nếu bạn sử dụng chúng sai cách, bạn sẽ tạo ra các lỗ hổng bảo mật.
Hãy cẩn trọng với những sai lầm sau:
dangerouslySetInnerHTML: Thuộc tính này yêu cầu React bỏ qua bước escape. Nó chèn HTML nguyên bản như hiện có. Nếu nội dung không được làm sạch, kẻ tấn công sẽ giành chiến thắng. Hãy sử dụng DOMPurify để làm sạch (sanitize) nội dung của bạn trước.- Thao tác trực tiếp với DOM: Nếu bạn sử dụng
element.innerHTMLvới dữ liệu đầu vào từ người dùng, bạn đã vô hiệu hóa mọi lớp bảo mật của React. - Thư viện bên thứ ba: Một số công cụ bên ngoài có thể không tuân thủ các quy tắc an toàn tương tự.
React cung cấp các công cụ để bảo mật. Bạn phải sử dụng chúng một cách chính xác. Bảo mật là trách nhiệm của chính bạn.
Nguồn: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2