Hướng dẫn angular innerhtml sanitize - làm sạch góc bên tronghtml

Tại sao một số kiểu của bạn không còn hoạt động khi sử dụng [innerHtml] để hiển thị một số nội dung HTML? Angular đi kèm với một chất khử trùng HTML tích hợp DomSanitizer, như một tính năng bảo mật, được sử dụng bất cứ khi nào bạn sử dụng [innerHtml]. Đây là một tính năng tuyệt vời - nhưng có một lỗi/tính năng khá khó chịu ở chỗ nếu bạn có các yếu tố có kiểu nội tuyến, các kiểu sẽ bị xóa khỏi trang của bạn. Đánh giá bởi số lượng câu hỏi về cách tắt nó - nó rõ ràng có những thiếu sót của nó. Điều đó nói rằng, tôi đánh giá cao các nhà phát triển Angular xây dựng điều này để bảo vệ phần lớn chúng ta khỏi làm điều gì đó ngớ ngẩn trong ứng dụng web của họ.

Nội dung chính Show

Tại sao vô hiệu hóa nó ở tất cả?
Bỏ qua Domsanitizer
Vì vậy, làm thế nào bạn có thể giữ an toàn khỏi các cuộc tấn công XSS ở góc cạnh?
Cách sử dụng nó thay cho Domsanitizer

Cách tiếp cận dễ nhất là vô hiệu hóa Domsanitizer và cách tiếp cận được đề xuất trên Stack Overflow là tạo ra một đường ống safeHtml để bạn có thể viết

. Đó là một vài dòng mã nếu bạn chỉ muốn bỏ nó vào - xem câu trả lời ở đây.

Nhưng trước khi nhảy ngay vào một giải pháp vô hiệu hóa một tính năng bảo mật theo mặc định, hãy nghĩ về những gì chúng ta đang làm trong một giây.

Tại sao vô hiệu hóa nó ở tất cả?

Trường hợp sử dụng mà tôi (và rõ ràng nhiều người khác) có là tôi muốn hiển thị nội dung HTML do người dùng tạo - từ các đoạn nhỏ đến toàn bộ trang HTML. Vấn đề là DomSanitizer đang tước quá nhiều HTML của tôi và không có cách nào để định cấu hình các quy tắc của nó. Trong trường hợp của tôi, tôi đã có các khoảng cách với các thuộc tính kiểu nội tuyến cũng như một khối