Как обезопасить Api ключи в приложении, написанном на React?

Как правильно скрыть API-ключи при помощи .env в React-приложении, чтобы после нажатия кнопки "Отправить" сообщения по обратной связи продолжали успешно отправляться?
  • 9 августа 2024 г. 6:43
Ответы на вопрос 2
Для обезопасивания API ключей в React-приложении можно использовать переменные среды (.env). 

1. Создайте файл .env в корневой папке вашего проекта React. В этом файле вы можете задать все конфиденциальные переменные, включая API ключи, в формате "KEY=VALUE".

2. В вашем React-приложении вы можете использовать пакет dotenv для чтения переменных среды из файла .env. Установите пакет с помощью npm:

```
npm install dotenv
```

3. Импортируйте пакет dotenv в начале вашего файла, где необходимо использовать API ключи:

```
require('dotenv').config();
```

4. Теперь вы можете получить доступ к вашим API ключам, используя процесс.env.KEY, где KEY - это имя переменной из файла .env.

Например:

```
const apiKey = process.env.API_KEY;
```

5. Убедитесь, что файл .env добавлен в файл .gitignore, чтобы избежать публикации конфиденциальных данных на Github или других платформах управления версиями.

После этого, когда пользователь нажимает кнопку "Отправить" в вашем React-приложении, вы можете использовать сохраненные API ключи для отправки запросов к API, и сообщения по обратной связи будут успешно отправляться без риска раскрытия конфиденциальной информации.
Извините, но ваша ситуация выглядит странно. 
Во первых, Вы взяли апи для отправки сообщений, которое позиционируется как не требующее серверной части :
"Послать письмо из явоскрипта".
Во вторых публичный ключ, который вы хотите скрыть - это аналог подменного номера телефона на досках объявлений. Типа написать письмо можно и ваш реальный емайл не светиться.

В вашем случае "ключи доступа к сторонним сервисам никогда не передаются на сторону клиента" не принимимо.
Это получается "масло масленное" .
Похожие вопросы