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

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 .

DomSanitizer có các quy tắc riêng về những gì được coi là HTML "an toàn". Nó không sai - tôi chắc chắn họ có một lý do chính đáng và họ cung cấp mặc định an toàn. Ví dụ, hãy xem nguồn cho Domsanitizer hiển thị những thuộc tính HTML nào được "danh sách trắng". Tôi có cả thẻ và kiểu nội tuyến trên phần tử - cả hai đều không thích và vì vậy nó được loại bỏ khỏi HTML của tôi. Không, tôi không có quyền kiểm soát đối với HTML nguồn.

🙁 Điều đó thật khó chịu. Trong trường hợp này, tôi phải ném em bé ra ngoài với nước tắm. Tôi phải tắt nó hoàn toàn để nó hoạt động cho những gì tôi cần, nhưng tôi mất tất cả các lan can bảo vệ góc. Không có Bueno.

Bỏ qua Domsanitizer

Domsanitizer cung cấp một vài phương pháp để cho phép bạn chỉ bỏ qua một số phần nhất định trong nội dung của mình - nhưng nó không hoàn toàn hoạt động cho HTML do người dùng tạo. Đây là lý do tại sao.

sanitizer.bypassSecurityTrustScript [Nội dung] - [innerHtml]1 dự kiến ​​là nội dung JavaScript và không chứa nội dung JavaScript. Bây giờ thật tuyệt vời nếu tôi có thể giữ phần này bởi vì tôi không mong đợi HTML do người dùng tạo của tôi chứa các thẻ [innerHtml]2 [và chúng được làm sạch ở phía máy chủ] nhưng tôi không có tùy chọn sử dụng Bộ khử trùng tập lệnh trên nội dung HTML của tôi. - [innerHtml]1 is expected to be javascript content and not HTML containing javascript content. Now it would be wonderful if I could keep this part because I don't expect my user-generated HTML to contain [innerHtml]2 tags [and they're cleaned out at the server-side] but I don't have the option of use the script sanitizer on my HTML content.

sanitizer.bypassSecurityTrustStyle [Nội dung] - [innerHtml]1 dự kiến ​​là nội dung CSS và không phải HTML chứa thẻ . Tôi không thể sử dụng phương pháp này vì HTML của tôi chứa các yếu tố kiểu đang bị tước. WELP. :nhún vai: - [innerHtml]1 is expected to be CSS content, and not HTML containing a tag. I can't use this method because my HTML contains style elements that are getting stripped. Welp. :shrug:

sanitizer.bypassSecurityTrusTHTML [Nội dung] - [innerHtml]1 dự kiến ​​sẽ là một đoạn trích HTML hoặc toàn bộ trang và nó khiến tất cả nội dung của bạn không bị ảnh hưởng - hoàn toàn không được khuyến nghị. Thật không may, tôi không có lựa chọn nào khác xung quanh nó. - [innerHtml]1 is expected to be an HTML snippet or an entire page and it leaves all your content untouched - which is NOT RECOMMENDED at all. Unfortunately, I have no other option around it.

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?

Nếu bạn thấy mình trong tình trạng khó khăn này, nơi bạn phải bỏ qua DomSanitizer - hy vọng tôi có thể tiết kiệm cho bạn một thời gian và cho bạn thấy những gì tôi đã tìm thấy.

Có, bạn sẽ phải kéo sự phụ thuộc khác vào ứng dụng của mình, nhưng cộng đồng JS nguồn mở đến giải cứu. Các thư viện sau đây phổ biến trên NPM & GitHub, hoạt động ở cả phía máy chủ và phía máy khách, với chất khử trùng có thể định cấu hình sử dụng danh sách trắng/danh sách đen và các tính năng thú vị khác. Chắc chắn đáng để kiểm tra.

Punkave/Sanitize-HTML là một lựa chọn phổ biến với một cái tên rất suc và rõ ràng. Dưới sự phát triển tích cực gần đây.

Cure53/Dompurify Dompurify có báo cáo kiểm toán bảo mật có sẵn công khai từ năm 2015, chỉ có 2 lỗ hổng chính cho IE9. Cũng đáng để đọc nếu bạn muốn tìm hiểu một cuộc tấn công clobbering là gì. Kiểm tra nó ở đây.
DOMPurify has a publicly available security audit report from 2015 which has just 2 major vulnerabilities for IE9. Also worth a read if you want to learn what a DOM Clobbering attack is. Check it out here.

Cách sử dụng nó thay cho Domsanitizer

Đây là những gì đường ống safeHtml của tôi trông như thế nào:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import DOMPurify from 'dompurify';

@Pipe[{
  name: 'safeHtml'
}]
export class SafeHtmlPipe implements PipeTransform {

  constructor[protected sanitizer: DomSanitizer] {}

 public transform[value: any, type: string]: any {
     const sanitizedContent = DOMPurify.sanitize[value];
     return angular.bypassSecurityTrustHtml[sanitizedContent];

  }
}

Bạn có thể dựa vào thư viện HTML-Phân bổ để làm sạch nội dung của bạn trước, để bạn có thể bỏ qua chất khử trùng mà không mất lợi ích của bảo vệ XSS.

Gói lên

Chỉ cần một lời nhắc - bạn không bao giờ có thể tin tưởng khách hàng/trình duyệt. Luôn luôn vệ sinh trên phía máy chủ nơi bạn có thể đảm bảo rằng bạn không lưu bất kỳ nội dung độc hại nào.

Nếu bạn đang sử dụng NodeJS ở phía máy chủ, thì điều này sẽ hoạt động hoàn hảo cho bạn. Tuy nhiên, nếu bạn thấy mình cần vệ sinh HTML ở phía máy khách, hãy mang đến một trong những thư viện vệ sinh để bạn nhận được sự bảo vệ khỏi các cuộc tấn công XSS khi một bản tích hợp như Domsanitizer không đáp ứng nhu cầu của bạn.

Tôi muốn nghe từ những người khác đã giải quyết vấn đề này - để lại nhận xét nếu bạn thực hiện một cách tiếp cận khác, hoặc chỉ vô hiệu hóa nó hoàn toàn!

Nhà phát triển phần mềm SR và Giám đốc kỹ thuật tại một công ty EDTech viết về các nhóm hàng đầu, thử nghiệm tự động và các trang web xây dựng được lưu trữ trên AWS.

Bạn có thể quan tâm…