Khắc phục lỗ hổng XSS thường thấy nhất trong các ứng dụng React.js

: Blogs; Blogs công nghệ

Người ta thường tìm đến React.js nhờ vào khả năng render đồng hình (hoặc vạn năng) của công cụ này. Nói cách khác, là khả năng render single page application (ứng dụng đơn trang) ở phía server, gửi html đến client và biến client trở thành interactive (tương hỗ) mà không phải render lại cả page.

Các thư viện như Redux thậm chí còn có cả tài liệu riêng hướng dẫn cách thực hiện chức năng này. Trong tài liệu, bạn có thể tìm được một số mẫu code sau:

Ví dụ về XSS Vulnerable từ tài liệu Redux về cách chia sẻ state từ server với client.

Hiện nay, bạn có lẽ đang nhìn vào đoạn code và đang tự hỏi vấn đề bảo mật nằm ở đâu.

Đừng lo, với mức độ lổ hổng thì không biết mới là bình thường.

Sự cổ ở đâu?

Sự cố trong đoạn code này nằm ở cách chúng ta pass Store state vào ứng dụng. Trong screenshot trên, chúng ta ta chỉ thực hiện một call JSON.stringify, và chỉ định nó đến biến global trong script tag. Lỗ hổng thực sự nằm ở đây.

Khi trình duyệt web phân tách html của page, và bắt gặp tag <script> này, và sẽ tiếp tục đọc cho đến khi thấy được </script>— đồng nghĩa với việc, nếu redux store store của bạn có giá trị như sau trong đó, sau đó khi bạn lòa client, bạn sẽ nhận được thông báo “You have an XSS vulnerability!”.

{

user: {

  username: "NodeSecurity",

  bio: "as</script><script>alert('You have an XSS vulnerability!')</script>"

}

}

{

user : {

username : "NodeSecurity" ,

bio : "as</script><script>alert('You have an XSS vulnerability!')</script>"

}

Trình duyệt sẽ không thật sự đọc cho đến dấu ngoặc cuối cùng, thay vào đó, trình duyệt chỉ thật sự xong hết tag script sau bio: "as

Bạn có thể ngăn lỗ hổng XSS vulnerability này như thế nào?

Open Web Application Security Project may mắn thay có một loạt tài nguyên rất hay về XSS prevention. Để ngăn chặn lỗ hổng này, chúng ta cần các biện pháp an toàn khác cho ứng dụng:

Tất cả user input có HTML entities đã thoát (escape). Khi bạn đang sử dụng React, công cụ sẽ ngăn chặn đa số lỗ hổng XSS, phần lớn do cách tạo DOM Nodes và nội dung văn bản.
Khi xếp thứ tự state trên server để được gửi cho client, bạn cần phải xếp thứ tự theo hướng cho phép thoát HTML entities. Đây là bởi vì bạn thường không còn dùng React để tạo string này nữa, vì thế sẽ không tự động thoát string.

Các kỹ sư tại Yahoo may mắn thay, đã tìm được cách ứng dụng phương pháp thứ hai rất dễ dàng thông qua module Serialize JavaScript, vầ dễ dàng nhúng vào ứng dụng.

Đầu tiên cài đặt với: npm install --save serialize-javascript

Sau đó chúng ta có thể thay đổi đoạn code trước đó thành như dưới đây; Cụ thể hơn, hãy chúng để ý những thay đổi mà chúng ta sử dụng serialize thay cho JSON.stringify khi chỉ định giá trị đến __PRELOADED_STATE__

Snippet đã vá lỗi với JavaScript module Chuyên Dụng của Yahoo.

Về phần nhận dữ liệu ở phía client cũng giống y nhứ trước đó, ngoại trừ bạn giờ đây chỉ việc làm sao để bất kỳ HTML Entities trong string thoát được là xong (sẽ trông như \\u003C\\u002Fscript\\u003E thay vì </script>)

Remember: Just because you’re building an application with the latest technology on the market, or technology that is used by Facebook, you still have to take care of all the standard security practices you would, if you were writing an application with a Rails, Django, PHP, or older stack.

Chỉ vì bạn đang xây dựng ứng dụng với những công nghệ mới nhất trên thị trường, hay những công nghệ do Facebook sử dụng, Có nghĩa là bạn được quyền chém bản những biện pháp bảo mật thông thường như với những công nghệ như Rails, Django, PHP hay cũ hơn thế nữa.

medium

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

DVMS chuyên:

* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>

Tags: STartup