demo-crm.lovable.app

A security scan found the secret behind VITE_OPENAI_API_KEY in this app's browser bundle, where every visitor can read it. Move every call that uses it to the server: put it in a Supabase edge function that holds the key as a secret, and have the browser call that endpoint instead. Remove VITE_OPENAI_API_KEY from the client code and from .env. I will rotate the key myself in the vendor's dashboard, so do not worry about the value. Change only what this needs. Do not refactor or "improve" anything else. When it is done, re-scan the app on leftunlocked.com to confirm the fix landed.

An AI editor will sometimes change more than you asked. Read what it proposes before accepting it, and re-scan afterwards rather than taking its word.

Rotate the key now in the vendor dashboard (it has been public since the build shipped), remove it from the browser code, and move the call behind a server function like the ones below. Only publishable keys belong in the browser.

# Before (copied into the browser bundle by the public prefix):
VITE_OPENAI_API_KEY=sk-...

# After (server only; read it from a function, never from the browser):
OPENAI_API_KEY=sk-...

The prefix is the switch: VITE_, NEXT_PUBLIC_, REACT_APP_, EXPO_PUBLIC_ all mean "ship this to every visitor".

// The key lives in the function's secrets, never in the browser:
//   supabase secrets set OPENAI_API_KEY=sk-...
Deno.serve(async (req) => {
  const { prompt } = await req.json();
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: { Authorization: `Bearer ${Deno.env.get("OPENAI_API_KEY")}`, "Content-Type": "application/json" },
    body: JSON.stringify({ model: "gpt-4o-mini", messages: [{ role: "user", content: prompt }] }),
  });
  return new Response(await r.text(), { headers: { "Content-Type": "application/json" } });
});

// In the app, call the function instead of the vendor:
// const { data } = await supabase.functions.invoke("ask", { body: { prompt } });

Replace the vendor URL and env name with the vendor's. Deploy with: supabase functions deploy ask

export default async function handler(req, res) {
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify(req.body),
  });
  res.status(r.status).json(await r.json());
}

// Browser: fetch("/api/ask", { method: "POST", body: JSON.stringify({...}) })

Add OPENAI_API_KEY (no VITE_ or NEXT_PUBLIC_ prefix) in Vercel > Settings > Environment Variables.

export default async (req) => {
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json" },
    body: await req.text(),
  });
  return new Response(await r.text(), { status: r.status, headers: { "Content-Type": "application/json" } });
};

// Browser: fetch("/.netlify/functions/ask", { method: "POST", body: JSON.stringify({...}) })

Set OPENAI_API_KEY in Site configuration > Environment variables.

export async function POST(req: Request) {
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json" },
    body: await req.text(),
  });
  return new Response(await r.text(), { status: r.status, headers: { "Content-Type": "application/json" } });
}

process.env.OPENAI_API_KEY without NEXT_PUBLIC_ stays on the server. Anything NEXT_PUBLIC_ is copied into the browser bundle.

app.post("/api/ask", async (req, res) => {
  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify(req.body),
  });
  res.status(r.status).json(await r.json());
});

Lovable hosting does not let you set response headers. Connect the project to GitHub, deploy it on Netlify or Vercel (both free, ten minutes), and use that snippet. Until then, a Cloudflare rule in front of your domain also works.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Strict-Transport-Security", "value": "max-age=31536000" }
      ]
    }
  ]
}

Put the file in the project root next to package.json and redeploy. If you already have a vercel.json, add the entry to its "headers" list. This tells browsers to use HTTPS on this host for a year, and they remember it. Add includeSubDomains once every subdomain is served over HTTPS; that part cannot be taken back quickly.

