Bảo vệ chống tấn công XSS bằng Trusted Types

Giới thiệu

Tuần trước, tại AngularConnect ở London, tôi đã lần đầu tiên nghe về một tính năng mạnh mẽ có thể thay đổi cách chúng ta bảo vệ ứng dụng web khỏi các cuộc tấn công cross-site scripting (XSS). Tính năng này có tên là Trusted Types. Với Trusted Types, một lớp lớn các vấn đề XSS dựa trên DOM trở nên khó khai thác hơn, đây là tin tuyệt vời cho tất cả chúng ta.

XSS là gì?

Tìm hiểu về tấn công XSS

Tấn công XSS đã trở thành một trong những phương thức tấn công phổ biến nhất trong các ứng dụng web. XSS xảy ra khi kẻ tấn công có thể chèn mã độc vào trang web mà người dùng tin tưởng, thường thông qua các điểm yếu trong mã HTML hoặc JavaScript. Để bảo vệ ứng dụng của bạn, bạn cần hiểu rõ cách thức hoạt động của XSS và cách Trusted Types có thể giúp bảo vệ bạn.

Trusted Types là gì?

JavaScript cung cấp nhiều cách để tạo hoặc chèn HTML và script từ các chuỗi, chẳng hạn như innerHTML, insertAdjacentHTML, document.write, script.src, iframe.srcdoc, v.v. Những phương thức này được gọi là "injection sinks". Chúng rất cần thiết, nhưng cũng rất rủi ro vì chúng sẽ chấp nhận bất cứ thứ gì bạn truyền vào.

Nếu bạn gán các chuỗi HTML vào những điểm này, bạn nên thực hiện việc làm sạch chúng trước. Tuy nhiên, nhiều người thường quên, các đường đi của mã có thể rất rắc rối và các thư viện bên thứ ba không phải lúc nào cũng thực hiện việc làm sạch đúng cách.

Cách Trusted Types hoạt động

Khi Trusted Types được kích hoạt, trình duyệt sẽ từ chối các chuỗi thông thường ở những điểm nguy hiểm. Thay vào đó, những điểm này yêu cầu các giá trị đặc biệt như TrustedHTML, TrustedScript hoặc TrustedScriptURL, chỉ có thể được tạo ra bởi các chính sách mà bạn định nghĩa. Chính sách của bạn có thể làm sạch và xác thực đầu vào trước khi cung cấp cho trình duyệt một giá trị "đáng tin cậy". Điều này giúp đóng lại một bề mặt tấn công lớn từ XSS dựa trên DOM.

Lưu ý: Trusted Types không tự động làm sạch cho bạn. Bạn có trách nhiệm viết (hoặc sử dụng) một chính sách an toàn để làm sạch/xác thực đầu vào.

Cách áp dụng Trusted Types

1. Các thành phần chính

Trusted Types bao gồm hai phần chính: Chính sách bảo mật nội dung (CSP) và một đối tượng toàn cục trustedTypes mà bạn sử dụng để tạo ra các chính sách.

2. Chính sách bảo mật nội dung (CSP)

Bạn thực thi và cấu hình Trusted Types thông qua CSP. Ví dụ:

• Dạng tiêu đề: Content-Security-Policy: trusted-types app dompurify; require-trusted-types-for 'script';
• Dạng thẻ meta: <meta http-equiv="Content-Security-Policy" content="trusted-types app dompurify; require-trusted-types-for 'script'">

CSP có hai chỉ thị:

• trusted-types app dompurify: Danh sách các tên chính sách mà trang của bạn được phép tạo (ví dụ: “app”, “dompurify”). Bạn có thể liệt kê một hoặc nhiều.

• require-trusted-types-for 'script': Thực thi Trusted Types cho các điểm tạo script và phân tích HTML (ví dụ: innerHTML, insertAdjacentHTML, iframe.srcdoc, document.write, và các URL cho script.src/Workers).

3. Đối tượng toàn cục trustedTypes

Phần thứ hai là đối tượng toàn cục trustedTypes trên window. Bạn tạo ra các "chính sách" với nó - những đối tượng có tên mà bạn thực hiện các phương thức để làm sạch và trả về các giá trị đáng tin cậy. Trình duyệt sẽ chấp nhận những giá trị này ở các điểm nguy hiểm.

Ví dụ:

