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ó được gọi là nguy hiểmSetInnerHTML? . 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 nhập dangerouslySetInnerHTML và chuyển một đối tượng bằng phím __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
`;return [
Understanding dangerouslySetInnerHTML
];
}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
hiệu suấtKhi 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, dangerouslySetInnerHTML không gì khác ngoài sự thay thế của innerHTML 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
Video giải thíchThê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 innerHTML không đúng cách có thể khiến bạn gặp phải một cuộc tấn công kịch bản chéo trang [XSS]. Vệ sinh đầu vào của người dùng để hiển thị nổi tiếng là dễ xảy ra lỗi và việc không vệ sinh đúng cách là một trong những nguyên nhân hàng đầu gây ra lỗ hổng web trên internet
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 dangerouslySetInnerHTML được cố ý chọn để gây sợ hãi và giá trị prop [một đối tượng thay vì một chuỗi] có thể được sử dụng để biểu thị dữ liệu đã được làm sạch
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 __html và dữ liệu đã làm sạch của bạn làm giá trị. Đây là một ví dụ sử dụng cú pháp JSX
function createMarkup[] { return {__html: 'First · Second'}; };
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 = "".
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 đó .