Использование переменных среды в Reactjs с Vite и nodejs
Вы когда-нибудь замечали, что некоторые приложения имеют ключи API, токены или другие конфиденциальные учетные данные, видимые в их исходном коде? или, может быть, ваши собственные приложения?
Что ж, это может быть опасно и поставить под угрозу безопасность ваших служб.
Ключи API, токены и другие конфиденциальные учетные данные используются для аутентификации и авторизации доступа к службам и API. Если эти данные раскрываются в исходном коде вашего приложения, любой, кто может видеть ваш код, может получить к нему доступ и использовать его для выполнения несанкционированных действий от вашего имени.
Более того, раскрывая свои учетные данные, вы позволяете третьим лицам использовать их, что может повлиять на производительность или качество ваших услуг или даже выполнять против них атаки.
В этом руководстве показано, как скрыть ваши ключи API, токены и другие конфиденциальные учетные данные.
Как скрыть конфиденциальные данные?
Вот некоторые из способов сделать это:
- Используйте переменные среды
- Используйте прокси-сервер или серверную платформу как услугу (BaaS)
- Используйте безопасную платформу хостинга
Таким образом, вы можете защитить безопасность своих сервисов и предотвратить их компрометацию.
Теперь мы увидим, как скрыть конфиденциальные учетные данные, создав небольшой бэкэнд для нашего приложения React.
Использование переменных среды в React с Vite
В этом уроке мы собираемся добавить APY KEY OpenWeather в качестве переменной среды.
В частности, мы будем использовать погодный API, который представляет собой службу, которая предоставляет данные о погоде, и после определенного количества запросов она начинает взимать плату за запросы, поэтому мы не хотим, чтобы этот КЛЮЧ API был доступен для общественности. .
Чтобы настроить переменные среды в React с Vite, мы можем выполнить следующие шаги:
1 — Создайте свое приложение React с помощью Vite. Я буду использовать TypeScript, но вы можете использовать JavaScript, если хотите.
2 — Создайте файл .env в корне вашего проекта. Этот файл должен содержать переменные среды, которые вы хотите использовать в своем приложении.
API_KEY=784dc6d4eXXXXXXXXb14460d3a356565 PORT=3001
Как только мы создадим наш файл .env, мы не должны забыть прикрепить его к файлу .gitignore git, иначе наш КЛЮЧ API будет доступен в репозитории.
3 — В Vite для доступа к переменным среды нам нужно получить к ним доступ через import.meta.env. Это возвращает объект, содержащий доступные переменные среды, известные Vite.
Создаваемые переменные должны иметь префикс VITE_ или может быть другим префиксом, перезаписывающим параметр конфигурации по умолчанию envPrefix.
const API_KEY = import.meta.env.VITE_API_KEY
4 — Теперь мы создадим простое приложение, которое будет использовать Weather API для получения температуры в городе.
import { useEffect, useState } from "react"
import { ResponseWeather } from "../types"
const API_KEY = import.meta.env.VITE_API_KEY
import "./App.css"
function App() {
const [weather, setWeather] = useState<ResponseWeather | null>(null)
useEffect(() => {
const options = {
method: "GET",
url: `https://api.openweathermap.org/data/2.5/weather?lat=43.7001&lon=-79.4163&appid=${API_KEY}`)
headers: {
"Content-Type": "application/json",
},
}
axios.request(options).then(response => {
setWeather(response.data)
})
}, [])
if (!weather) return null
return (
<div className='App'>
<h1>{weather?.name}</h1>
<h2>{Math.floor(weather?.main.temp - 273.15)} °C</h2>
<i>
<img
src={`https://openweathermap.org/img/wn/${weather?.weather[0].icon}@2x.png`}
alt={weather?.weather[0].description}
/>
</i>
<p>{weather?.weather[0].main}</p>
</div>
)
}
export default App
Теперь, когда мы скрыли наш API KEY с помощью переменной среды и убедились, что файл .env не загружается в репозиторий, мы сделали половину работы.
ОБНОВЛЕНИЕ: хотя это не половина работы по обеспечению безопасности нашего приложения, это все, что мы можем сделать на стороне клиента. Убедитесь, что мы не сохраняем в общедоступном репозитории ключи или конфиденциальные переменные для проекта. Поскольку это будет еще один уязвимый маршрут доступа, возможно, кто-то не сможет получить доступ к приложению в Интернете, но каким-то образом сможет найти репозиторий проекта.
И почему мы это говорим? Поскольку наш КЛЮЧ API по-прежнему отображается в окончательной сборке, если мы проверим наше приложение в браузере, мы найдем значение КЛЮЧА API, поэтому единственный способ полностью скрыть это значение — это разместить его на стороне сервера, создав серверная служба.
Этот бэкенд будет отвечать за выполнение запросов к службе Openweather и нашему клиенту, то есть наше приложение React будет запрашивать этот бэкэнд.
Создание серверной службы
Чтобы создать наш бэкенд, нам нужно будет настроить сервер, к которому мы сможем отправлять запросы.
1 — Мы установим следующие библиотеки:
pnpm express cors dotenv axios
В этом случае, когда мы используем Typescript, нам понадобится дополнительно
pnpm ts-node @types/express @types/cors @types/dotenv @types/node
- экспресс для создания сервера
- cors, чтобы разрешить совместное использование ресурсов между разными доменами.
- dotenv для загрузки переменных окружения.
- axios для получения данных.
2 — Мы создаем файл с именем api.ts в корне проекта. Мы также пользуемся возможностью, чтобы добавить новую команду в package.json для повышения нашего сервера.
"scripts": {
"server": "npx ts-node api.ts",
...
}
3 — Создаем сервер и делаем доступной конечную точку, которую будем использовать из React.
import express from "express"
import { Request, Response } from "express"
import * as dotenv from "dotenv"
import cors from "cors"
import axios from "axios"
dotenv.config()
const app = express()
app.use(cors())
app.get("/api/weather", (req: Request, res: Response) => {
const options = {
method: "GET",
url: `https://api.openweathermap.org/data/2.5/weather?lat=43.7001&lon=-79.4163&appid=${process.env.VITE_API_KEY}`,
headers: {
"Content-Type": "application/json",
},
}
axios
.request(options)
.then(response => {
res.json(response.data)
})
.catch(err => {
console.log(err)
})
})
app.listen(process.env.VITE_PORT, () => console.log(`Server on port ${process.env.VITE_PORT || 3001}`))
Теперь, когда у нас есть серверная служба, наш API KEY полностью скрыт от клиента. Мы могли бы добавить больше уровней безопасности, как мы хотим, например, в cors добавить только домен, на котором размещено наше приложение, и только этот домен может делать запросы.
4 — Запускаем наш сервер следующей командой
pnpm run server
Наконец, нам просто нужно заменить URL-адрес запроса, который мы делаем в React, на тот, который у нас есть в бэкэнде. Нам больше не нужно получать КЛЮЧ API в React.
// Before
url: `https://api.openweathermap.org/data/2.5/weather?lat=43.7001&lon=-79.4163&appid=${API_KEY}`)
// After
url: "https://localhost:3001/api/weather"
Вот и все! наше приложение продолжает работать как обычно, только если наш ключ API больше не отображается на стороне клиента.
Заключение
В заключение, скрыть конфиденциальные данные относительно просто, просто следуйте инструкциям, упомянутым выше, и с этим мы сможем избежать серьезных рисков и осложнений.
Я надеюсь, что это поможет вам сохранить ваши проекты в безопасности.
Подробнее:
Хотите связаться с Автором?
Любите общаться с друзьями по всему миру через Twitter.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
