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

Reading time: 3 min

Podemos proteger a nossa chave API no frontend do nosso dApp 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.

• 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.

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.

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

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

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.

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

const API_KEY = process.env.API_KEY

export 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>
  )
}

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

import ServerComponent from './components/ServerComponent'

export default function Home() {
  return (
    <main>
      <ServerComponent />
    </main>
  )
}

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

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.