Hantering av hemligheter och miljövariabler

I en React-applikation tillhör miljövariabler två klasser: variabler på serversidan (skickas aldrig till webbläsaren) och variabler på klientsidan (bäddas in i JavaScript-bundlen). Att förstå vilken klass dina variabler tillhör är det första steget i hanteringen av hemligheter, eftersom variabler på klientsidan i praktiken är offentliga när bundlen har driftsatts.

I Vite-projekt inkluderas endast variabler med prefixet VITE_ i klientbundlen. VITE_PUBLIC_API_URL=https://api.example.com är åtkomlig i webbläsarkod via import.meta.env.VITE_PUBLIC_API_URL. Alla andra variabler tas bort från bundlen under byggsteget och förblir begränsade till serversidan.

I Next.js exponerar prefixet NEXT_PUBLIC_ en variabel för JavaScript i webbläsaren. NEXT_PUBLIC_ANALYTICS_ID=UA-123 bäddas in i klientbundlen. Variabler utan prefixet (som DATABASE_URL) är endast åtkomliga i kod på serversidan (Server Components, API routes och Server Actions) och skickas aldrig till webbläsaren.

En variabel utan prefix är fortfarande åtkomlig om den av misstag serialiseras. Om en Server Component till exempel skickar hela sitt konfigurationsobjekt som en prop till en Client Component och konfigurationen innehåller DATABASE_URL, visas hemligheten i HTML-koden som skickas till webbläsaren. Noggrann prop-drilling och granskning av serialiseringen förhindrar detta.

Följande får aldrig förekomma i klientbundlen: databasanslutningssträngar och lösenord, hemliga API-nycklar från tredje part (Stripe secret key, OpenAI API key), privata RSA/EC-nycklar, JWT-signeringshemligheter och interna autentiseringstoken för tjänster. Om något av detta behövs för ett API-anrop ska du vidarebefordra anropet via en server-slutpunkt.

Mönstret Backend for Frontend (BFF) placerar ett tunt serverlager mellan React-applikationen och känsliga externa tjänster. Klienten anropar /api/stripe/charge, BFF-servern lägger till Stripe secret key och anropar Stripe API, och BFF returnerar endast nödvändiga svarsdata. Hemligheterna stannar permanent på servern.

dotenv-vault krypterar din .env-fil och möjliggör säker delning och driftsättning mellan miljöer utan att klartexthemligheter läggs in i versionshanteringen. Alternativ för produktion är bland annat HashiCorp Vault (enterprise), AWS Parameter Store (SSM) och GCP Secret Manager – alla erbjuder API-baserad hämtning av hemligheter under körning i stället för vid byggsteget.

CI/CD-plattformar (GitHub Actions, GitLab CI) erbjuder krypterad lagring av hemligheter som är åtkomlig som miljövariabler under byggen. Lagra hemligheter i GitHub Secrets och referera till dem i arbetsflöden som ${{ secrets.STRIPE_SECRET_KEY }}. Hemligheter maskeras i loggar och inkluderas aldrig i den byggda artefakten.

Next.js och Vite stöder flera .env-filer: .env (alla miljöer), .env.local (lokala åsidosättningar, undantas från Git), .env.development och .env.production. Den lokala filen åsidosätter värden från den gemensamma filen, vilket möjliggör utvecklarspecifik konfiguration utan att påverka andra miljöer.

Efter bygget granskar du JavaScript-bundlen efter oavsiktligt exponerade hemligheter. Kör grep -r "password|secret|api_key" dist/ eller använd ett särskilt verktyg som strings för att analysera de byggda filerna. Vissa hemligheter som råkat inkluderas kan tydligt identifieras genom sitt format (UUID:er, base64-strängar eller nyckelprefix som sk_live_).

Varje miljö och varje tjänst bör endast ha tillgång till de hemligheter den behöver. React-klienten behöver inga hemligheter alls – den bör endast ta emot offentliga identifierare. BFF-servern behöver bara de hemligheter som krävs för de API:er den anropar. Utvecklingsmiljöer bör använda API-nycklar för icke-produktion med begränsade behörigheter och utgiftstak.

Vite använder VITE_ och Next.js använder NEXT_PUBLIC_ för att exponera variabler för webbläsarens bundle. Alla andra variabler är endast tillgängliga på serversidan. Inkludera aldrig databaslösenord, hemliga API-nycklar eller JWT-signeringshemligheter i klientkod. Använd BFF-mönstret för att vidarebefordra känsliga API-anrop. Använd dotenv-vault, AWS Parameter Store eller GitHub Secrets för hantering av produktionshemligheter. Granska byggda bundlar efter oavsiktligt exponerade hemligheter.