/*
  Strict-Transport-Security: max-age=31536000

The file must end up in the folder Netlify publishes (public/ for Vite, out/ or the site root otherwise). Netlify reads it on deploy; no other config needed. This tells browsers to use HTTPS on this host for a year, and they remember it. Add includeSubDomains once every subdomain is served over HTTPS; that part cannot be taken back quickly.

app.use((req, res, next) => {
  res.setHeader("Strict-Transport-Security", "max-age=31536000");
  next();
});

Add it before your routes and static files so every response carries the header. This tells browsers to use HTTPS on this host for a year, and they remember it. Add includeSubDomains once every subdomain is served over HTTPS; that part cannot be taken back quickly.

Rules > Transform Rules > Modify Response Header > Create rule
  When: All incoming requests
  Then: Set static header
    Name:  Strict-Transport-Security
    Value: max-age=31536000

Applies at the edge, so it works even if your host cannot set headers (GitHub Pages, Lovable hosting). This tells browsers to use HTTPS on this host for a year, and they remember it. Add includeSubDomains once every subdomain is served over HTTPS; that part cannot be taken back quickly.

add_header Strict-Transport-Security "max-age=31536000" always;

Then: sudo nginx -t && sudo systemctl reload nginx This tells browsers to use HTTPS on this host for a year, and they remember it. Add includeSubDomains once every subdomain is served over HTTPS; that part cannot be taken back quickly.

Header always set Strict-Transport-Security "max-age=31536000"

Needs mod_headers, which most hosts enable. Place the file in the site root. This tells browsers to use HTTPS on this host for a year, and they remember it. Add includeSubDomains once every subdomain is served over HTTPS; that part cannot be taken back quickly.

Lovable hosting does not let you set response headers. Connect the project to GitHub, deploy it on Netlify or Vercel (both free, ten minutes), and use that snippet. Until then, a Cloudflare rule in front of your domain also works.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Content-Security-Policy", "value": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://*.googleapis.com https://*.firebaseio.com; frame-ancestors 'self'" }
      ]
    }
  ]
}

Put the file in the project root next to package.json and redeploy. If you already have a vercel.json, add the entry to its "headers" list. A policy this strict can block scripts or styles your app loads from other domains. Ship it as Content-Security-Policy-Report-Only for a day first, watch the browser console for "blocked" messages, add those origins, then rename the header back.

/*
  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://*.googleapis.com https://*.firebaseio.com; frame-ancestors 'self'

The file must end up in the folder Netlify publishes (public/ for Vite, out/ or the site root otherwise). Netlify reads it on deploy; no other config needed. A policy this strict can block scripts or styles your app loads from other domains. Ship it as Content-Security-Policy-Report-Only for a day first, watch the browser console for "blocked" messages, add those origins, then rename the header back.

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://*.googleapis.com https://*.firebaseio.com; frame-ancestors 'self'");
  next();
});

Add it before your routes and static files so every response carries the header. A policy this strict can block scripts or styles your app loads from other domains. Ship it as Content-Security-Policy-Report-Only for a day first, watch the browser console for "blocked" messages, add those origins, then rename the header back.

Rules > Transform Rules > Modify Response Header > Create rule
  When: All incoming requests
  Then: Set static header
    Name:  Content-Security-Policy
    Value: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://*.googleapis.com https://*.firebaseio.com; frame-ancestors 'self'

Applies at the edge, so it works even if your host cannot set headers (GitHub Pages, Lovable hosting). A policy this strict can block scripts or styles your app loads from other domains. Ship it as Content-Security-Policy-Report-Only for a day first, watch the browser console for "blocked" messages, add those origins, then rename the header back.

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://*.googleapis.com https://*.firebaseio.com; frame-ancestors 'self'" always;

Then: sudo nginx -t && sudo systemctl reload nginx A policy this strict can block scripts or styles your app loads from other domains. Ship it as Content-Security-Policy-Report-Only for a day first, watch the browser console for "blocked" messages, add those origins, then rename the header back.

Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https:; connect-src 'self' https://*.supabase.co wss://*.supabase.co https://*.googleapis.com https://*.firebaseio.com; frame-ancestors 'self'"

Needs mod_headers, which most hosts enable. Place the file in the site root. A policy this strict can block scripts or styles your app loads from other domains. Ship it as Content-Security-Policy-Report-Only for a day first, watch the browser console for "blocked" messages, add those origins, then rename the header back.