Docs
⌘ K

3 минуты

Как обезопасить API-ключи с использованием серверных компонентов Next.js

Обзор

Мы можем использовать серверные компоненты Next.js⁠, чтобы надёжно защитить наш API-ключ от утечки на стороне фронтенда в нашем dApp. Для дополнительной безопасности API-ключа мы также можем ограничить его использование определёнными субграфами или доменами в Subgraph Studio.

В этом руководстве мы рассмотрим, как создать серверный компонент Next.js, который выполняет запрос к субграфу, скрывая API-ключ от фронтенда.

Предостережения

  • Серверные компоненты Next.js не защищают API-ключи от утечки при атаках типа “отказ в обслуживании”.
  • Шлюзы The Graph Network имеют стратегии обнаружения и смягчения атак типа “отказ в обслуживании”, однако использование серверных компонентов может ослабить эти защиты.
  • Серверные компоненты Next.js вносят риски централизации, так как сервер может выйти из строя.

Почему это необходимо

В стандартном React-приложении API-ключи, включённые в код внешнего интерфейса, могут быть раскрыты на стороне клиента, что созает угрозу безопасности. Хотя обычно используются файлы .env, они не обеспечивают полной защиты ключей, так как код React выполняется на стороне клиента, раскрывая API-ключ в заголовках. Серверные компоненты Next.js решают эту проблему, обрабатывая конфиденциальные операции на сервере.

Использование рендеринга на стороне клиента для выполнения запроса к субграфу

Рендеринг на клиентской стороне

Предварительные требования

  • API-ключ от Subgraph Studio
  • Базовые знания о Next.js и React.
  • Существующий проект Next.js, который использует App Router⁠.

Пошаговое руководство

Шаг 1: Настройка переменных среды

  1. В корневой папке нашего проекта Next.js создайте файл .env.local.
  2. Добавьте наш API-ключ: API_KEY=<api_key_here>.

Шаг 2: Создание серверного компонента

  1. В директории components создайте новый файл ServerComponent.js.
  2. Используйте приведённый пример кода для настройки серверного компонента.

Шаг 3: Реализация API-запроса на стороне сервера

В файл ServerComponent.js добавьте следующий код:

const API_KEY = process.env.API_KEYexport default async function ServerComponent() {  const response = await fetch(    `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/HUZDsRpEVP2AvzDCyzDHtdc64dyDxx8FQjzsmqSg4H3B`,    {      method: 'POST',      headers: {        'Content-Type': 'application/json',      },      body: JSON.stringify({        query: /* GraphQL */ `          {            factories(first: 5) {              id              poolCount              txCount              totalVolumeUSD            }          }        `,      }),    },  )  const responseData = await response.json()  const data = responseData.data  return (    <div>      <h1>Server Component</h1>      {data ? (        <ul>          {data.factories.map((factory) => (            <li key={factory.id}>              <p>ID: {factory.id}</p>              <p>Pool Count: {factory.poolCount}</p>              <p>Transaction Count: {factory.txCount}</p>              <p>Total Volume USD: {factory.totalVolumeUSD}</p>            </li>          ))}        </ul>      ) : (        <p>Loading data...</p>      )}    </div>  )}

Шаг 4: Использование серверного компонента

  1. В файл страницы (например, pages/index.js) импортируйте ServerComponent.
  2. Отрендерите компонент:
import ServerComponent from './components/ServerComponent'export default function Home() {  return (    <main>      <ServerComponent />    </main>  )}

Шаг 5: Запуск и тестирование нашего децентрализованного приложения (Dapp)

Запустите наше приложение Next.js с помощью команды npm run dev. Убедитесь, что серверный компонент запрашивает данные, не раскрывая API-ключ.

Рендеринг на стороне сервера

Заключение

Используя серверные компоненты Next.js, мы эффективно скрыли ключ API от клиентской стороны, улучшив безопасность нашего приложения. Этот метод гарантирует, что чувствительные операции обрабатываются на сервере, вдали от потенциальных уязвимостей на стороне клиента. В заключение, не забудьте ознакомиться с другими мерами безопасности для ключей API, чтобы повысить уровень безопасности своего ключа API.