nguy hiểmSetInnerHTML là một thuộc tính trong các phần tử DOM trong React. Theo , DangerlySetInnerHTML 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
Cú pháp và Cần sử dụng SetInnerHTML một cách nguy hiểm
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
Nhưng tại sao nó lại được gọi là _dangerouslySetInnerHTML? . Hãy hiểu ngắn gọn
Tại sao nó được gọi là nguy hiểmSetInnerHTML?
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 gõ DangerlySetInnerHTML và chuyển một đối tượng bằng khóa __html, để nhắc nhở bản thân rằng điều đó nguy hiểm
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";
import './App.css';
const App = [] => {
const data = `
Welcome to this page
May the code be with you
Đó 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
import React from "react";
import DOMPurify from "dompurify";
import "./App.css";
const App = [] => {
const data = `
Welcome to this page
May the code be with you
`;
return [
Understanding dangerouslySetInnerHTML
];
};
export default App;
Hiệu suất
Khi bạn đang sử dụng DangerlySetInnerHTML, đằ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ận
Tóm lại, DangerlySetInnerHTML không là gì ngoài việc thay thế InternalHTML trong React và nên được sử dụng cẩn thận. Tên nguy hiểmSetInnerHTML được chọn một cách có chủ ý để nhắc bạn rằng nó nguy hiểm và có thể gây ra các lỗ hổng XSS để bạ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