experimental_taintObjectReference

experimental_taintObjectReference(message, object);

• Tham khảo
  • taintObjectReference(message, object)
• Cách sử dụng
  • Ngăn dữ liệu người dùng vô tình đến client

Tham khảo

taintObjectReference(message, object)

Gọi taintObjectReference với một đối tượng để đăng ký nó với React như một thứ không nên được phép truyền đến Client Component như hiện tại:

import {experimental_taintObjectReference} from 'react';

experimental_taintObjectReference(
  'Không truyền TẤT CẢ các biến môi trường cho client.',
  process.env
);

Xem thêm các ví dụ bên dưới.

Tham số

• message: Thông báo bạn muốn hiển thị nếu đối tượng được truyền đến một Client Component. Thông báo này sẽ được hiển thị như một phần của Lỗi sẽ được đưa ra nếu đối tượng được truyền đến một Client Component.

• object: Đối tượng cần được đánh dấu. Các hàm và thể hiện lớp có thể được truyền cho taintObjectReference dưới dạng object. Các hàm và lớp đã bị chặn truyền đến Client Components nhưng thông báo lỗi mặc định của React sẽ được thay thế bằng những gì bạn đã xác định trong message. Khi một thể hiện cụ thể của Typed Array được truyền cho taintObjectReference dưới dạng object, bất kỳ bản sao nào khác của Typed Array sẽ không bị đánh dấu.

Trả về

experimental_taintObjectReference trả về undefined.

Lưu ý

• Việc tạo lại hoặc sao chép một đối tượng bị đánh dấu sẽ tạo ra một đối tượng không bị đánh dấu mới có thể chứa dữ liệu nhạy cảm. Ví dụ: nếu bạn có một đối tượng user bị đánh dấu, const userInfo = {name: user.name, ssn: user.ssn} hoặc {...user} sẽ tạo ra các đối tượng mới không bị đánh dấu. taintObjectReference chỉ bảo vệ chống lại những sai lầm đơn giản khi đối tượng được truyền đến một Client Component mà không thay đổi.

Cách sử dụng

Ngăn dữ liệu người dùng vô tình đến client

Một Client Component không bao giờ nên chấp nhận các đối tượng mang dữ liệu nhạy cảm. Lý tưởng nhất là các hàm tìm nạp dữ liệu không nên hiển thị dữ liệu mà người dùng hiện tại không được phép truy cập. Đôi khi sai lầm xảy ra trong quá trình tái cấu trúc. Để bảo vệ chống lại những sai lầm này xảy ra sau này, chúng ta có thể “đánh dấu” đối tượng người dùng trong API dữ liệu của chúng ta.

import {experimental_taintObjectReference} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintObjectReference(
    'Không truyền toàn bộ đối tượng người dùng cho client. ' +
      'Thay vào đó, hãy chọn các thuộc tính cụ thể bạn cần cho trường hợp sử dụng này.',
    user,
  );
  return user;
}

Bây giờ, bất cứ khi nào ai đó cố gắng truyền đối tượng này cho một Client Component, một lỗi sẽ được đưa ra với thông báo lỗi đã truyền vào.

// api.js
export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  return user;
}

import { getUser } from 'api.js';
import { InfoCard } from 'components.js';

export async function Profile(props) {
  const user = await getUser(props.userId);
  // KHÔNG LÀM ĐIỀU NÀY
  return <InfoCard user={user} />;
}

// components.js
"use client";

export async function InfoCard({ user }) {
  return <div>{user.name}</div>;
}

// api.js
import {experimental_taintObjectReference} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintObjectReference(
    'Không truyền toàn bộ đối tượng người dùng cho client. ' +
      'Thay vào đó, hãy chọn các thuộc tính cụ thể bạn cần cho trường hợp sử dụng này.',
    user,
  );
  return user;
}