Clock app

Community feedback

• 

  Kim Fransson•420

  @kim-fransson

  Posted 2 months ago

  Hi!

  I understand your feelings when things does not goes as planned, however there is one really important thing I need to point out, and that is that you are storing the api key on client side.

  const quoteDataResponse = await fetch(
          "https://api.api-ninjas.com/v1/quotes",
          { headers: { "X-Api-Key": import.meta.env.VITE_QUOTES_API_KEY } }
        );
  

  When inspecting the network requests, I can see the key being sent directly, which poses a security risk, anyone can extract it and use it to make unauthorized requests to https://api.api-ninjas.com.

  To mitigate this, it's important to treat API keys as sensitive information. They should be stored securely on the server side and accessed through a backend service. The frontend should then communicate with your backend, which can forward the request to the external API as needed. This keeps the API key hidden from end users and helps prevent misuse.

  Since you're using GitHub Pages, I understand there may not be a backend in place. One easy solution is to use a platform like vercel, which allows you to deploy serverless functions. You can create a simple API route there to act as a proxy between your frontend and the external API. This way, the API key is kept secure on the server side, and your frontend only talks to your own endpoint.

  I like vercel, I use it a lot for different projects, it has a very generous free tier :D

  All the best,

  Kim

  14

  Marked as helpful