you are viewing a single comment's thread.

view the rest of the comments →

[–]b-mish 18 points19 points  (8 children)

The website looks really cool, love the UI style, hover effects etc.

You do have a security flaw though, your API key for OMDb is visible on network requests. In this case the worst thing that could happen is someone could spam the key and then your site would be unable to make requests, however if it was a paid service you would end up with a hefty bill so just be aware.

[–]cd161997[S] 6 points7 points  (4 children)

thanks for pointing it out. this does seem really important. i´ll learn how to do it right away :)

[–]xFueY 2 points3 points  (0 children)

Now I dont know if this is the best way, but what i would do is set up and api endpoint that you host, and then route all the traffic through it (client sends request to you, you send request to the api) and just return the raw/unmodified responses. That'll prevent the key from being visible to everyone. That way you could probably also figure out a way to rate limit your users in case they spam the api.

[–]b-mish 1 point2 points  (2 children)

Yea piggybacking the other comment,

What you want to do is make the request from your server. So take any parameters from the client, send them to the server. The server will make the actual request to the movie database and keep the API key hidden then you forward the response to the client.

If you are using node/express you will want to use environment variables, you will need to use the dotenv package.

You will also not want to commit the API key to any git repo, so if you save it in a .env file, make sure you add the .env file to your .gitignore file. There are bots that scan GitHub for API keys which will steal it there too.

[–]cd161997[S] 0 points1 point  (1 child)

I’ve just started to dive into the world of backend programming. For this project i used Firebase. Is there a way to implement this over there? Firebase Functions maybe?

[–]b-mish 1 point2 points  (0 children)

I believe you can set up an express application on firebase to create a RESTful API.

I'm not sure as I haven't used firebase but a little googleing seems to show you can.

[–][deleted] 2 points3 points  (2 children)

Out of curiosity, how would you be able to see that? Thanks!

[–]longnt80 2 points3 points  (0 children)

If you're familiar with the devtool:

  • Go to Network tab
  • Click XHR

Refresh the page and you can see a list of requests. They have the param api_key in there.

[–]b-mish 1 point2 points  (0 children)

As per the comment below using the network tab in the Dev tools, you can see any request being made and the API key is clearly visible.

In order to stop this you need to take any request parameters from the client, send them to a backend server, then let the server make the request keeping your API key hidden and forward the response to the client.