Thư viện thử nghiệm React một cách nguy hiểmSetInnerHTML

Việc sử dụng innerHTML không đúng cách có thể khiến bạn bị tấn công bằ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 chống đỡ dangerouslySetInnerHTML được cố ý chọn để gây sợ hãi và giá trị chống đỡ (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 {__html:...} 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 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)

const StaticHtml = React.createClass({
  inject( element ) {
     element.innerHTML = this.props.html;
  },
  
  shouldComponentUpdate() {
     return false;   //prevent React updates as it will get confused by the DOM it didn't put there!
  },
  
  render() {
     return 

  }
});

const myHtml = ``;
ReactDOM.render( , document.getElementById("app") );

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ểmSetInnerHTML

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

A sample paragraph

or
document.querySelector(".testClass")= '
A sample paragraph
';

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ụ

lorem ipsum
'}}>

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 (
    <div className="App">
      <h2>Understanding dangerouslySetInnerHTMLh2>
      <div
        style={{ padding: "10px", fontSize: "17px", textAlign: "center" }}
        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}
      >div>
    div>
  );
};

export default App;
Hiệu suất
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ậ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 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
 

			
Thư viện thử nghiệm nào là tốt nhất cho React?
			
7 Thư viện kiểm tra phản ứng hàng đầu mà mọi người nên biết . 
 
Mocha
 
Nghiệp
 
hoa nhài
 
enzym
 
React-Thử nghiệm-Thư viện
 
		
			
Thư viện thử nghiệm React có tốt không?
			
Thư viện kiểm tra React là  một giải pháp rất nhẹ để kiểm tra các thành phần React . Nó cung cấp các chức năng tiện ích nhẹ bên trên Reac-dom và Reac-dom/test-utils , theo cách khuyến khích thực hành thử nghiệm tốt hơn. 
		
			
Tôi có nên sử dụng thư viện thử nghiệm Cypress hoặc React không?
			
Người chiến thắng. cây bách
 . Điều này có thể tốn thời gian, khó chịu và sẽ yêu cầu bảo trì khi các phụ thuộc được cập nhật
		
			
Tôi có thể sử dụng Jest với thư viện thử nghiệm React không?
			
Thư viện kiểm tra React không dành riêng cho bất kỳ khung kiểm tra nào; . theo mặc định, ứng dụng tạo phản ứng sử dụng cả Thư viện kiểm tra Jest và React. Jest is recommended and preferred by many developers. create-react-app uses both Jest and React Testing Library by default.