experimental_taintObjectReference

experimental_taintObjectReference(message, object);

• 参考
  • taintObjectReference(message, object)
• 用法
  • 防止用户数据被无意间传递到客户端

参考

taintObjectReference(message, object)

调用 taintObjectReference，并传递一个对象作为参数，然后将其注册到 React 中，表示不允许直接传递给客户端：

import {experimental_taintObjectReference} from 'react';

experimental_taintObjectReference(
  'Do not pass ALL environment variables to the client.',
  process.env
);

参见下方更多示例。

参数

• message：对象被传递给客户端组件时显示的消息。如果对象被传递给客户端组件，此消息将作为错误的一部分显示。

• object：被污染的对象。函数和类实例可以作为 object 传递给 taintObjectReference。React 会阻止直接将函数和类传递给客户端组件，并把默认的错误消息替换为在 message 中定义的内容。当将特定类型数组的实例作为 object 传递给 taintObjectReference 时，该类型数组的其他副本将不会被污染。

返回值

experimental_taintObjectReference 返回 undefined。

注意

• Recreating or cloning a tainted object creates a new untained object which may contain sensitive data. For example, if you have a tainted user object, const userInfo = {name: user.name, ssn: user.ssn} or {...user} will create new objects which are not tainted. taintObjectReference only protects against simple mistakes when the object is passed through to a Client Component unchanged.

用法

防止用户数据被无意间传递到客户端

A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against these mistakes happening down the line we can “taint” the user object in our data API.

import {experimental_taintObjectReference} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintObjectReference(
    'Do not pass the entire user object to the client. ' +
      'Instead, pick off the specific properties you need for this use case.',
    user,
  );
  return user;
}

现在，无论谁试图将此对象传递给客户端组件，都将抛出一个带有传入错误消息的错误。

// 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);
  // DO NOT DO THIS
  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(
    'Do not pass the entire user object to the client. ' +
      'Instead, pick off the specific properties you need for this use case.',
    user,
  );
  return user;
}