Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions src/content/reference/react/experimental_taintObjectReference.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,42 @@ version: experimental

<Experimental>

**This API is experimental and is not available in a stable version of React yet.**
**この API は実験的なものであり、まだ安定版の React では利用できません。**

You can try it by upgrading React packages to the most recent experimental version:
React パッケージを最新の実験バージョンにアップグレードすることで試すことができます。

- `react@experimental`
- `react-dom@experimental`
- `eslint-plugin-react-hooks@experimental`

Experimental versions of React may contain bugs. Don't use them in production.
React の実験バージョンにはバグが含まれている可能性があります。本番環境では使用しないでください。

This API is only available inside React Server Components.
この API React Server Components 内でのみ利用できます。

</Experimental>


<Intro>

`taintObjectReference` lets you prevent a specific object instance from being passed to a Client Component like a `user` object.
`taintObjectReference` を使うと、`user` オブジェクトのような特定のオブジェクトインスタンスがクライアントコンポーネントに渡されるのを防げます。

```js
experimental_taintObjectReference(message, object);
```

To prevent passing a key, hash or token, see [`taintUniqueValue`](/reference/react/experimental_taintUniqueValue).
キー、ハッシュ、トークンなどが渡されるのを防ぎたい場合は、[`taintUniqueValue`](/reference/react/experimental_taintUniqueValue) を参照してください。

</Intro>

<InlineToc />

---

## Reference {/*reference*/}
## リファレンス {/*reference*/}

### `taintObjectReference(message, object)` {/*taintobjectreference*/}

Call `taintObjectReference` with an object to register it with React as something that should not be allowed to be passed to the Client as is:
`taintObjectReference` をオブジェクトと共に呼び出すことで、そのオブジェクトをクライアントにそのまま渡してはならないものとして React に登録します。

```js
import {experimental_taintObjectReference} from 'react';
Expand All @@ -51,35 +51,35 @@ experimental_taintObjectReference(
);
```

