experimental_taintObjectReference

В разработке

Этот API находится в стадии разработки и пока не доступен в стабильной версии React.

Вы можете попробовать его, обновив пакеты React до последней экспериментальной версии:

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

Экспериментальные версии React могут содержать ошибки. Не используйте их в рабочей среде.

Этот API доступен только внутри React Server Components.

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: Объект, подлежащий маркировке. Функции и экземпляры классов могут передаваться в taintObjectReference в качестве object. Функции и классы уже заблокированы для передачи в компоненты клиента, но стандартное сообщение об ошибке React будет заменено тем, что вы определили в message. При передаче конкретного экземпляра массива типа в taintObjectReference как object, любые другие копии этого массива не будут помечены.

Возвращаемое значение

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

Теперь, когда кто-то попытается передать этот объект в компонент клиента, будет выброшена ошибка с переданным сообщением об ошибке.

Подробное описание

Защита от утечек в извлечении данных

Если ваша среда Server Components имеет доступ к конфиденциальным данным, будьте осторожны, чтобы не передавать объекты напрямую:

// 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 в компонент клиента, будет выброшена ошибка с переданным сообщением об ошибке.

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react/experimental_taintObjectReference