experimental_taintObjectReference

experimental_taintObjectReference(message, object);

• リファレンス
  • 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: taint（汚染）するオブジェクト。関数やクラスインスタンスも taintObjectReference に object として渡すことができます。関数やクラスはクライアントコンポーネントに渡せないよう元々ブロックされていますが、React のデフォルトのエラーメッセージを message で定義したものに置き換えられます。Typed Array の特定のインスタンスを taintObjectReference に object として渡した場合、その Typed Array の他のコピーは taint されません。

返り値

experimental_taintObjectReference は undefined を返します。

注意点

• taint されたオブジェクトを再作成またはクローンすると、機密データを含む可能性がある新しい taint されていないオブジェクトが作成されます。例えば、taint された user オブジェクトがある場合、const userInfo = {name: user.name, ssn: user.ssn} や {...user} は taint されていない新しいオブジェクトを作成します。taintObjectReference が保護するのは、オブジェクトが変更されずにクライアントコンポーネントへそのまま渡されてしまうような単純なミスだけです。

使用法

ユーザデータが意図せずクライアントに到達するのを防ぐ

クライアントコンポーネントは、機密データを持つオブジェクトを決して受け取るべきではありません。理想的には、データ取得関数は現在のユーザに見せるべきではないデータを公開しないようにするべきです。しかしリファクタリング中にミスが起きることもあります。後続の処理でそのようなミスが起きた場合に備えて、データ API 内で user オブジェクトを “taint”（汚染）できます。

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

これにより、誰かがこのオブジェクトをクライアントコンポーネントに渡そうとすると、指定したエラーメッセージを含むエラーがスローされます。

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