Juri Strumpflohner
RSS
all notes 🌱 seedling · Updated

React Taint API

Author profile pic
Juri Strumpflohner

Experimental feature in Next which allows to enable the React Taint API, where you have a dedicated experimental_taintObjectReference function you can wrap stuff with, that will ensure values don’t get leaked unintentionally to the client in a RSC environment.

import { experimental_taintObjectReference, experimental_taintUniqueValue } from 'react';
 
export async function getUserData(id) {
  const data = ...;
  experimental_taintObjectReference(
    'Do not pass user data to the client',
    data
  );
  experimental_taintUniqueValue(
    'Do not pass tokens to the client',
    data,
    data.token
  );
  return data;
}

If you then extract it just like

import { getUserData } from './data';
 
export async function Page({ searchParams }) {
  const userData = getUserData(searchParams.id);
  return <ClientComponent user={userData} />; // error
}

it would fail. Alternatively if you extract it like

export async function Page({ searchParams }) {
  const { name, phone } = getUserData(searchParams.id);
  // Intentionally exposing personal data
  return <ClientComponent name={name} phoneNumber={phone} />;
}

…it would still work. so that’s also something to be aware of, but it much more explicit and thus probably an intentional operation. But still 🤔