Skip to content
DevMeme
6040 of 7590
The worst possible advice for API key management
Security Post #6613 · source on Telegram

The worst possible advice for API key management

Description

This is an anime meme featuring the character Aqua from the series 'KonoSuba'. She is a blue-haired girl shown winking and confidently pointing her finger upwards, as if offering a clever tip. The overlaid white text, in a classic meme font, reads: 'YOU DON'T NEED ENVIRONMENT VARIABLES' at the top, and 'IF YOU USE YOUR API KEY IN THE FRONT END' at the bottom. The humor is derived from the dangerously terrible advice being presented with cheerful confidence. Storing API keys on the client-side (frontend) is a massive security vulnerability, as anyone can view the page source, steal the key, and abuse the associated service. The character Aqua is famously incompetent and foolish, so her image is perfectly suited for delivering this piece of catastrophic 'wisdom,' which resonates with experienced developers who have seen this mistake made by juniors

Categories

Security Frontend Juniors Configuration API

Common Tags

EnvironmentVariable API ApplicationProgrammingInterface SecretsManagement SecurityMisconfiguration Frontend DeveloperHumor

Comments

50
Anonymous ★ Top Pick Sure, put the API key in the frontend. It's the fastest way to get your cloud provider to personally call you to ask why you're trying to mine bitcoin on their entire server fleet
  1. Anonymous ★ Top Pick

    Sure, put the API key in the frontend. It's the fastest way to get your cloud provider to personally call you to ask why you're trying to mine bitcoin on their entire server fleet

  2. Anonymous

    Because nothing screams zero-trust architecture like committing your production Stripe key right next to App.jsx

  3. Anonymous

    The fastest way to turn your API rate limits into a distributed denial-of-wallet attack is to let Reddit find your keys in the minified bundle - at least the crypto miners will thank you for the free compute credits

  4. Anonymous

    Ah yes, the classic 'security through client-side obscurity' approach - because nothing says 'enterprise-grade architecture' like letting every script kiddie with F12 access your production API keys. Bonus points if you've also committed them to a public GitHub repo with 47 forks, ensuring your credentials have better distribution than most CDNs. At least when the bill for 10,000 unauthorized API calls arrives, you'll have a great story for your post-mortem about why environment variables and backend proxy patterns exist

  5. Anonymous

    Ship the key with the bundle; congrats - your CDN is now a planet-scale secret manager (aka NEXT_PUBLIC means EVERY_PUBLIC)

  6. Anonymous

    Frontend API keys: because nothing scales like accidentally funding your competitor's entire inference budget via public GitHub

  7. Anonymous

    Putting the API key in the browser isn’t configuration - it’s open-sourcing your credentials with minification; keep PagerDuty warmed up

  8. @H3R3T1C 1y

    Really I hate (as DevOps) see how a lot of devs put these ENV vars even on the repository because need a "static build" of the website and "nobody will search these keys inside my -obfuscated- javascript" 🔥

    1. @ASCENDEDPULSAR 1y

      Network Tab in Devtools:🗿

    2. @ZgGPuo8dZef58K6hxxGVj3Z2 1y

      In most cases you can't hide it

      1. @ZgGPuo8dZef58K6hxxGVj3Z2 1y

        So it doesn’t matter much

    3. @roped 1y

      also there are some frontenders which hate server actions in next.js, because you cannot make ssg(static build), thats also weird af, they dont understand client server concept

      1. @NaNmber 1y

        Me right there. Have never built an ssr app and have no interest in making one. Only made apis with node, then jumped into react csr (ssg at most) and never moved forward. Is it really worth it bloating server with frontend code (and making your team required to keep in mind 2 codebases envs), taking care of all possible hydration errors, having 2 separate state managers, one on the server and one for interactive client side, and finally simply bringing more libs to your project (react renderer and state managers at min, but most probably remix or next with hella deps in it) ? And you get what? You lose cdn benefits, unless you use special pre fetch services (good luck with cache invalidation tho). The always mentioned CEO DISCOVERY with pre-rendered html and custom og tags for each page? This is solvable by ssg unless you own a huge platform with several k+ of dynamic pages, which is a completely different story with own set of problems. Next cloud hosting vendor lock is also ridiculous. I don't get it how mixing front and back is ever a good decision for single dev and up to mid size company. It only might make sence if you are a big tech with goals and problems far beyond those we all usually have. Change my mind 🤢

        1. dev_meme 1y

          I used to have a website on nextjs with 100k+ pages (not far from 1M with all translations) Got rid of vercel in the first month and moved to dedicated server. One of key basic requirement there is a high single-thread performance and 1TB+ for data on nvme. Worked like a charm

        2. dev_meme 1y

          I mentioned website https://t.me/devs_chat/148524 Sooo, I managed to almost fully resurrect it It's actually not ALL pages that were initially there, plus blog-related images are lost (kinda forever, except for previews for links in telegram, lol) But regarding amount of pages, you can get an idea about it from main sitemap which is used solely to refer to other sitemaps 🌚 https://new-world.guide/s/en-us/sitemap.xml p.s. it's actually well over 1M pages, there's just a lot of "service" pages that are excluded from indexing, eg on hover tooltips

          1. @qtsmolcat 1y

            I made the mistake of opening one of those sitemaps on mobile 😭

            1. dev_meme 1y

              Those are only for English domain tho 🌚

          2. dev_meme 1y

            Talking about just cool things, that will work well on mobile too, you can check 3D models extracted form game’s bundle https://new-world.guide/db/item/mediumhead_so_boss600_mutt5

          3. @NaNmber 1y

            ye that loads fast 👌 what's the stack here? also bare next (how come we call next a bare setup, but whatever...) or some starter like t3? And what have you used for localized routing? I have done that in spa with react router and it was NOT fun (reflecting ui lang switch in url and vice-versa with no reload)

            1. dev_meme 1y

              > And what have you used for localized routing next-translate It was all languages on the same website before but hey, it's so much more fun with dedicated seaparate domain for every language!

              1. dev_meme 1y

                132G .next And this build/page caching have been running just for 7 hours 😂

              2. @NaNmber 1y

                We are currently planning the stack for frontend at the startup, and a guy proposed Next because it was "fast" when he made a pet project using it. Unfortunately, no one has experience with it and we are used to csr react + Nest on backend (which will be replaced by whatever Next uses, I assume). So we'll probably stick with csr and try Next in some Theo/Remix/etc. wrapper for separate sections where indexing would be nice to have ☕️

                1. dev_meme 1y

                  I didn't really get meaning of "fast" for next in that context

                  1. @NaNmber 1y

                    idk too, first load I guess

                    1. dev_meme 1y

                      First load solely depends on how you pre-built page + what's your UI architecture, like, next's purpose is really different

                2. dev_meme 1y

                  What's the goal?

                  1. @NaNmber 1y

                    mainly an interactive app, additionally the blog and whatever

                3. @NaNmber 1y

                  For now it's: vite, react-query, react-router, jotai, biome, shadcn + sass Last one is funny, we have no clue how to use tailwind, but need those components

    4. @neopulsar 1y

      lol you don’t even have to de obfuscate you can just check api request for headers

  9. @patsany_horosh_mne_v_dm_pisat 1y

    Naaaahhhh why yall wanna make me a weeb??!

  10. @Algoinde 1y

    i should make a crawler that detects common web frameworks, loads the page in selenium, clicks all buttons on the page, then observes network requests for free authentication headers

  11. @Rrs_hidden 1y

    Question: If you have a php script in cpanel, is it possible to read it's contents? Since it's url will only run it and can only show the scripts output... Right?

    1. @ZgGPuo8dZef58K6hxxGVj3Z2 1y

      Well yes php executes server side. Unless you didn't set up php it should not leave the server. But if there is a logic or sanitization error on your implementation and you leak the file as a resource then it could be available too

    2. @qtsmolcat 1y

      Poorly configured web servers can be made to leak PHP script contents

    3. @ZgGPuo8dZef58K6hxxGVj3Z2 1y

      Your first mistake is tho choosing php /s

      1. @qtsmolcat 1y

        Well yes, everyone knows you should write your website code in C99

        1. @ZgGPuo8dZef58K6hxxGVj3Z2 1y

          No. C#

          1. @ZgGPuo8dZef58K6hxxGVj3Z2 1y

            No sarcasm here

        2. @Agent1378 1y

          Assembly is the only way!

          1. @qtsmolcat 1y

            Brainfuck or gtfo

          2. @andrei_nik_kolesnikov 1y

            Which one? :)

            1. @Agent1378 1y

              x86 / x86-64, Intel syntax

              1. @andrei_nik_kolesnikov 1y

                ah, too bad I've got it self-hosted on my solar-powered rpi4b :)

  12. @mohamed_023 1y

    You don't need a brain if you leave your API keys in frontend

  13. @undefined_af 1y

    I did try this once I can't stop laughing at myself

  14. Deleted Account 1y

    хочу розавую единарожку😅

    1. dev_meme 1y

      Please, only use English for chatting 🙏

  15. Deleted Account 1y

    I want a pink unicorn😅

    1. dev_meme 1y

      What does it have to do with API Keys on fe though? 😄

  16. Deleted Account 1y

    I don’t know, so fuck did you want to?😄

More like this

More like this in Security →
Security EnvironmentVariable API ApplicationProgrammingInterface
Bug Bounties Then Paid XSS; Now AI Says Duplicate

Bug Bounties Then Paid XSS; Now AI Says Duplicate

Security
Frontier-Lab Agent Intrusion, Five Days Unseen

Frontier-Lab Agent Intrusion, Five Days Unseen

Security
Silly Cat Name: SSH Public and Private Keys

Silly Cat Name: SSH Public and Private Keys

Security
Use J and K for navigation