experimental_taintObjectReference

experimental_taintObjectReference(message, object);

• Referencia
  • taintObjectReference(message, object)
• Uso
  • Evita que los datos de usuario lleguen al cliente de manera no intencionada

Referencia

taintObjectReference(message, object)

Llama a taintObjectReference con un objeto para registrarlo en React como algo que no debería permitirse pasar al Cliente tal cual:

import {experimental_taintObjectReference} from 'react';

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

Ver más ejemplos abajo.

Parámetros

• message: El mensaje que deseas mostrar si el objeto se pasa a un Componente Cliente. Este mensaje se mostrará como parte del Error que se lanzará si el objeto se pasa a un Componente Cliente.

• object: El objeto a contaminar. Funciones e instancias de clases pueden ser pasadas a taintObjectReference como object. Las funciones y clases ya están bloqueadas para ser pasadas a Componentes Cliente, pero el mensaje de error predeterminado de React será reemplazado por lo que hayas definido en el message. Cuando una instancia específica de una matriz tipada se pasa a taintObjectReference como object, cualquier otra copia de la matriz tipada no será contaminada.

Devuelve

experimental_taintObjectReference devuelve undefined.

Caveats

• Recrear o clonar un objeto contaminado crea un nuevo objeto no contaminado que puede contener datos sensibles. Por ejemplo, si tienes un objeto user contaminado, const userInfo = {name: user.name, ssn: user.ssn} o {...user} creará nuevos objetos que no estarán contamidos. taintObjectReference solo protege contra errores simples cuando el objeto se pasa sin cambios a un Componente Cliente.

Uso

Evita que los datos de usuario lleguen al cliente de manera no intencionada

Un Componente Cliente nunca debería aceptar objetos que contengan datos sensibles. Idealmente, las funciones de obtención de datos no deberían exponer datos a los que el usuario actual no debería tener acceso. A veces, ocurren errores durante la refactorización. Para protegernos contra estos errores en el futuro, podemos ‘contaminar’ el objeto de usuario en nuestra API de datos.

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

Ahora, cada vez que alguien intente pasar este objeto a un Componente Cliente, se lanzará un error con el mensaje de error proporcionado.

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