Frontend är den del av appen som skickas till besökarens webbläsare och körs där: knappar, formulär och allt som syns. Backend är det som körs på en server: den sparar och hämtar data, kontrollerar vem som får göra vad och pratar med andra tjänster. Allt som ligger i frontend kan besökaren läsa, därför ska en hemlig API-nyckel ligga i backend. I Lovable betyder det Secrets och ett anrop från serversidan. Källorna lästes den 19 oktober 2026, och Lovables sidor kontrollerades igen den 23 oktober. Inga appar har provats för artikeln.
Disken och bakrummet
Tänk dig appen som en liten butik. Frontend är disken: det kunden ser, tar på och lämnar sin beställning vid. Backend är bakrummet: lagret, kassaskåpet och personalen som kontrollerar att beställningen är rimlig innan något lämnas ut. Liknelsen är vår egen, men den följer den indelning som MDN:s introduktion till serversidan gör (senast ändrad 12 september 2026).
Enligt MDN körs kod på klientsidan, alltså frontend, i webbläsaren och handlar mest om hur sidan ser ut och beter sig. Den har liten eller ingen åtkomst till datorn den körs på. Koden på serversidan väljer i stället vilket innehåll som skickas till webbläsaren. MDN räknar upp uppgifterna: kontrollera inskickade uppgifter och förfrågningar, spara och hämta i databaser och skicka rätt data till den som frågar. MDN skriver också att det är serversidan som låter en webbplats släppa in bara behöriga användare och visa bara det varje användare får se.
Det sista är det viktiga för dig. En kontroll som bara finns i frontend är som en skylt på disken där det står ”endast personal”. Den hjälper ärliga kunder, men den låser ingenting.
Varför nyckeln inte får ligga i webbläsaren
När appen ska använda en annan tjänst, till exempel en AI-modell, ett betalsystem eller en e-posttjänst, får du ofta en API-nyckel. Den fungerar som ett lösenord för ditt konto hos tjänsten, och anrop med nyckeln kan kosta pengar eller ge åtkomst till uppgifter.
Allt som körs i frontend har skickats till besökarens dator. Det går att öppna och läsa, även om det ser rörigt ut. Lovable säger det rakt ut i sin säkerhetsdokumentation: verktyget genererar frontendkod som körs i webbläsaren, och därför går det inte att lagra API-nycklar och andra hemligheter säkert i den koden. Lovables egen rekommendation är att lagra nyckeln i Secrets och göra anropet i kod på serversidan i stället för i webbläsaren.
Samma sak gäller behörighet. Om appen visar en knapp för administratörer bara när du är administratör, men servern inte själv kontrollerar rollen, kan någon som kringgår knappen ändå nå funktionen. Lovables djupare säkerhetsgranskning letar enligt dokumentationen efter just det: att åtgärder som kräver extra behörighet kontrollerar användarens roll och inte bara att användaren är inloggad. Hur rollerna byggs upp går vi igenom i guiden om behörigheter i Lovable.
Var Lovable lägger delarna
I Lovable kallas de små serverprogrammen Edge Functions. Enligt Lovables dokumentation om Secrets krypteras värdena i Secrets och förs automatiskt in i Edge Functions, och de når aldrig webbläsaren. Du behöver oftast inte lägga in dem för hand: Lovable ber om värdet i en säker inmatningsruta i chatten när en funktion behöver det. Vill du göra det själv finns de under More, Settings och Secrets, där Add secret öppnar en ruta för namn och värde. Ett sparat värde går inte att visa igen i Lovable, bara byta ut eller ta bort.
Två detaljer brukar förvirra. Den första är att vissa nycklar ska synas. Värden vars namn börjar med VITE_ byggs enligt Lovable in i webbläsarkoden och är avsedda att vara offentliga, till exempel den publicerbara nyckeln till databasen. Hittar du en sådan i provet nedan är det alltså inget larm. Lovable vägrar också att spara ett VITE_-namn i Secrets. Den andra är att du som kopplat appen till ett eget Supabase-projekt hanterar hemligheterna i Supabase och inte i Lovable.
Lovable upptäcker enligt säkerhetssidan nycklar som klistras in i chatten och styr dem till Secrets. Vänj dig ändå vid att lämna nyckeln i den säkra rutan och inte i en vanlig chattrad. Det är redaktionens råd, inte Lovables krav.
Det här beställer du av verktyget
Använd beställningen när du ska koppla in en ny tjänst, eller när du misstänker att en nyckel redan ligger fel. Byt ut hakparenteserna.
Appen ska anropa [tjänstens namn] för att [vad anropet ska göra]. Nyckeln till tjänsten är hemlig. Lägg den i Secrets under namnet [TJANST_API_KEY] och be mig om värdet i den säkra inmatningsrutan. Skriv aldrig nyckeln i frontendkoden, i .env eller i ett namn som börjar med VITE_.
Gör själva anropet i en Edge Function på serversidan. Frontend ska bara skicka det användaren har fyllt i till funktionen och visa svaret. Låt funktionen kontrollera att användaren är inloggad och har rätt roll innan den anropar tjänsten. Redovisa till sist vilka filer som körs i webbläsaren och vilka som körs på servern, och bekräfta att nyckeln inte finns i någon fil som skickas till webbläsaren.
Svaret ska innehålla två listor: filer för webbläsaren och filer för servern. Om du vill se vad filerna gör finns en genomgång i Förstå vad du fått: läsa AI-kod utan att kunna programmera. Verktygets bekräftelse är ett påstående, inte ett bevis. Därför kommer provet.
Provet: leta efter nyckeln i webbläsaren
Provet är ditt eget, och vi redovisar inga resultat. Gör det på den publicerade adressen, eftersom det är den versionen besökarna får. Du behöver bara en dator med Chrome, eftersom sökpanelen nedan är beskriven i Chromes dokumentation.
Öppna appen och logga in om det behövs. Öppna sedan utvecklarverktygen: enligt MDN med F12 eller Ctrl + Shift + I i Windows och ⌘ + ⌥ + I på Mac. Klicka i utvecklarverktygen och tryck därefter på Ctrl + Shift + F, eller ⌘ + ⌥ + F på Mac, så öppnas sökpanelen som enligt Chromes dokumentation söker text i alla filer sidan har läst in. Ladda om sidan och använd funktionen som anropar tjänsten en gång, så att de filerna också har lästs in.
Sök på tre saker, en i taget:
- De första sex till åtta tecknen i din nyckel, som du kopierar från tjänstens egen sida. Hela nyckeln behöver du inte klistra in någonstans.
- Början som tjänstens nycklar brukar ha, om tjänsten visar en sådan på sin nyckelsida.
- Namnet du gav nyckeln i Secrets, till exempel TJANST_API_KEY.
Facit: sökningen på nyckelns tecken ska inte ge några träffar. En träff på namnet kan vara ofarlig om det bara står i ett anrop till din funktion, men om värdet står bredvid ligger nyckeln i frontend. Fliken Sources visar filen där träffen finns.
Två förbehåll. Sökpanelen visar enligt Chrome inte innehållet i nätverkssvar, så provet täcker filerna och inte allt som skickas fram och tillbaka. Och ett tomt resultat är ett stickprov, inte ett intyg. Även Lovable skriver att dess säkerhetsverktyg inte kan garantera fullständig säkerhet och inte ersätter en grundlig granskning.
Om du hittar nyckeln: be verktyget flytta den till Secrets och anropet till en Edge Function med beställningen ovan, publicera och gör om provet. Skapa sedan en ny nyckel hos tjänsten och ta bort den gamla, eftersom den har legat öppet. Det är redaktionens råd och inget som står i Lovables dokumentation.
Vart du går härnäst
Frontend och backend är bara indelningen. Vilka uppgifter appen får spara och hur du skyddar dem står i Säkerhet och personuppgifter i en app du inte skrev själv. Inloggning och betalning, som du helst inte bygger själv, finns i Data, inloggning och betalning. Var datan ska bo förklaras i Vilken databas ska jag välja?
Källor och kontrolltid
Alla källor lästes den 19 oktober 2026. Lovables båda sidor kontrollerades igen den 23 oktober 2026, sedan Lovable den 20 oktober flyttat Secrets från Cloud till Settings i More-menyn. Lovables sidor saknar datum. Liknelsen, beställningen och provet är artikelns egna.
- MDN: Introduction to the server side (senast ändrad 12 september 2026) – skillnaden mellan klientsida och serversida och att serversidan begränsar åtkomst.
- Lovable: Security – att hemligheter inte kan lagras säkert i frontendkod, anrop från serversidan, upptäckt av nycklar i chatten, rollkontroll i granskningen och verktygens förbehåll.
- Lovable: Secrets – kryptering, Edge Functions, menyvägen, VITE_-värden och Supabase-undantaget.
- MDN: What are browser developer tools? (senast ändrad 7 oktober 2026) – kortkommandon och fliken Sources.
- Chrome DevTools: Search (senast uppdaterad 30 september 2024) – sökning i inlästa filer och att nätverkssvar inte ingår.
Nästa kontroll senast den 19 januari 2027, eller tidigare om Lovable ändrar hur Secrets eller Edge Functions fungerar.