Đô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ế
Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách hiển thị chuỗi html dưới dạng các phần tử dom thực trong ứng dụng React
Nếu chúng tôi cố gắng sử dụng cú pháp dấu ngoặc nhọn JSX { }
để hiển thị chuỗi html, phản ứng sẽ coi nó là văn bản thuần túy [để ngăn chặn các cuộc tấn công tập lệnh chéo trang]
Ứng dụng. js
import React from "react";
export default function App[] {
const htmlString = "Hello World
";
return {htmlString};
}
Kết xuất HTML
Để hiển thị chuỗi html trong phản ứng, chúng ta có thể sử dụng thuộc tính dangerouslySetInnerHTML
, đây là phiên bản phản ứng của thuộc tính dom innerHTML
Thí dụ
Ứng dụng. js
import React from "react";
export default function App[] {
const htmlString = "Hello World
";
return ;
}
Thuật ngữ dangerously
được sử dụng ở đây để thông báo cho bạn rằng nó sẽ dễ bị tấn công bằng kịch bản chéo trang [XSS]