experimental_taintObjectReference

正在开发中

此 API 仍处于实验阶段，尚未在 React 的稳定版本中提供。

您可以尝试将 React 软件包升级到最新的实验版本来试用它

react@experimental
react-dom@experimental
eslint-plugin-react-hooks@experimental

React 的实验版本可能包含错误。请勿在生产环境中使用它们。

此 API 仅在 React 服务端组件中可用。

taintObjectReference 可让您防止将特定对象实例（如 user 对象）传递给客户端组件。

experimental_taintObjectReference(message, object);

要防止传递密钥、哈希值或令牌，请参阅 taintUniqueValue。

参考
- 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。

注意事项

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

陷阱

不要仅仅依靠污染来保证安全。污染对象并不能防止泄露所有可能的派生值。例如，受污染对象的克隆将创建一个新的未受污染的对象。使用来自受污染对象的数据（例如 {secret: taintedObj.secret}）将创建一个未受污染的新值或对象。污染是一层保护；一个安全的应用程序将具有多层保护、精心设计的 API 和隔离模式。

用法

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

客户端组件永远不应接受携带敏感数据的对象。理想情况下，数据获取函数不应公开当前用户无权访问的数据。有时，在重构过程中会发生错误。为了防止将来发生这些错误，我们可以在数据 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>;
}

理想情况下，getUser 不应公开当前用户无权访问的数据。为了防止将来将 user 对象传递给客户端组件，我们可以“污染”用户对象

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

现在，如果有人试图将 user 对象传递给客户端组件，则会抛出一个错误，并显示传入的错误消息。

上一页use

下一页experimental_taintUniqueValue