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ứ an toàn phải “dễ dàng” 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ì getUsername[] sẽ trả về một string đơn giản chứ không phải một đối tượng {__html: ''}. Ý định đằng sau cú pháp
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