Как обезопасить 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, и сообщения по обратной связи будут успешно отправляться без риска раскрытия конфиденциальной информации.
Извините, но ваша ситуация выглядит странно. <br/> Во первых, Вы взяли апи для отправки сообщений, которое позиционируется как не требующее серверной части : <br/> "Послать письмо из явоскрипта". <br/> Во вторых публичный ключ, который вы хотите скрыть - это аналог подменного номера телефона на досках объявлений.   Типа <b>написать письмо можно и ваш реальный  емайл не светиться. </b> <br/> <br/> В  вашем случае "ключи доступа к сторонним сервисам никогда не передаются на сторону клиента" не принимимо. <br/> Это получается "масло масленное" .
Похожие вопросы