Client-side rendered secrets are sensitive values like API keys, database credentials, or tokens that are included in JavaScript sent to the browser. Exposing secrets this way is dangerous because anyone can view them using browser developer tools or by inspecting network requests.
Public Exposure: Secrets embedded in client code are visible to anyone, including attackers.
Unauthorized Access: Exposed API keys or tokens can be used to access backend services without permission.
Hard to Rotate: Once a secret is in the client bundle, rotating it safely becomes complex.
Bypasses Server Security: Even if server endpoints have authentication, a leaked secret can allow direct API access.
Never include sensitive secrets in client-side code (
+page.svelte,+layout.svelte).Store secrets in server-only environment variables (
$env/static/private) and access them in+server.jsor server hooks.If a client needs limited access, generate short-lived tokens on the server rather than exposing the main secret.
Use server endpoints as a proxy to call external services securely with secrets hidden from the client.
Regularly rotate and monitor secrets to mitigate leaks.