Como Proteger Chaves de API com Componentes do Servidor Next.js

Visão geral

Podemos proteger a nossa chave API no frontend do nosso dApp (aplicativo descentralizado) com componentes do servidor Next.js⁠. Para ainda mais segurança, também podemos restringir a nossa chave API a certos domínios ou subgraphs no Subgraph Studio.

Neste manual, veremos como criar um componente de servidor Next.js que faz queries em um subgraph enquanto esconde a chave API do frontend.

Porém…

• Componentes de servidor Next.js não protegem chaves API de extrações durante ataques DDoS (negação distribuída de serviço).
• Os gateways da Graph Network têm estratégias prontas de mitigação e deteção de negação de serviço, mas o uso de componentes de servidor pode enfraquecer estas proteções.
• Componentes de servidor Next.js introduzem riscos de centralização, possibilitando uma derruba do servidor.

Por Que é Necessário

Num aplicativo de React normal, chaves API incluídas no código do frontend podem ser expostas ao lado do cliente, o que apresenta um risco de segurança. É normal o uso de arquivos .env, mas estes não protegem as chaves por completo, já que o código do React é executado no lado do cliente (client-side), o que expõe a chave API nos headers. Os componentes do servidor Next.js abordam este problema via a execução de operações sensíveis server-side.

Como renderizar pelo lado do cliente para fazer queries em um subgraph

Pré-requisitos

• Uma chave API do Subgraph Studio
• Conhecimentos básicos de Next.js e React.
• Um projeto Next.js existente que use o App Router⁠.

Manual Passo a Passo

Passo 1: Prepare Variáveis de Ambiente

1. Na raiz do nosso projeto Next.js, crie um arquivo env.local.
2. Adicione a nossa chave API: API_KEY=<api_key_here>.

Passo 2: Crie um Componente de Servidor

1. No nosso diretório components, crie um arquivo novo, ServerComponent.js.
2. Use o exemplo de código acima para preparar o componente do servidor.

Passo 3: Implemente o Pedido da API Server-Side

No ServerComponent.js, adicione o seguinte código:

1const API_KEY = process.env.API_KEY23export default async function ServerComponent() {4  const response = await fetch(5    `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/HUZDsRpEVP2AvzDCyzDHtdc64dyDxx8FQjzsmqSg4H3B`,6    {7      method: 'POST',8      headers: {9        'Content-Type': 'application/json',10      },11      body: JSON.stringify({12        query: /* GraphQL */ `13          {14            factories(first: 5) {15              id16              poolCount17              txCount18              totalVolumeUSD19            }20          }21        `,22      }),23    },24  )2526  const responseData = await response.json()27  const data = responseData.data2829  return (30    <div>31      <h1>Server Component</h1>32      {data ? (33        <ul>34          {data.factories.map((factory) => (35            <li key={factory.id}>36              <p>ID: {factory.id}</p>37              <p>Pool Count: {factory.poolCount}</p>38              <p>Transaction Count: {factory.txCount}</p>39              <p>Total Volume USD: {factory.totalVolumeUSD}</p>40            </li>41          ))}42        </ul>43      ) : (44        <p>Loading data...</p>45      )}46    </div>47  )48}

Passo 4: Utilize o Componente do Servidor

1. No nosso arquivo de página (por ex., pages/index.js), importe Server Component.
2. Renderize o componente:

1import ServerComponent from './components/ServerComponent'23export default function Home() {4  return (5    <main>6      <ServerComponent />7    </main>8  )9}

Passo 5: Execute e Teste o Nosso dApp

Inicie o nosso aplicativo Next.js com npm run dev. Verifique se o componente do servidor retira dados sem expor a chave API.

Conclusão

Ao utilizar os Componentes de Servidor Next.js, nós praticamente escondemos a chave API do client-side, o que aumenta a segurança do nosso aplicativo. Com este método, operações sensíveis podem ser executadas server-side, longe de vulnerabilidades em potencial no client-side. E finalmente, orientamos que explore outras medidas de segurança de chave API para aumentar ainda mais a sua segurança de chaves API.