programming html

Html để phản ứng kết xuất

Đôi khi, cần hiển thị mã HTML trong React, xuất phát từ nguồn bên ngoài hoặc trình chỉnh sửa WYSIWYG

Theo mặc định, điều này không được phép vì lý do bảo mật, nhưng có một số cách để vượt qua giới hạn này

Trong bài viết này, chúng ta sẽ tìm hiểu cách đưa mã HTML vào thành phần React của bạn

Hành vi mặc định

Để hiểu rõ hơn về hành vi mặc định của React, hãy thử nhúng một số HTML vào thành phần React

const html = `
  Heading
  Paragraph
`;

const App = [] => [
  {html}
];

Có vẻ hợp lý khi mong đợi "Tiêu đề" và "Đoạn văn" được hiển thị trong các thẻ thích hợp, nhưng đó không phải là cách nó hoạt động

React coi html là một chuỗi và hiển thị như sau

Lý do rất đơn giản - chúng tôi ngăn chặn các cuộc tấn công XSS

Bảo vệ XSS

Cross-site scripting [XSS] là một loại lỗ hổng bảo mật thường thấy trong các ứng dụng web. Các cuộc tấn công XSS cho phép kẻ tấn công đưa các tập lệnh phía máy khách vào các trang web được người dùng khác xem

Để ngăn chặn loại lỗ hổng này, React không cho phép hiển thị các giá trị được nhúng trong JSX bằng cách tự động thoát bất kỳ thứ gì không được viết rõ ràng trong ứng dụng và chuyển đổi giá trị được nhúng thành chuỗi trước khi hiển thị

Điều gì sẽ xảy ra nếu React cho phép nó?

Trang sẽ hoạt động theo cách này

Nếu kẻ tấn công chạy bất kỳ mã JavaScript nào trên trang của bạn, chúng có khả năng đọc bất kỳ dữ liệu nhạy cảm nào [được lưu trữ trong cookie hoặc bộ nhớ cục bộ] và gửi dữ liệu đó đến máy chủ của chúng

Đây chính là lý do tại sao React ngăn chặn tình trạng này theo mặc định

cách 1. nguy hiểmSetInnerHTML Prop

Các phần tử HTML trong React có thể được cung cấp một prop nguy hiểmSetInnerHTML, thay thế cho innerHTML và cho phép hiển thị các chuỗi HTML làm nội dung của chúng

Nó được gọi là nguy hiểm vì một lý do - sử dụng nó sẽ khiến bạn bị tấn công XSS

const html = `
  Heading
  Paragraph
`;

const App = [] => ;

Prop nhận một đối tượng với khóa __html

Nếu bạn quyết định đi theo con đường này, hãy nhớ dọn sạch HTML của bạn trước khi kết xuất, ngay cả khi nó có vẻ "an toàn" [nó đến từ bảng quản trị hoặc nguồn khác mà bạn kiểm soát]

Vệ sinh HTML là quá trình kiểm tra tài liệu HTML và tạo ra một tài liệu HTML mới chỉ giữ lại bất kỳ thẻ nào được chỉ định là "an toàn" và mong muốn

Có nhiều thư viện bên ngoài cho việc này, chẳng hạn như dompurify, sanitize-html, v.v.

Vệ sinh với "dompurify"

Cài đặt thư viện

yarn add dompurify

Sử dụng nó cho thành phần Ứng dụng của bạn

Đọc tài liệu để tìm hiểu những thẻ nào được cho phép theo mặc định và cách cho phép/không cho phép những thẻ cụ thể

Cách 2. Sử dụng thư viện bên ngoài

Một trong những thư viện tốt nhất hiện có là html-Reac-Parser. Nó cho phép phân tích mã HTML cả trong Node. js và trong trình duyệt

Cài đặt thư viện

yarn add html-react-parser

Và thêm nó vào ví dụ của chúng tôi

Lưu ý quan trọng. Luôn kiểm tra xem thư viện có tự động làm sạch mã HTML hay không. Thư viện chúng tôi sử dụng không làm điều này, vì vậy chúng tôi vẫn phải tự vệ sinh

Lựa chọn đúng cách

Chọn cách tiếp cận phù hợp phụ thuộc rất nhiều vào những gì bạn muốn làm với HTML mà bạn nhận được

Nếu bạn chỉ muốn hiển thị nó cho người dùng, thì bạn có thể không cần bất kỳ thư viện nào cho nó, mà chỉ cần dọn sạch nó và hiển thị nó với prop nguy hiểmSetInnerHTML

Tuy nhiên, nếu bạn muốn thay thế một số thẻ HTML bằng các thành phần React và hiển thị chúng, thì một thư viện bên ngoài cho phép bạn làm điều đó chắc chắn là một giải pháp tốt

Thí dụ. Thay thế tất cả các phần tử div bằng data-report-id bằng thành phần truy xuất và hiển thị một báo cáo thực tế

