experimental_taintObjectReference

experimental_taintObjectReference(message, object);

• Referência
  • taintObjectReference(message, object)
• Uso
  • Impedir que dados do usuário alcancem o cliente sem intenção

Referência

taintObjectReference(message, object)

Chame taintObjectReference com um objeto para registrá-lo no React como algo que não deve ser permitido que seja passado para o Cliente como está:

import {experimental_taintObjectReference} from 'react';

experimental_taintObjectReference(
  'Não passe TODAS as variáveis de ambiente para o cliente.',
  process.env
);

Veja mais exemplos abaixo.

Parâmetros

• message: A mensagem que você deseja exibir se o objeto for passado para um Componente de Cliente. Esta mensagem será exibida como parte do Erro que será lançado se o objeto for passado para um Componente de Cliente.

• object: O objeto a ser “manchado”. Funções e instâncias de classe podem ser passadas para taintObjectReference como object. Funções e classes já estão bloqueadas de serem passadas para Componentes de Cliente, mas a mensagem de erro padrão do React será substituída pelo que você definiu em message. Quando uma instância específica de um Typed Array é passada para taintObjectReference como object, quaisquer outras cópias do Typed Array não serão “manchadas”.

Retorna

experimental_taintObjectReference retorna undefined.

Ressalvas

• Recriar ou clonar um objeto “manchado” cria um novo objeto não “manchado”, que pode conter dados sensíveis. Por exemplo, se você tiver um objeto user “manchado”, const userInfo = {name: user.name, ssn: user.ssn} ou {...user} criará novos objetos que não são “manchados”. taintObjectReference só protege contra erros simples quando o objeto é passado para um Componente de Cliente inalterado.

Uso

Impedir que dados do usuário alcancem o cliente sem intenção

Um Componente de Cliente nunca deve aceitar objetos que carreguem dados sensíveis. Idealmente, as funções de busca de dados não devem expor dados que o usuário atual não deveria ter acesso. Às vezes, erros acontecem durante a refatoração. Para proteger contra esses erros que acontecem ao longo do tempo, podemos “manchar” o objeto do usuário em nossa API de dados.

import {experimental_taintObjectReference} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintObjectReference(
    'Não passe o objeto inteiro do usuário para o cliente. ' +
      'Em vez disso, selecione as propriedades específicas que você precisa para este caso de uso.',
    user,
  );
  return user;
}

Agora, sempre que alguém tentar passar esse objeto para um Componente de Cliente, um erro será lançado com a mensagem de erro passada.

// 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);
  // NÃO FAÇA ISSO
  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(
    'Não passe o objeto inteiro do usuário para o cliente. ' +
      'Em vez disso, selecione as propriedades específicas que você precisa para este caso de uso.',
    user,
  );
  return user;
}