Hướng dẫn react load static html file - phản ứng tải tệp html tĩnh

Nội dung chính Show

• Gaurav Singhal
• Giới thiệu
• Nguy hiểmTHERsetInnerhtml Prop
• Prop dangerouslySetInnerHTML được xây dựng để trình bày và bơm nội dung được định dạng DOM vào phía trước. Việc sử dụng prop này được coi là một thực tiễn xấu, đặc biệt là khi xử lý các đầu vào của người dùng. Bạn nên coi bất kỳ đầu vào của người dùng là không an toàn và vệ sinh nó trước khi tiêm nó vào mặt trận.
• Scripting site (XSS)
• 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ờ phản ứng.
• Làm thế nào tích hợp HTML với React JS?
• React có hoạt động trên các trang web tĩnh không?
• Chúng ta có thể sử dụng HTML trong React không?

Gaurav Singhal

Phát triển web phía trước

Giới thiệu

Có thể có một trường hợp mà bạn muốn hiển thị HTML bên trong một thành phần React. HTML có thể là từ một nguồn bên ngoài hoặc một 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 tiêm HTML trong 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ư biên tập viên CMS hoặc WYSIWYG, bạn phải đối phó với HTML RAW. Trong hướng dẫn này, bạn sẽ tìm hiểu làm thế nào bạn có thể nhúng HTML thô vào một thành phần.

Nguy hiểmTHERsetInnerhtml Prop

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

1const myHTML = `
John Doe`;
2
3const App = () => <div>{myHTML}div>;

JSX

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ờ phản ứng.

Để hiển thị chuỗi là HTML, bạn cần sử dụng prop dangerouslySetInnerHTML.dangerouslySetInnerHTML prop.

1const myHTML = `
John Doe`;
2
3const App = () => <div dangerouslySetInnerHTML={{ __html: myHTML }} />;

JSX

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ờ phản ứng.dangerouslySetInnerHTML prop was built to present and inject DOM formatted content into the frontend. The use of this prop is considered a bad practice, especially when dealing with user inputs. You should consider any user input as unsafe and sanitize it before injecting it into the frontend.

Để hiển thị chuỗi là HTML, bạn cần sử dụng prop dangerouslySetInnerHTML.dangerouslySetInnerHTML prop must be an object with a key __html and value of an HTML string. Misusing the dangerouslySetInnerHTML prop might open up your app to cross-site scripting attacks. Hence, before using this prop, you need to ensure that the HTML string is sanitized properly and coming from a reliable source. You should avoid passing any user-accepted input into the dangerouslySetInnerHTML prop.

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

Prop dangerouslySetInnerHTML phải là một đối tượng có khóa __html và giá trị của chuỗi HTML. Việc lạm dụng dangerouslySetInnerHTML Prop có thể mở ứng dụng của bạn để các cuộc tấn công kịch bản 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 vệ sinh đú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 do người dùng chấp nhận vào prop dangerouslySetInnerHTML.

Scripting site (XSS)

Các cuộc tấn công của Scripting Scripting (XSS) cho phép người dùng hoặc tin tặc độc hại gửi mã HTML không an toàn vào trang web cho 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, lưu trữ cục bộ, v.v.dangerouslySetInnerHTML prop.

An toàn hơn

Nếu XSS là mối quan tâm chính, bạn có thể sử dụng thư viện bên ngoài như Dompurify để vệ sinh chuỗi HTML trước khi tiêm nó vào DOM bằng dangerouslySetInnerHTML Prop.

1import DOMPurify from "dompurify";
2
3const myHTML = `
John Doe`;
4
5const mySafeHTML = DOMPurify.sanitize(myHTML);
6
7const App = () => <div dangerouslySetInnerHTML={{ __html: mySafeHTML }} />;

JSX

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ờ phản ứng.

1const myHTML = `
John Doe`;
2
3const App = () => <div dangerouslySetInnerHTML={{ __html: myHTML }} />;

1// ...
2const mySafeHTML = DOMPurify.sanitize(myHTML, {
3  ALLOWED_TAGS: ["h2", "p", "span"],
4  ALLOWED_ATTR: ["style"],
5});
6// ...

JSX

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ờ phản ứng.

Để hiển thị chuỗi là HTML, bạn cần sử dụng prop dangerouslySetInnerHTML.

1const myHTML = `
John Doe`;
2
3const App = () => <div dangerouslySetInnerHTML={{ __html: myHTML }} />;

1const myHTML = `
John Doe`;
2
3const App = () => <div dangerouslySetInnerHTML={{ __html: myHTML }} />;

Làm thế nào tích hợp HTML với React JS?

React có hoạt động trên các trang web tĩnh không?

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