experimental_taintUniqueValue

taintUniqueValue(errMessage, lifetime, value)

• 레퍼런스
  • taintUniqueValue(message, lifetime, value)
• 사용법
  • 토큰이 클라이언트 구성 요소로 전달되지 않도록 방지하기

레퍼런스

taintUniqueValue(message, lifetime, value)

클라이언트에 전달되지 않아야 할 패스워드, 토큰, 키 또는 해시를 taintUniqueValue와 함께 호출하여 React에 등록합니다.

import {experimental_taintUniqueValue} from 'react';

experimental_taintUniqueValue(
  '시크릿 키를 클라이언트로 전달하지 마세요.',
  process,
  process.env.SECRET_KEY
);

더 많은 예시를 아래에서 볼 수 있습니다.

매개변수

• message: 클라이언트 컴포넌트에 value가 전달될 경우 표시하고자 하는 메시지입니다. 이 메시지는 value가 클라이언트 컴포넌트에 전달될 경우 발생하는 오류의 일부로 표시됩니다.

• lifetime: value가 얼마나 오랫동안 오염(taint) 상태를 유지해야 하는지를 나타내는 객체입니다.value는 이 객체가 존재하는 동안 클라이언트 컴포넌트로 전달되지 않도록 차단됩니다. 예를 들어 globalThis를 전달하면 앱이 종료될 때까지 값이 차단됩니다. lifetime은 일반적으로 value를 프로퍼티로 가지는 객체입니다.

• value: string, bigint 또는 TypedArray입니다. value는 암호화 토큰, 개인 키, 해시 또는 긴 비밀번호와 같이 높은 엔트로피를 가진 고유한 문자 또는 바이트 시퀀스여야 합니다. value는 클라이언트 컴포넌트로 전송되지 않도록 차단됩니다.

반환값

experimental_taintUniqueValue는 undefined를 반환합니다.

주의 사항

• 오염된 값을 이용해서 새로운 값을 만들어 내면 오염 보호가 손상될 수 있습니다. 오염된 값을 대문자로 변경하거나, 다른 문자열과 연결하거나, base64로 변환하거나, 잘라내는 등 기타 유사한 변환을 통해서 새롭게 생성된 값은 taintUniqueValue을 명시적으로 호출하지 않으면 오염되지 않습니다.
• PIN 코드나 전화번호와 같이 복잡도가 낮은 값을 보호하기 위해 ‘tainUniqueValue’를 사용하지 마십시오. 공격자가 요청의 값을 이용하여 암호의 가능한 모든 값을 열거하여 어떤 값이 오염되었는지 추론할 수 있습니다.

사용법

토큰이 클라이언트 구성 요소로 전달되지 않도록 방지하기

패스워드, 세션 토큰 또는 기타 고유 값과 같은 민감한 정보가 실수로 클라이언트 컴포넌트로 전달되지 않도록 taintUniqueValue 함수는 보호 레이어을 제공합니다. 값이 오염되면 클라이언트 컴포넌트로 전달하려는 시도는 에러를 발생시킵니다.

lifetime 인자는 값이 오염된 상태로 남아 있는 기간을 정의합니다. 오염된 상태로 무기한 유지되어야 하는 값의 경우 globalThis 또는 process와 같은 객체가 lifetime 인자로 사용될 수 있습니다. 이 객체들은 앱이 실행되는 전체 기간을 수명으로 가집니다.

import {experimental_taintUniqueValue} from 'react';

experimental_taintUniqueValue(
  '패스워드를 클라이언트로 전달하지 마세요.',
  globalThis,
  process.env.SECRET_KEY
);

만약 오염된 값의 수명이 객체에 묶여 있다면, lifetime은 그 값을 캡슐화하는 객체이어야 합니다. 이렇게 하면 오염된 값이 캡슐화 객체의 수명 동안 보호될 수 있습니다.

import {experimental_taintUniqueValue} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintUniqueValue(
    '세션 토큰을 클라이언트로 전달하지 마세요.',
    user,
    user.session.token
  );
  return user;
}

이 예시에서 user 객체는 lifetime 인자 역할을 합니다. 이 객체가 글로벌 캐시에 저장되거나 다른 요청에 의해 접근할 수 있다면 세션 토큰은 오염된 상태로 유지됩니다.

import {experimental_taintUniqueValue} from 'react';

const password = 'correct horse battery staple';

experimental_taintUniqueValue(
  '패스워드를 클라이언트로 전달하지 마세요.',
  globalThis,
  password
);

const uppercasePassword = password.toUpperCase() // `uppercasePassword`는 오염되지 않았습니다.

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(
  'API 토큰 패스워드를 클라이언트에 전달하지 마세요. ' +
    '서버에서 모든 fetch를 수행하는 것이 좋습니다.'
  process,
  process.env.API_PASSWORD
);