Скрытие ваших учетных данных API на стороне клиента с помощью прокси-сервера в React

Обычно я советую людям использовать запрос на стороне сервера для запроса GraphQL API. Это потому, что вы можете скрыть свой ключ API в коде на стороне сервера. Однако большинство приложений Jamstack требуют написания кода на стороне клиента, поэтому вы не можете использовать запрос на стороне сервера. Когда вы находитесь в такой ситуации, вы можете настроить прокси-сервер для внутреннего перенаправления ваших запросов API, скрывая запрос от пользователя. В этом посте я покажу вам, как скрыть ключ API с помощью прокси-сервера в React.

Создание прокси-сервера

Предположим, что у вас есть приложение React, использующее клиент Apollo для запроса API GraphQL, например API GraphQL StepZen. Конечная точка требует, чтобы вы предоставили ключ API в качестве заголовка, и его реализация в React будет выглядеть следующим образом:

const client = new ApolloClient({
  uri: 'https://YOUR_USERNAME.stepzen.net/api/YOUR_ENDPOINT/__graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: `apikey YOUR_API_KEY`,
  },
});

Когда вы используете этот клиент в своем приложении React для отправки запросов к GraphQL API, React выполнит запрос на стороне клиента. Это означает, что запрос виден на вкладке сети в браузере, и когда вы создаете приложение, которое используют внешние пользователи, они смогут увидеть этот ключ API.

К счастью, есть способы предотвратить это. Либо путем рендеринга вашего приложения React на стороне сервера, либо путем настройки прокси-сервера. Библиотека http-proxy-middleware — отличный инструмент, который можно использовать, когда вы хотите проксировать запросы к API. Для настройки и использования требуется всего пара строк кода, и это очень гибко. Вы можете использовать его для проксирования запросов к любому API, а не только к StepZen. Вы также можете использовать его для проксирования запросов к нескольким API.

В приведенном ниже блоке кода показано, как использовать http-proxy-middleware для проксирования запросов к API StepZen GraphQL. Например, когда вы используете приложение Create React (подробнее здесь), прокси-сервер настроен в файле с именем src/setProxy.js в корне вашего приложения React:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api/YOUR_ENDPOINT/__graphql',
    createProxyMiddleware({
      target: 'https://YOUR_USERNAME.stepzen.net',
      changeOrigin: true,
      headers: {
        authorization: 'apikey YOUR_API_KEY',
      },
    }),
  );
};

Или, что еще лучше, вы можете использовать пакет dotenv, чтобы сохранить ключ API в файле .env и использовать его на своем прокси-сервере. Таким образом, вы можете хранить свой ключ API в секрете, не беспокоясь о том, что он будет раскрыт в вашем коде. Пакет уже установлен в шаблоне create-react-app, поэтому вам не нужно устанавливать или импортировать его самостоятельно.

В файле .env вы можете сохранить свой ключ API следующим образом:

STEPZEN_API_KEY=YOUR_API_KEY

И используйте его в src/setupProxy.js:

authorization: `apikey ${process.ev.STEPZEN_API_KEY}`,

Теперь вы можете запускать приложение локально (с помощью npm start), чтобы сделать GraphQL API доступным по адресу http://localhost:3000/api/YOUR_ENDPOINT/__graphql. При запросе этой конечной точки или сокращенного api/YOUR_ENDPOINT/__graphql будет сделан запрос к https://YOUR_USERNAME.stepzen.net/api/YOUR_ENDPOINT/__graphql. через прокси-сервер. Прокси-сервер также добавит в запрос заголовок authorization, чтобы он не был доступен пользователю вашего приложения.

При использовании клиента Apollo или другого способа выполнения запросов GraphQL вы можете использовать тот же прокси-сервер для выполнения запросов к API StepZen:

const client = new ApolloClient({
  uri: '/api/YOUR_ENDPOINT/__graphql',
  cache: new InMemoryCache(),
});

Таким образом, вы можете отправлять запросы к API StepZen, не раскрывая свой ключ API пользователю вашего приложения.

Использование с Next.js

В этом примере показано, как использовать http-proxy-middleware с приложением Create React, но есть и другие примеры интеграции прокси-сервера с другими платформами и библиотеками. Например, Next.js, одна из самых популярных платформ React.

Для Next.js вы должны реализовать прокси-сервер с маршрутом API вместо src/setupProxy.js< /код>. Этот маршрут API будет назван в честь конечной точки GraphQL, на которую вы хотите настроить таргетинг. Предположим, вы хотите, чтобы прокси-сервер работал на http://YOUR_APP_URL/api/YOUR_ENDPOINT/__graphql. Затем вы должны создать файл с именем api/YOUR_ENDPOINT/__graphql.js и добавить следующий код:

import type { NextApiRequest, NextApiResponse } from 'next';
import { createProxyMiddleware } from 'http-proxy-middleware';

const proxyMiddleware = createProxyMiddleware({
  target: 'https://YOUR_USERNAME.stepzen.net',
  changeOrigin: true,
  headers: {
    authorization: 'apikey YOUR_API_KEY',
  }
});

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  proxyMiddleware(req, res, (result: unknown) => {
    if (result instanceof Error) {
      throw result;
    }
  });
}

export const config = {
  api: {
    externalResolver: true,
  },
};

Теперь вы можете запустить свое приложение локально (с помощью npm run dev), и оно будет использовать ваш прокси-сервер для выполнения запросов к вашему API StepZen. Как и в примере с созданием приложения React, вы можете запросить GraphQL API по адресу http://localhost:3000/api/YOUR_ENDPOINT/__graphql (или сокращенно /api/YOUR_ENDPOINT/__graphql). ), и прокси-сервер перенаправит запрос на https://YOUR_USERNAME.stepzen.net/api/YOUR_ENDPOINT/__graphql, включая заголовок authorization.

Что дальше?

Вы также можете развернуть свое приложение в Netlify или Vercel, и оно будет использовать прокси-сервер для отправки запросов к вашему API StepZen. С этим небольшим прокси-сервером вам больше не нужно беспокоиться о возможном раскрытии вашего ключа API StepZen любому из пользователей вашего приложения. Дополнительные примеры доступны в документации по http-proxy-middleware.

:::информация Также опубликовано здесь.

:::