Phản ứng bên trongHTML
Trong vanilla JS đơn giản để chèn HTML vào trang web, chúng tôi sử dụng thuộc tính innerHTML như được cung cấp bên dưới Show
Nhưng nếu chúng ta cố gắng làm điều tương tự trong React. Chúng ta sẽ gặp lỗi như hình bên dưới Cú pháp sử dụng DangerlySetInnerHTML khá dễ dàng. Thay vì InternalHTML, bạn phải nhập một cách nguy hiểmSetInnerHTML và chuyển một đối tượng bằng khóa __html. Ví dụ
Nhưng tại sao nó được gọi là nguy hiểmSetInnerHTML? . Hãy hiểu ngắn gọn Cái tên nguy hiểmSetInnerHTML được cố ý chọn để gây sợ hãi. Nó không phải là một sai lầm đặt tên Nói chung, việc đặt HTML từ mã là rủi ro vì nó có thể khiến người dùng của bạn gặp phải một cuộc tấn công kịch bản chéo trang (XSS). Bạn có thể đặt HTML trực tiếp từ React, nhưng bạn phải nhập Nếu bạn đang cho phép người dùng chèn HTML trực tiếp vào trang web của mình, thì về mặt kỹ thuật, họ có thể nhúng các tập lệnh và mã độc hại và khi bạn hiển thị HTML đó trong ứng dụng phản ứng của mình, các tập lệnh đó có thể thực thi. một ví dụ đã được biểu diễn ở dưới import React from "react"; ); }export default App; Đó là lý do tại sao bạn cần đảm bảo HTML của mình được làm sạch trước khi chèn nó vào ứng dụng phản ứng của mình. Bạn có thể sử dụng các thư viện như dompurify để làm như vậy Một ví dụ về cách bạn có thể làm sạch mã của mình bằng cách sử dụng dompurify được hiển thị bên dưới Khi bạn đang sử dụng một cách nguy hiểmSetInnerHTML, đằng sau hậu trường, React sẽ biết rằng HTML bên trong thành phần đó không phải là thứ mà nó quan tâm vì nó đến từ một nguồn khác Vì React sử dụng DOM ảo, nên khi so sánh sự khác biệt với DOM thực, nó có thể bỏ qua phần so sánh với DOM ảo để đạt được hiệu suất cao hơn Nếu bạn chỉ sử dụng InternalHTML, React không có cách nào để biết nút DOM đã được sửa đổi Phần kết luậnTóm lại, Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi Việc sử dụng Triết lý thiết kế của chúng tôi là làm cho mọi thứ trở nên “dễ dàng” và an toàn và các nhà phát triển nên nêu rõ ý định của họ khi thực hiện các hoạt động “không an toàn”. Tên prop Sau khi hiểu đầy đủ các phân nhánh bảo mật và làm sạch dữ liệu đúng cách, hãy tạo một đối tượng mới chỉ chứa khóa
Vấn đề là nếu bạn vô tình nói nó sẽ không được hiển thị vì 1 sẽ trả về một 2 đơn giản chứ không phải một đối tượng 3. Mục đích đằng sau cú pháp 4 là nó được coi là một loại "loại/vết bẩn". Dữ liệu đã được làm sạch có thể được trả về từ một hàm bằng cách sử dụng đối tượng trình bao bọc này và dữ liệu được đánh dấu này sau đó có thể được chuyển vào dangerouslySetInnerHTML . Vì lý do này, chúng tôi khuyên bạn không nên viết mã có dạng. Chức năng này chủ yếu được cung cấp để hợp tác với các thư viện thao tác chuỗi DOM, vì vậy HTML được cung cấp phải được định dạng tốt (nghĩa là. , vượt qua xác thực XML) Tôi có thể sử dụng InternalHTML trong React không?Quy tắc này áp dụng khi InternalHTML prop cho phần tử React DOM được sử dụng. InternalHTML prop rất rủi ro vì rất dễ khiến người dùng của bạn gặp phải một cuộc tấn công kịch bản chéo trang (XSS)
Làm cách nào để hiển thị InternalHTML trong phản ứng js?Để làm sạch văn bản HTML không đáng tin cậy, chúng ta có thể sử dụng DOMPurify. sanitize và sau đó đặt nó vào thành phần React của chúng tôi. . nhập DOMPurify từ 'dompurify' hàm xuất MyComponent() { const img = " return ;. Tôi có thể sử dụng cái gì thay cho InternalHTML trong React?Theo tài liệu chính thức, dangerouslySetInnerHTML là sự thay thế của React cho việc sử dụng InternalHTML trong DOM của trình duyệt để đặt HTML theo chương trình hoặc từ một nguồn bên ngoài.
Tôi có thể sử dụng InternalText trong React không?Khi phần tử nút được nhấp vào, sự kiện nhấp chuột sẽ được kích hoạt, giá trị của thuộc tính tagName có thể được sử dụng để tìm ra phần tử HTML nguồn gốc của sự kiện và thuộc tính innerText có thể được sử dụng để tìm văn bản được viết trong phần tử HTML đó .
|