kit icon indicating copy to clipboard operation
kit copied to clipboard

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

Open elliott-with-the-longest-name-on-github opened this issue 3 years ago • 4 comments

Previously, the contents of $env/static/* were written to the disk in .svelte-kit/runtime/env/static/*.js. We'd like to prevent dumping the environment to the disk, so this is a test implementation of using virtual modules.

A couple of questions for those wiser than I:

  1. How do we make this work with build? It seems to work in dev, but throws a big red error when running build.
  2. Are there any cases where this might come back to bite us?

Big thanks to @dominikg for the first "test" implementation of this.


HEADS UP!

We're about to embark on a significant redesign that will touch many parts of the codebase. Until that work is finished, PRs are very likely to result in merge conflicts, and will likely be ignored until the redesign work is complete (by which time they will likely be stale). Please consider delaying your PR until then.

Thank you for understanding!


Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • [ ] This message body should clearly illustrate what problems it solves.
  • [ ] Ideally, include a test that fails without this PR but passes with it.

Tests

  • [ ] Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

  • [ ] If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

🦋 Changeset detected

Latest commit: d6957ecc9a22bac171b021beb6e8056fcfef6e0a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sveltejs/kit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Aug 05 '22 03:08 changeset-bot[bot]

Note for those smarter than I am: I tried pulling the env logic out into its own plugin just for fun. (Code below.) It didn't work, unfortunately, with the same behavior: Fine in dev, broken on build.

/**
 * @return {import('vite').Plugin[]}
 */
export function sveltekit() {
	return [env(), ...svelte(), 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',

		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
					);
			}
		}
	};
}

Extracted the env module replacement out into its own Vite plugin, adding it to the array returned by sveltekit. Tadaa!

@Rich-Harris

I think this should be good to go. The problem was in utils.js. Frankly, I have no idea what's going on with the previous code:

	if (!process.env.BUNDLED) {
		alias.push(
			{
				find: '$env/static/public',
				replacement: path.posix.join(config.outDir, 'runtime/env/static/public.js')
			},
			{
				find: '$env/static/private',
				replacement: path.posix.join(config.outDir, 'runtime/env/static/private.js')
			}
		);
	}

	alias.push({
		find: '$env',
		replacement: `${get_runtime_directory(config)}/env`
	});

	return alias;

But the following makes sense, I suppose, now that we're not aliasing $env itself?

	const base = `${get_runtime_directory(config)}/env`;

	alias.push(
		{
			find: '$env/dynamic/public',
			replacement: `${base}/dynamic/public.js`
		},
		{
			find: '$env/dynamic/private',
			replacement: `${base}/dynamic/private.js`
		}
	);

	return alias;

The root of the problem is that I just don't know what the heck process.env.BUNDLED denotes and why we needed to change the behavior of the specific aliases based on it...