diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 0d9e8e260..938b75c4b 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http -[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring. +[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6e1780a7d..1c164a098 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -55,7 +55,6 @@ October 27th 2023. In-person in Verona, Italy and online (hybrid event) [Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) - ### React Summit US 2023 {/*react-summit-us-2023*/} November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event) @@ -66,6 +65,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) +### App.js Conf 2024 {/*appjs-conf-2024*/} +May 22 - 24, 2024. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + ### Render(ATL) 2024 🍑 {/*renderatl-2024-*/} June 12 - June 14, 2024. Atlanta, GA, USA diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index ecd23dfe0..6eda02eab 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -290,7 +290,7 @@ Ayrıca bir ref ile çalışırken [mutasyondan kaçınmaya](/learn/updating-obj ## Ref'ler ve DOM {/*refs-and-the-dom*/} -Bir ref'i herhangi bir değere işaret edecek şekilde ayarlayabilirsiniz. Fakat ref'lerin en yaygın kullanımı DOM elemanlarına erişmektir. Örneğin, bir input'a programatik olarak odaklanmak istiyorsanız bu kullanışlıdır. JSX'te `ref` özelliğine bir ref geçtiğinizde, `
` gibi, React karşılık gelen DOM elemanını `myRef.current`'e koyar. Bunu [Ref'ler ile DOM'u Manipüle etme](/learn/manipulating-the-dom-with-refs) bölümünde daha fazla okuyabilirsiniz. +Bir ref'i herhangi bir değere işaret edecek şekilde ayarlayabilirsiniz. Fakat ref'lerin en yaygın kullanımı DOM elemanlarına erişmektir. Örneğin, bir input'a programatik olarak odaklanmak istiyorsanız bu kullanışlıdır. JSX'te `ref` özelliğine bir ref geçtiğinizde, `
` gibi, React karşılık gelen DOM elemanını `myRef.current`'e koyar. Bir eleman DOM'dan kaldırıldığı zaman, React `myRef.current` değerini `null` olarak günceller. Bunu [Ref'ler ile DOM'u Manipüle etme](/learn/manipulating-the-dom-with-refs) bölümünde daha fazla okuyabilirsiniz. diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 5bc2af3a4..df7e201fd 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -21,12 +21,12 @@ Yeni bir uygulama veya tamamen React ile yeni bir web sitesi oluşturmak istiyor **[Next.js](https://nextjs.org/), tam özellikli bir React çatısıdır.** Çok yönlüdür ve her büyüklükte React uygulaması oluşturmanıza olanak tanır-çoğunlukla statik bir blogdan karmaşık bir dinamik uygulamaya kadar. Yeni bir Next.js projesi oluşturmak için terminalinizde şunu çalıştırın: -npx create-next-app +npx create-next-app@latest Next.js'e yeni başlıyorsanız, [Next.js eğitimi](https://nextjs.org/learn/foundations/about-nextjs)ni takip edebilirsiniz. -Next.js [Vercel](https://vercel.com/) tarafından desteklenmektedir. [Next.js kurulumunu](https://nextjs.org/docs/deployment) herhangi bir Node.js sunucusuna, sunucusuz barındırmaya veya kendi sunucunuza yapabilirsiniz. [Tümüyle statik Next.js uygulamaları](https://nextjs.org/docs/advanced-features/static-html-export) herhangi bir statik barındırmaya kurulabilir. +Next.js [Vercel](https://vercel.com/) tarafından desteklenmektedir. Bir Next.js uygulamasını herhangi bir Node.js sunucusuna, sunucusuz barındırmaya (serverless) veya kendi sunucunuza [yapabilirsiniz](https://nextjs.org/docs/app/building-your-application/deploying). [Tümüyle statik Next.js uygulamaları](https://nextjs.org/docs/advanced-features/static-html-export) herhangi bir statik barındırmaya kurulabilir. ### Remix {/*remix*/} @@ -88,17 +88,11 @@ React'ı nasıl daha da geliştirebileceğimizi keşfederken, React'ı çatılar Bu özellikler, her geçen gün canlı ortama hazır olmaya daha da yaklaşıyor ve bunları entegre etme konusunda diğer paketleyici ve çatı geliştiricileriyle görüşmeler yapıyoruz. Umut ediyoruz ki, bir veya iki yıl içinde bu sayfadaki tüm çatılar, bu özelliklere tam desteğe sahip olacak. (Eğer bir çatı yazarı olarak bu özelliklerle deney yapmak için bizimle ortaklık kurmak istiyorsanız, lütfen bize bildirin!) -### Next.js (Uygulama Yönlendirici) {/*nextjs-app-router*/} +### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js Uygulama Yönlendiricisi](https://beta.nextjs.org/docs/getting-started), React ekibinin tam yığın mimari vizyonunu gerçekleştirmeyi amaçlayan Next.js API'lerinin yeniden tasarımıdır.** Bu, sunucuda veya hatta derleme sırasında çalışan eşzamansız bileşenlerde veri almanıza olanak tanır. +**[Next.js App Router (Uygulama Yönlendiricisi)](https://nextjs.org/docs), React ekibinin tam yığın mimari vizyonunu gerçekleştirmeyi amaçlayan Next.js API'lerinin yeniden tasarımıdır.** Bu, sunucuda veya hatta derleme sırasında çalışan eşzamansız bileşenlerde veri almanıza olanak tanır. -Next.js [Vercel](https://vercel.com/) tarafından desteklenmektedir. [Next.js uygulama kurulumunu](https://nextjs.org/docs/deployment) herhangi bir NodeJS sunucusu, sunucusuz barındırma veya kendi sunucunuza yapabilirsiniz. Next.js ayrıca [statik dışa aktarma](https://beta.nextjs.org/docs/configuring/static-export)yı da destekler ve bu bir sunucu gerektirmez. - - - -Next.js'in Uygulama Yönlendiricisi **şu an beta aşamasında ve henüz canlı ortam kullanımı tavsiye edilmemektedir.** (Mart 2023 itibariyle). Var olan bir Next JS uygulamasında test etmek için, [bu geçiş kılavuzunu takip edebilirsiniz.](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). - - +Next.js [Vercel](https://vercel.com/) tarafından desteklenmektedir. Bir Next.js uygulamasını herhangi bir Node.js sunucusuna, sunucusuz barındırmaya (serverless) veya kendi sunucunuza [yapabilirsiniz](https://nextjs.org/docs/app/building-your-application/deploying). [Tümüyle statik Next.js uygulamaları](https://nextjs.org/docs/advanced-features/static-html-export) herhangi bir statik barındırmaya kurulabilir. diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 7c5adb118..eca388a88 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2073,7 +2073,13 @@ export default function Game() { } ``` -You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section. +You can see what your code should look like below. Note that you should see an error in the developer tools console that says: + + +Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. + + +You'll fix this error in the next section. diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 95fdc61df..5d39ce5d7 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -288,6 +288,7 @@ Stream işleminin, React'ın tarayıcıya yüklenmesini veya uygulamanızın etk - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense özelliği etkin çatılarda veri alma - [`lazy`](/reference/react/lazy) ile bileşen kodunu temvel yükleme (lazy-loading). +- [`use`](/reference/react/use) ile bir Promise'in değerini okuma. Effect veya olay yöneticisi içinde veri alınırken Suspense **tespit edilmez**. diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 8ef42aa71..f4ed54ce2 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -287,6 +287,7 @@ Streaming does not need to wait for React itself to load in the browser, or for - Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) - Lazy-loading component code with [`lazy`](/reference/react/lazy) +- Reading the value of a Promise with [`use`](/reference/react/use) Suspense **does not** detect when data is fetched inside an Effect or event handler. diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 7d3c3bebb..2f0c15805 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -54,7 +54,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Parametreler {/*onrender-parameters*/} * `id`: Yeni commit edilmiş `` ağacının `id` string prop'u. Bu, birden fazla profilleyici kullanıyorsanız ağacın hangi bölümünün commit edildiğini belirlemenizi sağlar. -* `phase`: `"mount"`, `"update"` or `"nested-update"`. Bu, ağacın ilk kez mi yüklendiğini yoksa prop, state veya hook'lardaki bir değişiklik nedeniyle mi yeniden render edildiğini bilmenizi sağlar. +* `phase`: `"mount"`, `"update"` ya da `"nested-update"`. Bu, ağacın ilk kez mi yüklendiğini yoksa prop, state veya hook'lardaki bir değişiklik nedeniyle mi yeniden render edildiğini bilmenizi sağlar. * `actualDuration`: Mevcut güncelleme için `` ve onun alt öğelerini render etmek için harcanan milisaniye sayısı. Bu, alt ağacın memoizasyondan ne kadar iyi yararlandığını gösterir (örneğin [`memo`](/reference/react/memo) ve [`useMemo`](/reference/react/useMemo)). İdeal olarak, bu değer ilk yüklemeden sonra önemli ölçüde azalmalıdır, çünkü alt öğelerin birçoğu yalnızca belirli prop'ları değiştiğinde yeniden render edilmedir. * `baseDuration`: Herhangi bir optimizasyon olmadan tüm `` alt ağacını yeniden render etmenin ne kadar zaman alacağını tahmin eden milisaniye sayısı. Ağaçtaki her bileşenin en son render süreleri toplanarak hesaplanır. Bu değer, render işleminin en kötü senaryo maliyetini tahmin eder (örn. ilk yükleme işlemi veya memoizasyon olmayan bir ağaç). Memoizasyonun çalışıp çalışmadığını görmek için `actualDuration` ile karşılaştırın. * `startTime`: React'in mevcut güncellemeyi ne zaman render etmeye başladığını gösteren sayısal bir zaman damgası. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 06dc5ab10..7db7de46d 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -255,6 +255,7 @@ async function getAlbums() { - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense özellikli framework'lerle veri fetch etme. - [`lazy`](/reference/react/lazy) ile bileşen kodunu tembel yükleme (lazy-loading). +- [`use`](/reference/react/use) ile bir Promise'in değerini okuma. Suspense, veri bir effect ya da olay yöneticisi içinde fetch edildiğinde **tespit etmez**. diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 72fa4bd36..7f9afdb99 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -414,7 +414,7 @@ See prior mentioned pitfalls If none of the above apply, it may be a problem with how React checks if something exists in cache. -If your arguments are not [primatives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference. +If your arguments are not [primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference. When calling a memoized function, React will look up the input arguments to see if a result is already cached. React will use shallow equality of the arguments to determine if there is a cache hit. diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md new file mode 100644 index 000000000..ce91c3d0c --- /dev/null +++ b/src/content/reference/react/experimental_taintObjectReference.md @@ -0,0 +1,153 @@ +--- +title: experimental_taintObjectReference +--- + + + +**This API is experimental and is not available in a stable version of React yet.** + +You can try it by upgrading React packages to the most recent experimental version: + +- `react@experimental` +- `react-dom@experimental` +- `eslint-plugin-react-hooks@experimental` + +Experimental versions of React may contain bugs. Don't use them in production. + +This API is only available inside React Server Components. + + + + + + +`taintObjectReference` lets you prevent a specific object instance from being passed to a Client Component like a `user` object. + +```js +experimental_taintObjectReference(message, object); +``` + +To prevent passing a key, hash or token, see [`taintUniqueValue`](/reference/react/experimental_taintUniqueValue). + + + + + +--- + +## 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: + +```js +import {experimental_taintObjectReference} from 'react'; + +experimental_taintObjectReference( + 'Do not pass ALL environment variables to the client.', + process.env +); +``` + +[See more examples below.](#usage) + +#### 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. + +* `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. + +#### Returns {/*returns*/} + +`experimental_taintObjectReference` returns `undefined`. + +#### Caveats {/*caveats*/} + +- Recreating or cloning a tainted object creates a new untained object which main contain sensetive 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. + + + +**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 untained 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. + + + +--- + +## Usage {/*usage*/} + +### 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 this mistakes happening down the line we can "taint" the user object in our data 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; +} +``` + +Now whenever anyone tries to pass this object to a Client Component, an error will be thrown with the passed in error message instead. + + + +#### 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: + +```js +// api.js +export async function getUser(id) { + const user = await db`SELECT * FROM users WHERE id = ${id}`; + return user; +} +``` + +```js +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 ; +} +``` + +```js +// components.js +"use client"; + +export async function InfoCard({ user }) { + return
{user.name}
; +} +``` + +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: + + +```js +// 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; +} +``` + +Now if anyone tries to pass the `user` object to a Client Component, an error will be thrown with the passed in error message. + +
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md new file mode 100644 index 000000000..eab73df5b --- /dev/null +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -0,0 +1,198 @@ +--- +title: experimental_taintUniqueValue +--- + + + +**This API is experimental and is not available in a stable version of React yet.** + +You can try it by upgrading React packages to the most recent experimental version: + +- `react@experimental` +- `react-dom@experimental` +- `eslint-plugin-react-hooks@experimental` + +Experimental versions of React may contain bugs. Don't use them in production. + +This API is only available inside [React Server Components](/reference/react/use-client). + + + + + + +`taintUniqueValue` lets you prevent unique values from being passed to Client Components like passwords, keys, or tokens. + +```js +taintUniqueValue(errMessage, lifetime, value) +``` + +To prevent passing an object containing sensitive data, see [`taintObjectReference`](/reference/react/experimental_taintObjectReference). + + + + + +--- + +## Reference {/*reference*/} + +### `taintUniqueValue(message, lifetime, value)` {/*taintuniquevalue*/} + +Call `taintUniqueValue` with a password, token, key or hash to register it with React as something that should not be allowed to be passed to the Client as is: + +```js +import {experimental_taintUniqueValue} from 'react'; + +experimental_taintUniqueValue( + 'Do not pass secret keys to the client.', + process, + process.env.SECRET_KEY +); +``` + +[See more examples below.](#usage) + +#### Parameters {/*parameters*/} + +* `message`: The message you want to display if `value` is passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if `value` is passed to a Client Component. + +* `lifetime`: Any object that indicates how long `value` should be tainted. `value` will be blocked from being sent to any Client Component while this object still exists. For example, passing `globalThis` blocks the value for the lifetime of an app. `lifetime` is typically an object whose properties contains `value`. + +* `value`: A string, bigint or TypedArray. `value` must be a unique sequence of characters or bytes with high entropy such as a cryptographic token, private key, hash, or a long password. `value` will be blocked from being sent to any Client Component. + +#### Returns {/*returns*/} + +`experimental_taintUniqueValue` returns `undefined`. + +#### Caveats {/*caveats*/} + +- Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values. + +--- + +## Usage {/*usage*/} + +### Prevent a token from being passed to Client Components {/*prevent-a-token-from-being-passed-to-client-components*/} + +To ensure that sensitive information such as passwords, session tokens, or other unique values do not inadvertently get passed to Client Components, the `taintUniqueValue` function provides a layer of protection. When a value is tainted, any attempt to pass it to a Client Component will result in an error. + +The `lifetime` argument defines the duration for which the value remains tainted. For values that should remain tainted indefinitely, objects like [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) or `process` can serve as the `lifetime` argument. These objects have a lifespan that spans the entire duration of your app's execution. + +```js +import {experimental_taintUniqueValue} from 'react'; + +experimental_taintUniqueValue( + 'Do not pass a user password to the client.', + globalThis, + process.env.SECRET_KEY +); +``` + +If the tainted value's lifespan is tied to a object, the `lifetime` should be the object that encapsulates the value. This ensures the tainted value remains protected for the lifetime of the encapsulating object. + +```js +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; +} +``` + +In this example, the `user` object serves as the `lifetime` argument. If this object gets stored in a global cache or is accessible by another request, the session token remains tainted. + + + +**Do not rely solely on tainting for security.** Tainting a value doesn't block every possible derived value. For example, creating a new value by upper casing a tainted string will not taint the new value. + + +```js +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 +``` + +In this example, the constant `password` is tainted. Then `password` is used to create a new value `uppercasePassword` by calling the `toUpperCase` method on `password`. The newly created `uppercasePassword` is not tainted. + +Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values. + +Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. + + + + + +#### Using `server-only` and `taintUniqueValue` to prevent leaking secrets {/*using-server-only-and-taintuniquevalue-to-prevent-leaking-secrets*/} + +If you're running a Server Components environment that has access to private keys or passwords such as database passwords, you have to be careful not to pass that to a Client Component. + +```js +export async function Dashboard(props) { + // DO NOT DO THIS + return ; +} +``` + +```js +"use client"; + +import {useEffect} from '...' + +export async function Overview({ password }) { + useEffect(() => { + const headers = { Authorization: password }; + fetch(url, { headers }).then(...); + }, [password]); + ... +} +``` + +This example would leak the secret API token to the client. If this API token can be used to access data this particular user shouldn't have access to, it could lead to a data breach. + +[comment]: <> (TODO: Link to `server-only` docs once they are written) + +Ideally, secrets like this are abstracted into a single helper file that can only be imported by trusted data utilities on the server. The helper can even be tagged with [`server-only`](https://www.npmjs.com/package/server-only) to ensure that this file isn't imported on the client. + +```js +import "server-only"; + +export function fetchAPI(url) { + const headers = { Authorization: process.env.API_PASSWORD }; + return fetch(url, { headers }); +} +``` + +Sometimes mistakes happen during refactoring and not all of your colleagues might know about this. +To protect against this mistakes happening down the line we can "taint" the actual password: + +```js +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 +); +``` + +Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, a error will be thrown with message you defined when you called `taintUniqueValue`. + + + +--- diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index c1a3d0f1c..812dede68 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -86,6 +86,7 @@ Bu örnekte Suspense etkinleştirilmiş veri kaynaklarından birini kullandığ - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense etkinleştirilmiş çatılar vasıtasıyla veri çekilmesi - [`lazy`](/reference/react/lazy) ile bileşen kodunun lazy yüklenmesi +- [`use`](/reference/react/use) ile bir Promise'in değerini okuma. [Suspense ve sınırlamaları hakkında daha fazla bilgi edinin.](/reference/react/Suspense) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 8dc594f94..9dd246c7c 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -647,7 +647,7 @@ Bu örnekte, `List` bileşeni **yapay olarak yavaşlatılmıştır**, böylece r Sekmeleri değiştirmek yavaş hissettiriyor çünkü yavaşlatılmış `List` bileşinini yeniden oluşturmaya zorluyor. Bu beklenen bir durumdur çünkü `tab` değişmiştir ve bu nedenle kullanıcının yeni seçimini ekrana yansıtmanız gerekir. -Şimdi, temayı değiştirmeyi deneyin. **`useMemo` ile birlikte [`memo`](/reference/react/memo) sayesinde, yapay yavaşlamaya rağmen hızlıdır!** `List` yeniden render edilmeyi atladı çünkü `visibleItems` dizisi son render işleminden bu yana değişmedi. `useMemo`ya bağımlılık olarak aktardığınız hem `todos` hem de `tab` son render işleminden bu yana değişmediği için `visibleItems` dizisi değişmedi. +Şimdi, temayı değiştirmeyi deneyin. Bu işlem **`useMemo` ve [`memo`](/reference/react/memo) sayesinde, yapay yavaşlamaya rağmen, hızlıdır!** `List` yeniden render edilmeyi atladı çünkü `visibleItems` dizisi son render işleminden bu yana değişmedi. `useMemo`ya bağımlılık olarak aktardığınız hem `todos` hem de `tab` son render işleminden bu yana değişmediği için `visibleItems` dizisi değişmedi. diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 627256937..d1de30620 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -127,6 +127,14 @@ { "title": "startTransition", "path": "/reference/react/startTransition" + }, + { + "title": "experimental_taintObjectReference", + "path": "/reference/react/experimental_taintObjectReference" + }, + { + "title": "experimental_taintUniqueValue", + "path": "/reference/react/experimental_taintUniqueValue" } ] },