Secrets, Env Vars, And The Frontend Trap

End-of-lesson check

15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-vibecoder-secrets-and-env

1. A developer embeds their Stripe payment API key directly in JavaScript code that runs in the user's browser. What is the primary security risk?

   1. The API key could be accidentally deleted by the browser
   2. The browser will block the API key from making requests
   3. The API key will expire after 24 hours
   4. Anyone who loads the webpage can view the API key in the source code

2. A developer wants to connect their AI coding assistant to a paid AI service. Where should the API key be stored?

   1. In a JavaScript file that gets bundled with the frontend app
   2. In environment variables on the server side, accessed only through server routes
   3. In the README file for easy access by collaborators
   4. In a publicly accessible config file on a CDN

3. What does it mean to 'inspect the diff' when reviewing code changes involving secrets?

   1. Compare the production and staging environments
   2. Measure the performance difference after deployment
   3. Check the visual differences in the app's user interface
   4. Review the code changes to ensure no secrets were accidentally committed

4. Which statement best describes a 'narrow public key' for client configuration?

   1. A key that only works during business hours
   2. A key that only works on mobile devices
   3. A key with limited permissions scoped to specific, safe operations
   4. A key that expires quickly

5. A developer builds an AI app that generates images. They want users to be able to generate images but don't want users to have unlimited free generations. What's the safe architecture?

   1. Put the API key server-side, create backend endpoints that enforce usage limits, and have the frontend call those endpoints
   2. Store usage limits in the browser's local storage
   3. Use a free AI service that doesn't require an API key
   4. Embed the AI service API key in the frontend and trust users to limit their own usage

6. What is the 'frontend trap' mentioned in this context?

   1. Frontend frameworks are difficult to learn
   2. Developers accidentally ship secrets to the browser where they become visible to anyone
   3. Websites load too slowly on mobile devices
   4. The browser prevents accessing certain APIs

7. When the lesson says to 'write the smallest useful scope the agent can finish,' what does this refer to?

   1. Writing the shortest possible code regardless of functionality
   2. Limiting the number of developers who can work on a project
   3. Using the smallest available API
   4. Breaking down a task into the smallest piece that delivers value and can be tested independently

8. What is a 'rollback path' and why is it important when working with secrets and API integrations?

   1. A backup of the database
   2. A way to undo a deployment if something goes wrong, limiting exposure time
   3. A path that allows users to roll back their subscription
   4. A way to reverse bank transactions

9. Why should you 'run the result as a user, not as a fan of the tool' when building with AI coding assistants?

   1. Because testing as a user catches practical issues that developers might miss when excited about the tool's capabilities
   2. Because fans of tools write worse code
   3. Because AI tools are always wrong
   4. Because users prefer different code styles

10. What does 'observable' mean in the context of building safe AI apps?

    1. The app must be visually attractive
    2. The code must have many comments
    3. The app's behavior and data flows must be visible and measurable
    4. The app must use logging frameworks

11. What type of data should an application never expose to the frontend?

    1. User interface styling preferences
    2. Feature flag configurations
    3. Public API endpoint URLs
    4. Private API keys, database credentials, and admin passwords

12. What is a server route in the context of protecting API keys?

    1. A backend endpoint that acts as a proxy between the frontend and external APIs
    2. A path that users take through the app
    3. A navigation link on a website
    4. A way to organize files on the server

13. What test would prove that API key protection is working correctly?

    1. Viewing the page source and confirming no API keys appear in the code
    2. Testing that forms submit successfully
    3. Checking that the website loads quickly
    4. Verifying that all images load

14. Why is it risky to use AI coding assistants to quickly build demos connecting to paid APIs?

    1. Paid APIs don't work with AI assistants
    2. The demo might work but accidentally expose the API key in the code
    3. AI cannot connect to APIs
    4. AI assistants are always slow

15. What does 'reversible' mean in the context of deploying changes that involve secrets?

    1. API responses can be returned in reverse order
    2. Changes can be quickly undone if they cause problems
    3. The code runs backward
    4. The app can be used in reverse