Tel un ami de confiance, SvelteKit sait garder vos secrets. Lorsque vous écrivez votre backend et votre frontend dans le même projet, il est très facile d'accidentellement importer des données sensibles dans votre code front-end (des variables d'environnement contenant des clés d'API, par exemple). SvelteKit fournit un moyen de vous protéger contre ça : les modules réservés au serveur. ## Variables d'environnement privées [!VO]Private environment variables Les modules [`$env/static/private`]($env-static-private) et [`$env/dynamic/private`]($env-dynamic-private) peuvent être uniquement importés dans des modules réservés au serveur, comme [`hooks.server.js`](hooks#Server-hooks) ou [`+page.server.js`](routing#page-page.server.js). ## Utilitaires réservés au serveur [!VO]Server-only utilities Le module [`$app/server`]($app-server), qui contient une fonction [`read`]($app-server#read) permettant de lire des assets sur le système de fichiers, peuvent également uniquement être importés par du code qui s'exécute sur le serveur. ## Vos modules [!VO]Your modules Vous pouvez créer vos propres modules réservés au serveur de deux manières : - ajouter `.server` au nom de fichier, par ex. `secrets.server.js` - placer vos fichiers dans le dossier `$lib/server`, par ex `$lib/server/secrets.js` ## Comment ça fonctionne [!VO]How it works À chaque fois que du code exposé au public importe du code réservé au serveur (directement ou indirectement)... ```js // @errors: 7005 /// file: $lib/server/secrets.js export const atlantisCoordinates = [/* censuré */]; ``` ```js // @errors: 2307 7006 7005 /// file: src/routes/utils.js export { atlantisCoordinates } from '$lib/server/secrets.js'; export const add = (a, b) => a + b; ``` ```html /// file: src/routes/+page.svelte ``` ... SvelteKit va produire une erreur : ``` Cannot import $lib/server/secrets.ts into code that runs in the browser, as this could leak sensitive information. src/routes/+page.svelte imports src/routes/utils.js imports $lib/server/secrets.ts If you're only using the import as a type, change it to `import type`. ``` Même si le code exposé au public — `src/routes/+page.svelte` — n'utilise que l'export `add` et non l'export secret `atlantisCoordinates`, le code secret pourrait se retrouver dans du JavaScript que le navigateur télécharge, ce qui implique que toute la chaîne d'import est considérée non sécurisée. Cette fonctionnalité fonctionne également avec les imports dynamiques, même ceux interpolés comme ``await import(`./${foo}.js`)``. > [!NOTE] Les frameworks de test unitaire comme Vitest ne font pas la différence entre le code > réservé au serveur et celui exposé au public. Pour cette raison, la détection d'imports illégaux > est désactivée lors de l'exécution des tests, comme déterminé par `process.env.TEST === 'true'`. ## Plus de lecture [!VO]Further reading - [Tutoriel : Variables d'environnement](/tutorial/kit/env-static-private)