[See more examples below.](#usage)
[さらに例を見る](#usage)

#### Parameters {/*parameters*/}
#### 引数 {/*parameters*/}

* `message`: The message you want to display if the object gets passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if the object gets passed to a Client Component.
* `message`: オブジェクトが Client Component に渡されてしまった場合に表示したいメッセージです。このメッセージは、そのオブジェクトが Client Component に渡されたときにスローされるエラーの一部として表示されます。

* `object`: The object to be tainted. Functions and class instances can be passed to `taintObjectReference` as `object`. Functions and classes are already blocked from being passed to Client Components but the React's default error message will be replaced by what you defined in `message`. When a specific instance of a Typed Array is passed to `taintObjectReference` as `object`, any other copies of the Typed Array will not be tainted.
* `object`: taint するオブジェクトです。関数やクラスインスタンスを `taintObjectReference` `object` として渡すことができます。関数やクラスは Client Component に渡されることがすでにブロックされていますが、React のデフォルトのエラーメッセージは `message` で定義したものに置き換えられます。Typed Array の特定のインスタンスを `taintObjectReference` `object` として渡した場合、その Typed Array の他のコピーは taint されません。
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

本文で taint を動詞としてそのまま使っていますが、既存の日本語ドキュメントでは「汚染 API (taint API)」のように「汚染」という訳語を併記しています(例: src/content/reference/rsc/use-server.md)。このページでも「汚染(taint)」などの表記に統一すると、用語が伝わりやすくなります。

Copilot uses AI. Check for mistakes.

#### Returns {/*returns*/}
#### 返り値 {/*returns*/}

`experimental_taintObjectReference` returns `undefined`.
`experimental_taintObjectReference` `undefined` を返します。

#### Caveats {/*caveats*/}
#### 注意点 {/*caveats*/}

- Recreating or cloning a tainted object creates a new untainted object which may contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
- taint されたオブジェクトを再作成またはクローンすると、機密データを含む可能性がある新しい taint されていないオブジェクトが作成されます。例えば、taint された `user` オブジェクトがある場合、`const userInfo = {name: user.name, ssn: user.ssn}` `{...user}` は taint されていない新しいオブジェクトを作成します。`taintObjectReference` が保護するのは、オブジェクトが変更されずに Client Component へそのまま渡されてしまうような単純なミスだけです。

<Pitfall>

**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untainted object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
**セキュリティを taint だけに頼らないでください**。オブジェクトを taint しても、派生しうるあらゆる値の漏えいを防げるわけではありません。例えば、taint されたオブジェクトをクローンすると、taint されていない新しいオブジェクトが作成されます。taint されたオブジェクトのデータを使うと(例えば `{secret: taintedObj.secret}`)、taint されていない新しい値やオブジェクトが作成されます。taint は保護層の 1 つです。セキュアなアプリには、複数の保護層、適切に設計された API、分離パターンが必要です。

</Pitfall>

---

## Usage {/*usage*/}
## 使用法 {/*usage*/}

### Prevent user data from unintentionally reaching the client {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
### ユーザデータが意図せずクライアントに到達するのを防ぐ {/*prevent-user-data-from-unintentionally-reaching-the-client*/}

A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against these mistakes happening down the line we can "taint" the user object in our data API.
Client Component は、機密データを持つオブジェクトを決して受け取るべきではありません。理想的には、データ取得関数は現在のユーザに見せるべきではないデータを公開しないようにするべきです。しかしリファクタリング中にミスが起きることもあります。後続の処理でそのようなミスが起きた場合に備えて、データ API 内で user オブジェクトを "taint" できます。
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文章中の識別子(user など)がインラインコードになっていないため、同ページ内の他の箇所(user)と表記が揃っていません。本文中の user は user のようにバッククォートで囲ってコードとして示す方が読みやすいです。

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

Copilot uses AI. Check for mistakes.

```js
import {experimental_taintObjectReference} from 'react';
Expand All @@ -95,13 +95,13 @@ export async function getUser(id) {
}
```

Now whenever anyone tries to pass this object to a Client Component, an error will be thrown with the passed in error message instead.
これにより、誰かがこのオブジェクトを Client Component に渡そうとすると、指定したエラーメッセージを含むエラーがスローされます。

<DeepDive>

#### Protecting against leaks in data fetching {/*protecting-against-leaks-in-data-fetching*/}
#### データ取得での漏えいを防ぐ {/*protecting-against-leaks-in-data-fetching*/}

If you're running a Server Components environment that has access to sensitive data, you have to be careful not to pass objects straight through:
機密データにアクセスできる Server Components 環境を実行している場合、オブジェクトをそのまま渡さないように注意する必要があります。

```js
// api.js
Expand Down Expand Up @@ -131,7 +131,7 @@ export async function InfoCard({ user }) {
}
```

Ideally, the `getUser` should not expose data that the current user should not have access to. To prevent passing the `user` object to a Client Component down the line we can "taint" the user object:
理想的には、`getUser` は現在のユーザに見せるべきではないデータを公開しないようにするべきです。後続の処理で `user` オブジェクトが Client Component に渡されるのを防ぐために、user オブジェクトを "taint" できます。
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文章中の user がインラインコードになっていないため、user 表記と揃っていません。ここも user のようにバッククォートで囲ってください。

Suggested change
理想的には、`getUser` は現在のユーザに見せるべきではないデータを公開しないようにするべきです。後続の処理で `user` オブジェクトが Client Component に渡されるのを防ぐために、user オブジェクトを "taint" できます。
理想的には、`getUser` は現在のユーザに見せるべきではないデータを公開しないようにするべきです。後続の処理で `user` オブジェクトが Client Component に渡されるのを防ぐために、`user` オブジェクトを "taint" できます。

Copilot uses AI. Check for mistakes.


```js
Expand All @@ -149,6 +149,6 @@ export async function getUser(id) {
}
```

Now if anyone tries to pass the `user` object to a Client Component, an error will be thrown with the passed in error message.
これにより、誰かが `user` オブジェクトを Client Component に渡そうとすると、指定したエラーメッセージを含むエラーがスローされます。

</DeepDive>
Loading