Fix Improper Assets Management in Qwik

// src/components/api-handler.tsx
import { component$ } from '@builder.io/qwik';
export const ApiHandler = component$(() => {
// VULNERABILITY: Hardcoding sensitive keys in the component logic.
// This string will be bundled into the client-side JS chunks.
const API_KEY = ‘sk_live_51Mz2x8L0PkQ9z0Z1’;
return (
<button onClick$={async () => {
await fetch(https://api.service.com/v1/data?key=${API_KEY});
}}>
Execute Privileged Action

);
});
// public/.env
// VULNERABILITY: Placing environment files in the public folder makes them accessible via browser.
PORT=5173
DB_PASSWORD=admin_password_123

// vite.config.ts
export default defineConfig({
  build: {
    sourcemap: false, // Disable source maps in production to prevent source leakage
  },
});
// src/routes/index.tsx
import { component$ } from ‘@builder.io/qwik’;
import { routeLoader$, server$ } from ‘@builder.io/qwik-city’;
// SECURE: Use routeLoader$ to fetch secrets on the server only
export const useApiConfig = routeLoader$(({ env }) => {
return { apiKey: env.get(‘PRIVATE_API_KEY’) };
});
// SECURE: Use server$ to wrap sensitive logic so it never leaves the backend
const secureApiCall = server$(async function(payload) {
const key = this.env.get(‘PRIVATE_API_KEY’);
return await fetch(https://api.service.com/v1/data?key=${key}, { method: ‘POST’, body: JSON.stringify(payload) });
});
export default component$(() => {
return <button onClick$={() => secureApiCall({ action: ‘sync’ })}>Secure Action;
});