Đôi khi bạn có thể muốn hiển thị một chuỗi HTML khi sử dụng React. Chuỗi này có thể đến từ trình soạn thảo WYSIWYG. Nhưng có một vấn đề - JSX thoát khỏi tất cả HTML và do đó tất cả các thẻ đều hiển thị cho người dùng. Ở đây chúng tôi trình bày 2 giải pháp để khắc phục vấn đề

Giải pháp 1. dangerouslySetInnerHTML

Trong hầu hết các trường hợp, một cách nguy hiểmSetInnerHTML là đủ

Cảnh báo. Đặt HTML từ mã là rủi ro vì rất dễ khiến người dùng của bạn vô tình bị tấn công bằng tập lệnh chéo trang [XSS]

Có thể có trường hợp bạn muốn hiển thị HTML bên trong Thành phần phản ứng. HTML có thể từ nguồn bên ngoài hoặc tệp mà bạn muốn hiển thị cho người dùng

Theo mặc định, React không cho phép bạn đưa HTML vào một thành phần, vì nhiều lý do, bao gồm cả kịch bản chéo trang. Tuy nhiên, đối với một số trường hợp như trình soạn thảo CMS hoặc WYSIWYG, bạn phải xử lý HTML thô. Trong hướng dẫn này, bạn sẽ tìm hiểu cách nhúng HTML thô vào bên trong một thành phần

nguy hiểmSetInnerHTML Prop

Nếu bạn cố gắng hiển thị trực tiếp một chuỗi HTML bên trong một thành phần, React sẽ tự động làm sạch chuỗi đó và hiển thị dưới dạng một chuỗi đơn giản

1const myHTML = `John Doe`;
2
3const App = [] => {myHTML};

jsx

Đoạn mã trên sẽ không hiển thị chuỗi "John Doe" trong tiêu đề. Thay vào đó, chuỗi hoàn chỉnh, bao gồm các thẻ H1, sẽ được hiển thị cho người dùng nhờ React

Để hiển thị chuỗi dưới dạng HTML, bạn cần sử dụng dangerouslySetInnerHTML chỗ dựa.

1const myHTML = `John Doe`;
2
3const App = [] => ;

jsx

The dangerouslySetInnerHTML prop được xây dựng để trình bày và đưa nội dung có định dạng DOM vào giao diện người dùng. Việc sử dụng chỗ dựa này được coi là một thông lệ không tốt, đặc biệt là khi xử lý đầu vào của người dùng. Bạn nên coi bất kỳ đầu vào nào của người dùng là không an toàn và vệ sinh nó trước khi đưa nó vào giao diện người dùng.

The dangerouslySetInnerHTML chỗ dựa phải là một đối tượng có khóa

const html = `
  Heading
  Paragraph
`;

const App = [] => ;

1 and value of an HTML string. Misusing the ______7 prop có thể khiến ứng dụng của bạn bị tấn công bằng tập lệnh chéo trang. Do đó, trước khi sử dụng chỗ dựa này, bạn cần đảm bảo rằng chuỗi HTML được khử trùng đúng cách và đến từ một nguồn đáng tin cậy. Bạn nên tránh chuyển bất kỳ đầu vào nào được người dùng chấp nhận vào dangerouslySetInnerHTML prop.

Tập lệnh chéo trang [XSS]

Các cuộc tấn công Cross-Site Scripting [XSS] cho phép người dùng độc hại hoặc tin tặc đưa mã HTML không an toàn vào một trang web cho những người dùng cuối khác. Điều này cho phép tin tặc truy cập dữ liệu cá nhân như cookie, bộ nhớ cục bộ, v.v.

HTML có thể kết xuất React không?

Mục tiêu của React theo nhiều cách là hiển thị HTML trong một trang web. React hiển thị HTML cho trang web bằng cách sử dụng chức năng có tên là ReactDOM. kết xuất[] .

Có dễ dàng chuyển đổi HTML sang React không?

Chuyển đổi một trang tĩnh hoặc trang web thành Ứng dụng React có thể đơn giản hơn những gì một số người có thể nghĩ, nghĩa là tùy thuộc vào mức độ phức tạp của trang web của bạn. The gist is that you'll only restructure and format things out. Just plug the data to it, or with an API to make it Dynamic or feel more like an App.

Làm cách nào để tích hợp HTML với React?

Thêm phản ứng sau một phút .

Bước 1. Thêm Vùng chứa DOM vào HTML. Đầu tiên, mở trang HTML mà bạn muốn chỉnh sửa. .

Step 2: Add the Script Tags. Next, add three tags to the HTML page right before the closing tag: .. .

Bước 3. Tạo một thành phần phản ứng. Tạo một tệp có tên like_button. js bên cạnh trang HTML của bạn

Làm cách nào để hiển thị chuỗi HTML dưới dạng HTML React?

Để hiển thị chuỗi html trong phản ứng, chúng ta có thể sử dụng thuộc tính DangerlySetInnerHTML là phiên bản phản ứng của thuộc tính dom innerHTML. Thuật ngữ nguy hiểm được sử dụng ở đây để thông báo cho bạn rằng nó sẽ dễ bị tấn công kịch bản chéo trang [XSS].