Thư viện thử nghiệm React một cách nguy hiểmSetInnerHTML
Việc sử dụng Show
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 chống đỡ 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ì . 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)
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 một cách nguy hiểmSetInnerHTMLTrong 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 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ó 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
|