Clés API et variables d'environnement dans Astro : guide de sécurité complet

Lorsque nous développons des applications Web avec Astro, nous devons fréquemment interagir avec des API et des services externes. La gestion sécurisée des informations d’identification et des clés API est cruciale pour protéger nos applications. Dans ce guide, nous explorerons les meilleures pratiques pour gérer les clés API et les variables d'environnement dans les projets Astro.

Variables d'environnement dans Astro

Configuration de base

Dans Astro, les variables d'environnement sont gérées de la même manière que les autres frameworks modernes. Tout d'abord, nous créons un fichier .env à la racine de notre projet :

# .env
PUBLIC_API_URL=https://api.ejemplo.com
PRIVATE_API_KEY=tu_clave_secreta
DATABASE_URL=postgresql://usuario:password@localhost:5432/db

Pour TypeScript, il est conseillé de créer un fichier env.d.ts pour taper nos variables :

/// <reference types="astro/client" />
interface ImportMetaEnv {
  readonly DATABASE_URL: string;
  readonly PRIVATE_API_KEY: string;
  readonly PUBLIC_API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Accéder aux variables

Dans Astro, on peut accéder aux variables d'environnement de différentes manières selon le contexte :

---
// En archivos .astro
const apiKey = import.meta.env.PRIVATE_API_KEY;
const publicUrl = import.meta.env.PUBLIC_API_URL;
---

// En archivos .ts o .js
const apiKey = import.meta.env.PRIVATE_API_KEY;

Sécurité frontale

Variables publiques ou privées

Astro suit une convention importante pour les variables d'environnement :

• PUBLIC_* : Accessible sur le client et le serveur
• Pas de préfixe PUBLIC_ : Accessible uniquement sur le serveur

# .env
PUBLIC_API_URL=https://api.publica.com    # ✅ Visible en el cliente
PRIVATE_API_KEY=secreto123                # ⛔ Solo servidor

Protection des clés sensibles

Pour gérer les API qui nécessitent une authentification, nous devons créer des points de terminaison sans serveur :

// src/pages/api/data.ts
export async function GET() {
  try {
    const response = await fetch('https://api.externa.com/data', {
      headers: {
        'Authorization': `Bearer ${import.meta.env.PRIVATE_API_KEY}`
      }
    });

    const data = await response.json();
    return new Response(JSON.stringify(data), {
      status: 200,
      headers: {
        'Content-Type': 'application/json'
      }
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: 'Error al obtener datos' }), {
      status: 500
    });
  }
}

Meilleures pratiques

1. Validation des variables d'environnement

Mettre en place une fonction de validation au démarrage de votre candidature :

// src/utils/validateEnv.ts
export function validateEnv() {
  const requiredEnvVars = [
    'DATABASE_URL',
    'PRIVATE_API_KEY',
    'PUBLIC_API_URL'
  ];

  for (const envVar of requiredEnvVars) {
    if (!import.meta.env[envVar]) {
      throw new Error(`La variable de entorno ${envVar} es requerida`);
    }
  }
}

// src/pages/index.astro
---
import { validateEnv } from '../utils/validateEnv';

if (import.meta.env.MODE === 'development') {
  validateEnv();
}
---

2. Gestion d'environnements multiples

Créez des fichiers différents pour chaque environnement :

.env                # Variables por defecto
.env.development    # Variables de desarrollo
.env.production     # Variables de producción
.env.local          # Variables locales (ignoradas en git)

3. Modèle de variables d'environnement

Fournit un fichier .env.example :

# .env.example
PUBLIC_API_URL=https://api.ejemplo.com
PRIVATE_API_KEY=tu_clave_aqui
DATABASE_URL=postgresql://usuario:password@localhost:5432/db

4. Configuration de Git

Assurez-vous d'inclure les fichiers sensibles dans .gitignore :

# .env
PUBLIC_API_URL=https://api.ejemplo.com
PRIVATE_API_KEY=tu_clave_secreta
DATABASE_URL=postgresql://usuario:password@localhost:5432/db

Intégration avec des services externes

Exemple avec Stripe

/// <reference types="astro/client" />
interface ImportMetaEnv {
  readonly DATABASE_URL: string;
  readonly PRIVATE_API_KEY: string;
  readonly PUBLIC_API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Exemple avec Firebase

---
// En archivos .astro
const apiKey = import.meta.env.PRIVATE_API_KEY;
const publicUrl = import.meta.env.PUBLIC_API_URL;
---

Déploiement et CI/CD

Configuration à Vercel

// En archivos .ts o .js
const apiKey = import.meta.env.PRIVATE_API_KEY;

Actions GitHub

# .env
PUBLIC_API_URL=https://api.publica.com    # ✅ Visible en el cliente
PRIVATE_API_KEY=secreto123                # ⛔ Solo servidor

Conseils de sécurité supplémentaires

1. Rotation des clés : implémentez un système pour faire pivoter périodiquement les clés API

// src/pages/api/data.ts
export async function GET() {
  try {
    const response = await fetch('https://api.externa.com/data', {
      headers: {
        'Authorization': `Bearer ${import.meta.env.PRIVATE_API_KEY}`
      }
    });

    const data = await response.json();
    return new Response(JSON.stringify(data), {
      status: 200,
      headers: {
        'Content-Type': 'application/json'
      }
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: 'Error al obtener datos' }), {
      status: 500
    });
  }
}

1. Surveillance de l'utilisation : implémentez la journalisation pour détecter les utilisations abusives

// src/utils/validateEnv.ts
export function validateEnv() {
  const requiredEnvVars = [
    'DATABASE_URL',
    'PRIVATE_API_KEY',
    'PUBLIC_API_URL'
  ];

  for (const envVar of requiredEnvVars) {
    if (!import.meta.env[envVar]) {
      throw new Error(`La variable de entorno ${envVar} es requerida`);
    }
  }
}

// src/pages/index.astro
---
import { validateEnv } from '../utils/validateEnv';

if (import.meta.env.MODE === 'development') {
  validateEnv();
}
---

La gestion sécurisée des clés API et des variables d'environnement est cruciale pour toute application Web moderne. En suivant ces bonnes pratiques chez Astro, nous pouvons :

• Gardez nos informations d'identification en sécurité
• Configurations séparées par environnement
• Mettre en œuvre des validations robustes
• Intégrez les services externes en toute sécurité

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!