experimental_taintObjectReference

experimental_taintObjectReference(message, object);

• 参考
  • taintObjectReference(message, object)
• 用法
  • 防止用户数据无意中到达客户端

参考

¥Reference

taintObjectReference(message, object)

使用一个对象调用 taintObjectReference，将其注册到 React，因为不允许将其传递给客户端：

¥Call taintObjectReference with an object to register it with React as something that should not be allowed to be passed to the Client as is:

import {experimental_taintObjectReference} from 'react';

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

请参阅下面的更多示例。

¥See more examples below.

参数

¥Parameters

• message：当对象被传递到客户端组件时你想要显示的消息。该消息将作为错误的一部分显示，如果对象被传递到客户端组件，则会抛出该错误。

  ¥message: The message you want to display if the object gets passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if the object gets passed to a Client Component.

• object：被污染的对象。函数和类实例可以作为 object 传递给 taintObjectReference。函数和类已经被阻止传递给客户端组件，但 React 的默认错误消息将被你在 message 中定义的内容替换。当类型化数组的特定实例作为 object 传递到 taintObjectReference 时，类型化数组的任何其他副本都不会受到污染。

  ¥object: The object to be tainted. Functions and class instances can be passed to taintObjectReference as object. Functions and classes are already blocked from being passed to Client Components but the React’s default error message will be replaced by what you defined in message. When a specific instance of a Typed Array is passed to taintObjectReference as object, any other copies of the Typed Array will not be tainted.

返回

¥Returns

experimental_taintObjectReference 返回 undefined。

¥experimental_taintObjectReference returns undefined.

注意事项

¥Caveats

• 重新创建或克隆受污染的对象会创建一个可能包含敏感数据的新的未受污染的对象。例如，如果你有一个受污染的 user 对象，则 const userInfo = {name: user.name, ssn: user.ssn} 或 {...user} 将创建未受污染的新对象。当对象原封不动地传递到客户端组件时，taintObjectReference 仅防止简单的错误。

  ¥Recreating or cloning a tainted object creates a new untainted 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.

用法

¥Usage

防止用户数据无意中到达客户端

¥Prevent user data from unintentionally reaching the client

客户端组件永远不应该接受携带敏感数据的对象。理想情况下，数据获取函数不应公开当前用户无权访问的数据。有时在重构过程中会出现错误。为了防止这些错误发生，我们可以在数据 API 中对用户对象进行 “taint” 处理。

¥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;
}

现在，每当有人尝试将此对象传递给客户端组件时，都会抛出错误并附带传入的错误消息。

¥Now whenever anyone tries to pass this object to a Client Component, an error will be thrown with the passed in error message instead.

// 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;
}