experimental_taintUniqueValue

taintUniqueValue(errMessage, lifetime, value)

• Reference
  • taintUniqueValue(message, lifetime, value)
• Usage
  • Evitar que un token se pase a los Componentes del Cliente.

Reference

taintUniqueValue(message, lifetime, value)

Llama a taintUniqueValue con una contraseña, token, clave o hash para registrarlo en React como algo que no debe permitirse pasar al cliente tal cual:

import {experimental_taintUniqueValue} from 'react';

experimental_taintUniqueValue(
  'Do not pass secret keys to the client.',
  process,
  process.env.SECRET_KEY
);

See more examples below.

Parameters

• message: El mensaje que deseas mostrar si se pasa value a un componente del cliente. Este mensaje se mostrará como parte del error que se generará si value se pasa a un componente del cliente.

• lifetime: Cualquier objeto que indique cuánto tiempo debe permanecer marcado value. value será bloqueado para que no se envíe a ningún componente del cliente mientras este objeto siga existiendo. Por ejemplo, pasar globalThis bloquea el valor durante la duración de una aplicación. lifetime suele ser un objeto cuyas propiedades contienen value.

• value: Una cadena, bigint o TypedArray. value debe ser una secuencia única de caracteres o bytes con una alta entropía, como un token criptográfico, una clave privada, un hash o una contraseña larga. value será bloqueado para que no se envíe a ningún componente del cliente.

Returns

experimental_taintUniqueValue returns undefined.

Caveats

• Derivar nuevos valores a partir de valores marcados puede comprometer la protección del marcado. Los nuevos valores creados al convertir en mayúsculas valores marcados, concatenar valores de cadena marcados en una cadena más grande, convertir valores marcados en base64, obtener subcadenas de valores marcados y otras transformaciones similares no están marcados a menos que llames explícitamente a taintUniqueValue en estos valores recién creados.

Usage

Evitar que un token se pase a los Componentes del Cliente.

Para garantizar que información sensible como contraseñas, tokens de sesión u otros valores únicos no se pasen involuntariamente a componentes del cliente, la función taintUniqueValue proporciona una capa de protección. Cuando un valor está marcado, cualquier intento de pasarlo a un componente del cliente resultará en un error.

El argumento lifetime define la duración durante la cual el valor permanece marcado. Para valores que deben permanecer marcados indefinidamente, objetos como globalThis o process pueden servir como el argumento lifetime. Estos objetos tienen una vida útil que abarca toda la duración de la ejecución de tu aplicación.

import {experimental_taintUniqueValue} from 'react';

experimental_taintUniqueValue(
  'Do not pass a user password to the client.',
  globalThis,
  process.env.SECRET_KEY
);

Si la vida útil del valor marcado está ligada a un objeto, el argumento lifetime debe ser el objeto que encapsula el valor. Esto garantiza que el valor marcado permanezca protegido durante toda la vida útil del objeto que lo encapsula.

import {experimental_taintUniqueValue} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintUniqueValue(
    'Do not pass a user session token to the client.',
    user,
    user.session.token
  );
  return user;
}

En este ejemplo, el objeto user actúa como el argumento `lifetime. Si este objeto se almacena en una caché global o es accesible mediante otra solicitud, el token de sesión permanece marcado.

import {experimental_taintUniqueValue} from 'react';

const password = 'correct horse battery staple';

experimental_taintUniqueValue(
  'Do not pass the password to the client.',
  globalThis,
  password
);

const uppercasePassword = password.toUpperCase() // `uppercasePassword` is not tainted

export async function Dashboard(props) {
  // DO NOT DO THIS
  return <Overview password={process.env.API_PASSWORD} />;
}

"use client";

import {useEffect} from '...'

export async function Overview({ password }) {
  useEffect(() => {
    const headers = { Authorization: password };
    fetch(url, { headers }).then(...);
  }, [password]);
  ...
}

import "server-only";

export function fetchAPI(url) {
  const headers = { Authorization: process.env.API_PASSWORD };
  return fetch(url, { headers });
}

import "server-only";
import {experimental_taintUniqueValue} from 'react';

experimental_taintUniqueValue(
  'Do not pass the API token password to the client. ' +
    'Instead do all fetches on the server.'
  process,
  process.env.API_PASSWORD
);