// Ví dụ: sử dụng DOMPurify bên trong một chính sách để làm sạch
const policy = window.trustedTypes.createPolicy('app', {
  createHTML: (input) => DOMPurify.sanitize(input),
  createScript: (input) => input,
  createScriptURL: (input) => input,
});

const untrustedHTML = '<h1>Hello World</h1>';

document.getElementById('container').innerHTML = policy.createHTML(untrustedHTML);

Lưu ý:

• Bạn có thể định nghĩa một chính sách đặc biệt có tên 'default'. Trong chế độ thực thi, nếu mã vô tình truyền một chuỗi đến một điểm, trình duyệt sẽ chạy nó qua chính sách 'default' của bạn.

Thực hành với Trusted Types

1. Bắt đầu sử dụng Trusted Types

Trusted Types được hỗ trợ trong các trình duyệt dựa trên Chromium như Chrome và Edge. Trong Firefox, công việc triển khai đang diễn ra và chưa được bật theo mặc định. Safari/WebKit cũng đang trong quá trình phát triển.

Nếu bạn muốn áp dụng mô hình này trước khi có hỗ trợ đầy đủ, bạn có thể sử dụng polyfill Trusted Types của WICG/W3C. Nó sẽ không thực thi bảo vệ ở mức độ đầy đủ như hỗ trợ gốc, nhưng rất hữu ích để phát hiện các vi phạm và chuẩn bị cho ứng dụng của bạn cho việc thực thi.

2. Tóm tắt

Tính năng Trusted Types mới giúp bảo vệ chúng ta rất nhiều khỏi các cuộc tấn công XSS. Nó bao gồm hai phần: quy tắc thực thi và các chính sách, giúp đảm bảo rằng nội dung động được thêm vào DOM là đáng tin cậy. Hiện tại, nó chỉ được hỗ trợ gốc trong các trình duyệt dựa trên Chromium, trong khi việc phát triển trong Firefox và Safari vẫn đang tiếp tục. Tuy nhiên, polyfills có sẵn, vì vậy Trusted Types có thể được áp dụng ngay hôm nay.

Các thực hành tốt nhất khi sử dụng Trusted Types

• Luôn xác thực và làm sạch đầu vào: Đảm bảo rằng bất kỳ dữ liệu nào được truyền vào đều được xác thực và làm sạch bằng các phương thức an toàn.
• Sử dụng chính sách mặc định: Nếu bạn không chắc chắn về cách kiểm soát một số đầu vào, hãy sử dụng chính sách mặc định để hạn chế rủi ro.
• Kiểm tra định kỳ: Thực hiện kiểm tra định kỳ ứng dụng của bạn để phát hiện các lỗ hổng tiềm ẩn.

Những cạm bẫy phổ biến

• Quên cấu hình CSP đúng cách: Đảm bảo rằng CSP được cấu hình chính xác để không bỏ sót bất kỳ điểm nào.
• Sử dụng đúng các chính sách: Đừng tạo ra quá nhiều chính sách không cần thiết, điều này có thể gây khó khăn trong việc quản lý.

Mẹo nâng cao hiệu suất

• Sử dụng polyfills: Nếu bạn cần hỗ trợ trên các trình duyệt không tương thích, hãy sử dụng polyfill để duy trì hiệu suất và bảo mật.
• Tối ưu hóa mã: Đảm bảo mã của bạn được tối ưu hóa để giảm thiểu độ trễ khi thực thi.

Câu hỏi thường gặp (FAQ)

1. Trusted Types có hỗ trợ trình duyệt nào?

Trusted Types hiện đang được hỗ trợ trong các trình duyệt Chromium như Chrome và Edge, còn Firefox và Safari đang trong quá trình phát triển.

2. Có cách nào để kiểm tra xem Trusted Types có hoạt động không?

Bạn có thể sử dụng các công cụ phát triển trong trình duyệt để kiểm tra CSP và xem các chính sách có đang hoạt động không.

3. Tôi có thể sử dụng Trusted Types với thư viện JavaScript nào?

Trusted Types có thể được sử dụng với bất kỳ thư viện JavaScript nào, miễn là bạn tích hợp nó đúng cách vào ứng dụng của mình.

Tài nguyên tham khảo

• Trusted Types API trên MDN
• Chính sách bảo mật nội dung
• DOMPurify

Hy vọng bài viết này sẽ giúp ích cho bạn trong việc bảo vệ ứng dụng web của mình khỏi các cuộc tấn công XSS!