ReactLMS

JSX (JavaScript XML)

5 min to read

Giới thiệu

JSX là một phần quan trọng trong ReactJS. Nó giúp chúng ta viết mã HTML trong JavaScript, giúp mã của chúng ta dễ đọc và viết hơn. Trong bài viết này, chúng ta sẽ tìm hiểu về JSX và cách sử dụng nó trong ReactJS.

Khái niệm về JSX

JSX, hay JavaScript XML, là một cú pháp mở rộng cho JavaScript. Nó giúp chúng ta viết mã HTML trong JavaScript. JSX tạo ra các "phần tử React", và chúng ta có thể đưa chúng vào trong DOM bằng cách sử dụng ReactDOM.render().

Dưới đây là một ví dụ về cách sử dụng JSX trong ReactJS:

const element = <h1>Hello, world!</h1>;

Trong ví dụ trên, chúng ta tạo ra một phần tử React bằng cách sử dụng JSX. Phần tử này sau đó có thể được đưa vào DOM.

Cách hoạt động của JSX

JSX không phải là HTML, và cũng không phải là JavaScript. Nó là một cú pháp mở rộng cho JavaScript. Khi chúng ta viết mã JSX, trình biên dịch sẽ chuyển đổi nó thành JavaScript thuần túy.

Dưới đây là một ví dụ về cách JSX được chuyển đổi thành JavaScript:

const element = <h1>Hello, world!</h1>;

Sau khi được biên dịch, mã trên sẽ trở thành:

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

Như bạn có thể thấy, JSX giúp chúng ta viết mã dễ đọc và viết hơn.

Bảo Mật trong JSX

Khi làm việc với JSX, bạn cần phải chú ý đến các vấn đề bảo mật, đặc biệt là khi đang xử lý dữ liệu đầu vào từ người dùng.

Chống lại Cross-Site Scripting (XSS) Attack

Cross-Site Scripting (XSS) là một loại tấn công mà trong đó kẻ tấn công sẽ cố gắng chèn mã độc vào trang web của bạn. JSX có một số tính năng bảo mật giúp chống lại loại tấn công này.

Mặc định, JSX sẽ escape dữ liệu đầu vào: Điều này có nghĩa là nếu bạn đang render dữ liệu đầu vào từ người dùng với JSX, nó sẽ tự động escape bất kỳ mã HTML hoặc JavaScript độc hại nào. Điều này giúp ngăn chặn XSS attacks.

const userInput = "<img src='http://url.to.file.which/not.exist' onerror=alert(document.cookie);>";
const element = <h1>{userInput}</h1>; // This will not execute the malicious script

Trong ví dụ trên, mã độc trong userInput sẽ không được thực thi vì JSX sẽ escape nó.

Sử dụng dangerouslySetInnerHTML với cẩn thận: JSX cung cấp dangerouslySetInnerHTML để bạn có thể thêm HTML vào component của mình. Tuy nhiên, như tên gọi, nó có thể rất nguy hiểm nếu không được sử dụng cẩn thận vì nó có thể mở ra cánh cửa cho XSS attacks.

const userInput = "<img src='http://url.to.file.which/not.exist' onerror=alert(document.cookie);>";
const element = <div dangerouslySetInnerHTML={{__html: userInput}} />; // This will execute the malicious script