feat: Increase security by virtualizing $env/static/*

.changeset/lovely-boxes-give.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[feat] `$env/static/*` are now virtual to prevent writing sensitive values to disk

packages/kit/src/core/sync/write_ambient.js

@@ -1,5 +1,4 @@
 import path from 'path';
-import colors from 'kleur';
 import { get_env } from '../../vite/utils.js';
 import { write_if_changed, reserved, valid_identifier } from './utils.js';
 
@@ -16,18 +15,6 @@ const types_reference = '/// <reference types="@sveltejs/kit" />\n\n';
 export function write_ambient(config, mode) {
 	const env = get_env(mode, config.env.publicPrefix);
 
-	// TODO when testing src, `$app` points at `src/runtime/app`... will
-	// probably need to fiddle with aliases
-	write_if_changed(
-		path.join(config.outDir, 'runtime/env/static/public.js'),
-		create_env_module('$env/static/public', env.public)
-	);
-
-	write_if_changed(
-		path.join(config.outDir, 'runtime/env/static/private.js'),
-		create_env_module('$env/static/private', env.private)
-	);
-
 	write_if_changed(
 		path.join(config.outDir, 'ambient.d.ts'),
 		autogen_comment +
@@ -43,23 +30,12 @@ export function write_ambient(config, mode) {
  * @param {Record<string, string>} env
  * @returns {string}
  */
-function create_env_module(id, env) {
+export function create_env_module(id, env) {
 	/** @type {string[]} */
 	const declarations = [];
 
 	for (const key in env) {
-		const warning = !valid_identifier.test(key)
-			? 'not a valid identifier'
-			: reserved.has(key)
-			? 'a reserved word'
-			: null;
-
-		if (warning) {
-			console.error(
-				colors
-					.bold()
-					.yellow(`Omitting environment variable "${key}" from ${id} as it is ${warning}`)
-			);
+		if (!valid_identifier.test(key) || reserved.has(key)) {
 			continue;
 		}
 

packages/kit/src/vite/index.js

@@ -14,8 +14,9 @@ import { generate_manifest } from '../core/generate_manifest/index.js';
 import { get_runtime_directory, logger } from '../core/utils.js';
 import { find_deps, get_default_config as get_default_build_config } from './build/utils.js';
 import { preview } from './preview/index.js';
-import { get_aliases, resolve_entry, prevent_illegal_rollup_imports } from './utils.js';
+import { get_aliases, resolve_entry, prevent_illegal_rollup_imports, get_env } from './utils.js';
 import { fileURLToPath } from 'node:url';
+import { create_env_module } from '../core/sync/write_ambient.js';
 
 const cwd = process.cwd();
 
@@ -61,7 +62,53 @@ const enforced_config = {
  * @return {import('vite').Plugin[]}
  */
 export function sveltekit() {
-	return [...svelte(), kit()];
+	return [...svelte(), env(), kit()];
+}
+
+/**
+ * Returns the SvelteKit environment plugin. Replaces `$env/static/*` imports
+ * with the actual environment variables.
+ * @return {import('vite').Plugin}
+ */
+function env() {
+	/** @type {import('types').ValidatedConfig} */
+	let svelte_config;
+
+	/** @type {import('vite').ConfigEnv} */
+	let vite_config_env;
+
+	return {
+		name: 'vite-plugin-svelte-kit:env',
+
+		async config(_, config_env) {
+			vite_config_env = config_env;
+			svelte_config = await load_config();
+		},
+
+		async resolveId(id) {
+			switch (id) {
+				case '$env/static/private':
+					return '\0$env/static/private';
+				case '$env/static/public':
+					return '\0$env/static/public';
+			}
+		},
+
+		async load(id) {
+			switch (id) {
+				case '\0$env/static/private':
+					return create_env_module(
+						'$env/static/private',
+						get_env(vite_config_env.mode, svelte_config.kit.env.publicPrefix).private
+					);
+				case '\0$env/static/public':
+					return create_env_module(
+						'$env/static/private',
+						get_env(vite_config_env.mode, svelte_config.kit.env.publicPrefix).public
+					);
+			}
+		}
+	};
 }
 
 /**
@@ -411,8 +458,8 @@ function kit() {
 				console.log(colors.bold().yellow('\nNo adapter specified'));
 				// prettier-ignore
 				console.log(
-					`See ${colors.bold().cyan('https://kit.svelte.dev/docs/adapters')} to learn how to configure your app to run on the platform of your choosing`
-				);
+          `See ${colors.bold().cyan('https://kit.svelte.dev/docs/adapters')} to learn how to configure your app to run on the platform of your choosing`
+        );
 			}
 		},
 

packages/kit/src/vite/utils.js

@@ -128,24 +128,22 @@ export function get_aliases(config) {
 		}
 	}
 
+	const base = process.env.BUNDLED
+		? `${get_runtime_directory(config)}/env`
+		: path.posix.join(config.outDir, 'runtime/env');
 	if (!process.env.BUNDLED) {
 		alias.push(
 			{
-				find: '$env/static/public',
-				replacement: path.posix.join(config.outDir, 'runtime/env/static/public.js')
+				find: '$env/dynamic/public',
+				replacement: `${base}/dynamic/public.js`
 			},
 			{
-				find: '$env/static/private',
-				replacement: path.posix.join(config.outDir, 'runtime/env/static/private.js')
+				find: '$env/dynamic/private',
+				replacement: `${base}/dynamic/private.js`
 			}
 		);
 	}
 
-	alias.push({
-		find: '$env',
-		replacement: `${get_runtime_directory(config)}/env`
-	});
-
 	return alias;
 }
 

packages/kit/src/vite/utils.spec.js

@@ -236,16 +236,12 @@ test('transform kit.alias to resolve.alias', () => {
 		{ find: /^key$/.toString(), replacement: 'value' },
 		{ find: /^key\/(.+)$/.toString(), replacement: 'value/$1' },
 		{
-			find: '$env/static/public',
-			replacement: '.svelte-kit/runtime/env/static/public.js'
+			find: '$env/dynamic/public',
+			replacement: '.svelte-kit/runtime/env/dynamic/public.js'
 		},
 		{
-			find: '$env/static/private',
-			replacement: '.svelte-kit/runtime/env/static/private.js'
-		},
-		{
-			find: '$env',
-			replacement: 'src/runtime/env'
+			find: '$env/dynamic/private',
+			replacement: '.svelte-kit/runtime/env/dynamic/private.js'
 		}
 	]);
 });