Nhập khẩu nguy hiểmsetinnerhtml

Chào mọi người. Trong bài viết này, tôi sẽ giải thích

dangerouslySetInnerHTML={{__html: getMarkup()}}

5 là gì trong React và cách sử dụng nó một cách an toàn. Hãy bắt đầu nào

Khung React được biết là đã áp dụng hệ thống DOM độc lập với trình duyệt, có nghĩa là nó không tương tác trực tiếp với DOM. Và trong React, bạn sẽ nhận thấy rằng bạn không được phép thêm chuỗi HTML trực tiếp. Ví dụ

let someHTMLString = "
Hello
";

export default function App() {
    return(
       <div>{someHTMLString}div>
     );
}

Đầu ra theo nghĩa đen sẽ là chuỗi

dangerouslySetInnerHTML={{__html: getMarkup()}}

6 thay vì "Xin chào" bên trong phần tử đoạn văn

DangerouslySetInnerHTML

Thay vào đó, chúng ta có thể sử dụng

dangerouslySetInnerHTML={{__html: getMarkup()}}

5, đây là phiên bản của React của

dangerouslySetInnerHTML={{__html: getMarkup()}}

0. Nó được sử dụng như một chỗ dựa để bạn có thể truyền một đối tượng bằng phím

dangerouslySetInnerHTML={{__html: getMarkup()}}

1 như vậy

dangerouslySetInnerHTML={{__html: getMarkup()}}

Giá trị của khóa

dangerouslySetInnerHTML={{__html: getMarkup()}}

1 có thể là một chuỗi sẽ được chèn dưới dạng mã HTML trực tiếp từ React. Đây là cách React có thể thêm trực tiếp mã HTML vào DOM

Sự nguy hiểm của DangerouslySetInnerHTML

Như bạn có thể nhận thấy, tên của chỗ dựa này đặc biệt đáng sợ vì một lý do. Sẽ không an toàn nếu chỉ thêm mã HTML của bạn vì điều này dễ bị tấn công Cross Site Scripting hoặc XSS

Tấn công XSS là một loại lỗ hổng bảo mật trong đó kẻ tấn công tiêm mã phía máy khách để đánh cắp thông tin và thực hiện các tập lệnh độc hại trong ứng dụng. Hãy minh họa điều này với một ví dụ

Bạn có thể đọc thêm về các mối đe dọa bảo mật khác trong bài viết này

Một ví dụ

Giả sử chúng ta có một ứng dụng chỉnh sửa văn bản như bên dưới

Người dùng được phép viết bất cứ thứ gì trên trình soạn thảo văn bản và tạo kiểu cho nó theo cách họ muốn. Sau đó, khi nhấp vào nút Lưu, trình soạn thảo văn bản sẽ hiển thị đầu vào của người dùng trên trang HTML như vậy

Đằng sau hậu trường, trình soạn thảo văn bản về cơ bản trả về giá trị.

dangerouslySetInnerHTML={{__html: getMarkup()}}

3, trong đó giá trị là đầu vào của người dùng với các thẻ HTML do trình chỉnh sửa thêm vào. Để hiển thị giá trị cho trang, chúng tôi sử dụng

<div dangerouslySetInnerHTML={{ __html: value }}/>

Nhưng điều gì sẽ xảy ra nếu một người dùng độc hại nhập một số mã được đính kèm trong thẻ

dangerouslySetInnerHTML={{__html: getMarkup()}}

4?

giá trị sẽ là

________số 8

điều đó có nghĩa là tập lệnh độc hại được đưa vào sẽ được thực thi và có thể được sử dụng để đánh cắp cookie, dữ liệu cá nhân và thông tin nhạy cảm khác của người dùng

Làm thế nào để chúng ta sử dụng nó một cách an toàn?

DOMPurify là gói npm được viết bởi hơn 60 chuyên gia bảo mật web để làm sạch mã HTML, ngăn chặn các cuộc tấn công XSS

Với DOMPurify, chúng tôi có thể tăng tính bảo mật cho mã HTML được chèn của mình từ

dangerouslySetInnerHTML={{__html: getMarkup()}}

5. Hãy xem cách chúng ta có thể sử dụng trình soạn thảo văn bản của mình một cách an toàn trong ví dụ trước đó

Bước 1. Cài đặt DOMPurify

Cài đặt gói bằng cách chạy mã trong thư mục gốc của dự án của bạn

npm install dompurify

Bước 2. gói nhập khẩu

Trong tệp

dangerouslySetInnerHTML={{__html: getMarkup()}}

6 nơi bạn sẽ sử dụng

dangerouslySetInnerHTML={{__html: getMarkup()}}

5, hãy thêm câu lệnh nhập ở trên cùng

dangerouslySetInnerHTML={{__html: getMarkup()}}

1

Bước 3. vệ sinh

Sau đó, chúng tôi chỉ cần chuyển

dangerouslySetInnerHTML={{__html: getMarkup()}}

8 của mình vào phương thức

dangerouslySetInnerHTML={{__html: getMarkup()}}

9

dangerouslySetInnerHTML={{__html: getMarkup()}}

4

Và thay vì thực thi tập lệnh, mã sẽ được xóa an toàn khỏi trang HTML. Vì vậy, sẽ không có gì kết xuất hoặc thực thi

Phần kết luận

Mặc dù đôi khi không thể tránh khỏi việc chúng tôi có thể cần sử dụng

dangerouslySetInnerHTML={{__html: getMarkup()}}

5 trong các dự án của mình, nhưng điều quan trọng là phải hiểu những tác động nguy hiểm và bảo mật mà chỗ dựa này mang lại

Cảm ơn vì đã đọc. Như mọi khi, xin vui lòng chia sẻ suy nghĩ của bạn trong phần bình luận bên dưới. Tôi hy vọng nó đã được đọc hữu ích. Ngoài ra, vui lòng xem thêm một số bài đọc trong phần bên dưới nếu bạn muốn biết thêm về những điều chúng ta đã thảo luận hôm nay. Cho đến lần sau, chúc mừng

Tại sao bạn không nên sử dụng một cách nguy hiểmSetInnerHTML?

Tôi có thể sử dụng cái gì thay vì một cách nguy hiểmSetInnerHTML?

Chúng ta có thể sử dụng InternalHTML trong React JS không?

Thuộc tính nào là sự thay thế của React để sử dụng InternalHTML trong DOM của trình duyệt?