Fix Security Misconfiguration in SvelteKit

SvelteKit's 'magic' often leads to catastrophic data leaks. The most common security misconfiguration involves the misuse of environment variables and failing to enforce server-side execution boundaries. Devs frequently leak sensitive API keys or database credentials by importing them into client-side components using the 'PUBLIC_' prefix or failing to utilize server-only modules, effectively handing the keys to the kingdom to any script kiddie with DevTools open.

The Vulnerable Pattern

// .env
PUBLIC_INTERNAL_API_KEY=secret_88291022
// src/routes/admin/+page.svelte

The Secure Implementation

The vulnerability lies in the 'PUBLIC_' prefix. In SvelteKit, any variable prefixed with PUBLIC_ is automatically made available to the browser. To fix this, store secrets without the prefix and only import them via '$env/static/private' or '$env/dynamic/private'. Furthermore, sensitive operations must be moved to '+page.server.js' or '+server.js' files to ensure the logic and credentials stay on the backend. Always use the 'server-only' utility to prevent private modules from being accidentally imported into the client bundle.

// .env
INTERNAL_API_KEY=secret_88291022
// src/routes/admin/+page.server.js
import { INTERNAL_API_KEY } from ‘$env/static/private’;
import { error } from ‘@sveltejs/kit’;
export const load = async ({ locals }) => {
if (!locals.user?.isAdmin) throw error(403, ‘Unauthorized’);
const res = await fetch(‘https://internal-api.local/data’, {
headers: { ‘Authorization’: INTERNAL_API_KEY }
});
return { data: await res.json() };
};
// src/routes/admin/+page.svelte