Html để phản ứng kết xuất
Đôi khi, cần hiển thị mã HTML trong React, xuất phát từ nguồn bên ngoài hoặc trình chỉnh sửa WYSIWYG Show
Theo mặc định, điều này không được phép vì lý do bảo mật, nhưng có một số cách để vượt qua giới hạn này Trong bài viết này, chúng ta sẽ tìm hiểu cách đưa mã HTML vào thành phần React của bạn Hành vi mặc địnhĐể hiểu rõ hơn về hành vi mặc định của React, hãy thử nhúng một số HTML vào thành phần React
Có vẻ hợp lý khi mong đợi "Tiêu đề" và "Đoạn văn" được hiển thị trong các thẻ thích hợp, nhưng đó không phải là cách nó hoạt động React coi html là một chuỗi và hiển thị như sau Lý do rất đơn giản - chúng tôi ngăn chặn các cuộc tấn công XSS Bảo vệ XSS
Để ngăn chặn loại lỗ hổng này, React không cho phép hiển thị các giá trị được nhúng trong JSX bằng cách tự động thoát bất kỳ thứ gì không được viết rõ ràng trong ứng dụng và chuyển đổi giá trị được nhúng thành chuỗi trước khi hiển thị Điều gì sẽ xảy ra nếu React cho phép nó? Trang sẽ hoạt động theo cách này Nếu kẻ tấn công chạy bất kỳ mã JavaScript nào trên trang của bạn, chúng có khả năng đọc bất kỳ dữ liệu nhạy cảm nào (được lưu trữ trong cookie hoặc bộ nhớ cục bộ) và gửi dữ liệu đó đến máy chủ của chúng Đây chính là lý do tại sao React ngăn chặn tình trạng này theo mặc định cách 1. nguy hiểmSetInnerHTML PropCác phần tử HTML trong React có thể được cung cấp một prop nguy hiểmSetInnerHTML, thay thế cho innerHTML và cho phép hiển thị các chuỗi HTML làm nội dung của chúng Nó được gọi là nguy hiểm vì một lý do - sử dụng nó sẽ khiến bạn bị tấn công XSS
Prop nhận một đối tượng với khóa __html Nếu bạn quyết định đi theo con đường này, hãy nhớ dọn sạch HTML của bạn trước khi kết xuất, ngay cả khi nó có vẻ "an toàn" (nó đến từ bảng quản trị hoặc nguồn khác mà bạn kiểm soát)
Có nhiều thư viện bên ngoài cho việc này, chẳng hạn như dompurify, sanitize-html, v.v. Vệ sinh với "dompurify"Cài đặt thư viện
Sử dụng nó cho thành phần Ứng dụng của bạn Đọc tài liệu để tìm hiểu những thẻ nào được cho phép theo mặc định và cách cho phép/không cho phép những thẻ cụ thể Cách 2. Sử dụng thư viện bên ngoàiMột trong những thư viện tốt nhất hiện có là html-Reac-Parser. Nó cho phép phân tích mã HTML cả trong Node. js và trong trình duyệt Cài đặt thư viện
Và thêm nó vào ví dụ của chúng tôi Lưu ý quan trọng. Luôn kiểm tra xem thư viện có tự động làm sạch mã HTML hay không. Thư viện chúng tôi sử dụng không làm điều này, vì vậy chúng tôi vẫn phải tự vệ sinh Lựa chọn đúng cáchChọn cách tiếp cận phù hợp phụ thuộc rất nhiều vào những gì bạn muốn làm với HTML mà bạn nhận được Nếu bạn chỉ muốn hiển thị nó cho người dùng, thì bạn có thể không cần bất kỳ thư viện nào cho nó, mà chỉ cần dọn sạch nó và hiển thị nó với prop nguy hiểmSetInnerHTML Tuy nhiên, nếu bạn muốn thay thế một số thẻ HTML bằng các thành phần React và hiển thị chúng, thì một thư viện bên ngoài cho phép bạn làm điều đó chắc chắn là một giải pháp tốt Thí dụ. Thay thế tất cả các phần tử div bằng data-report-id bằng thành phần truy xuất và hiển thị một báo cáo thực tế Đôi khi bạn có thể muốn hiển thị một chuỗi HTML khi sử dụng React. Chuỗi này có thể đến từ trình soạn thảo WYSIWYG. Nhưng có một vấn đề - JSX thoát khỏi tất cả HTML và do đó tất cả các thẻ đều hiển thị cho người dùng. Ở đây chúng tôi trình bày 2 giải pháp để khắc phục vấn đề Giải pháp 1.dangerouslySetInnerHTML Trong hầu hết các trường hợp, một cách nguy hiểmSetInnerHTML là đủ
Quảng CáoCó thể bạn quan tâmToplist được quan tâm#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 20237 tháng trước#2
Top 7 gdcd 6 bài 1 kết nối tri thức 20237 tháng trước#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 20237 tháng trước#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 20237 tháng trước#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 20237 tháng trước#6
Top 6 kết thực phim mỹ nhân vô lệ 20237 tháng trước#7
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 20237 tháng trước#9
Top 5 tiểu sử của thầy thích pháp hòa 20237 tháng trướcQuảng cáoXem NhiềuB.n.n bị tố đạo văn 80 năm 20245 ngày trướcCách dạy con học toán lớp 1 hiệu quả năm 20246 giờ trướcLàm thế nào để hết chuột rút bắp chân năm 20245 ngày trướcNgành tâm lý học nên học trường nào năm 20241 tuần trướcCông thức giải nhanh hóa vô cơ 12 năm 20241 tuần trướcQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Học Tốt Inc.
|