Sécuriser variables d'environnement en Angular

Introduction

Vos variables d'environnement contiennent des informations sensibles : clés API, tokens JWT, identifiants de base de données, URLs privées. Les exposer publiquement serait une catastrophe de sécurité. Angular fournit un mécanisme élégant pour gérer ces secrets de manière sécurisée.

Pourquoi protéger les variables

Les variables d'environnement contiennent des données sensibles qui changeront entre votre machine locale et la production :

// .gitignore — Mettre à la racine de votre projet
.env
.env.local
.env.*.local
environment.prod.ts  (optionnel si secrets à l'intérieur)
node_modules/
dist/

Utiliser les fichiers environment

Angular crée automatiquement deux fichiers pour gérer les configurations différentes :

// src/environments/environment.ts (développement)
export const environment = {
    production: false,
    apiUrl: 'http://localhost:3000',
    logLevel: 'debug',
    apiTimeout: 30000
};

// src/environments/environment.prod.ts (production)
export const environment = {
    production: true,
    apiUrl: 'https://api.monsite.com',
    logLevel: 'error',
    apiTimeout: 60000  // Plus tolérant en prod
};

Utilisez-les dans vos services. Angular remplace automatiquement l'import selon la build :

// user.service.ts
import { environment } from '@env/environment';  // Cet import change selon ng serve vs ng build

@Injectable({ providedIn: 'root' })
export class UserService {
    private apiUrl = environment.apiUrl;

    constructor(private http: HttpClient, private logger: LoggerService) {}

    getUsers() {
        this.logger.info('Appel API :', this.apiUrl);  // Différent en dev/prod
        return this.http.get(`${this.apiUrl}/users`);
    }

    getUser(id: number) {
        return this.http.get(
            `${this.apiUrl}/users/${id}`,
            { timeout: environment.apiTimeout }
        );
    }
}

src/
  environments/
    environment.ts           (par défaut pour ng serve)
    environment.prod.ts      (pour ng build --configuration production)
    environment.staging.ts   (facultatif, nécessite angular.json)
                                

Gestion des secrets — Backend-first

Les secrets NE DOIVENT PAS être dans vos fichiers environment Angular. Pourquoi ? Parce que ng build crée du code JavaScript compilé, exposé au navigateur.

// JAMAIS faire ceci !
export const environment = {
    stripeSecretKey: 'sk_live_abc123...',        // Exposé ❌
    firebaseApiKey: 'AIzaS...',                  // Exposé ❌
    jwtSecret: 'my-super-secret-key-2024'      // Exposé ❌
};

// config.service.ts
@Injectable({ providedIn: 'root' })
export class ConfigService {
    constructor(private http: HttpClient) {}

    // Charger la config au démarrage de l'app
    loadPublicConfig() {
        return this.http.get('/api/config').pipe(
            tap(config => {
                // Store uniquement les données PUBLIQUEs
                console.log('Feature flags :', config.features);
                console.log('Stripe public key :', config.stripePublicKey);
            })
        );
    }
}

// Dans app.ts ou app.component.ts
const configService = inject(ConfigService);
await configService.loadPublicConfig().toPromise();

Différences dev/prod en action

Angular remplace automatiquement le fichier environment selon votre commande :

// Développement — Utilise environment.ts
ng serve

// Production — Utilise environment.prod.ts
ng build --configuration production

// Custom configuration (si configuré dans angular.json)
ng build --configuration staging

Configurez vos environnements custom dans angular.json :

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                { "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts" }
              ]
            },
            "staging": {
              "fileReplacements": [
                { "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts" }
              ]
            }
          }
        }
      }
    }
  }
}

Conclusion — Checklist de sécurité

Règles d'or pour sécuriser vos variables d'environnement :