I have developed a website with my friend. For the front-end we are using Angular, and for the backend we’re using Symfony.
Whenever data has to be fetched, an API call is made from front-end to PHP.
My concern is that this API call is clearly visible in network panel. Then some bad guy can easily abuse this API. How can I avoid this?
Also i want to hide my API key in frontend code
My concern is that this API call is clearly visible in network panel.
Yup. There is no way to hide this.
Also i want to hide my API key in frontend code
Refer back to the first point. That’s why you don’t have the api keys in your front end. You want them in the server. Now, if you’re using PHP, you may be putting them there, as long as they are not served to the front end. If anything needs an API key, your frontend should call the server and the server calls the API. I don’t know of any way to hide that.
Your frontend code shouldn’t be using an API key to access your own API. Assuming your front end has some concept of a login session, then if the API has access to the session, just use that for your API auth in addition to API keys.
If you don’t want to use the session for some reason (and there are many good reasons) then you’ll want to issue some short-lived authorization token to every client, and it’ll be the client’s responsibility to include the token in its requests. JWT is popular for this sort of thing, and both Symfony and Angular have excellent libraries for working with JWT.