2

I started learning Angular and I noticed that every call I make to backend can be seen from developer tool. So when I got method/function like this: 

getUser(userId){
    return this.http.post('server/page/get-user', {id:userId});
}

And then in some component I would call it like this:

this.userService.getUser(2).subscribe((data)=> {
    console.log(data)
})

What basically returns user information (name, address etc), based on what user id gets posted. If one wanted to get random user information, couldn't they just make API call to this endpoint, with random number in request payload and just get that user information?

I read something that one way to fix this is to use JWT, what basically encrypts the payloads, but isn't there option to like turn this api call usable only in my app? or make it at least hidden from developers tools?

user1203497
  • 507
  • 3
  • 11
  • 18
  • You can use `debounceTime` operator to avoid request spam by your portal. Your API can accept a bearer header with a token, this way only who has this token can make requests. This is just the basic. – Jacopo Sciampi Dec 05 '18 at 10:24
  • 1st rule on security in web development is that you cannot control the client. Even if you could hide it from devtools I could use other tools to see all requests – rypskar Dec 05 '18 at 10:24
  • 1
    If you don't protect your API by some authentication mechanism and access control on the server everyone can use it to get all kinds of information. – Henry Dec 05 '18 at 10:24
  • I had to rework my angular app for Angular Universal and now I had also rework how API works. Basically I had to define header in API to allow my app accessing it. Now I wonder, couldn't I use something similar to stop people to access my API from outside? With my current setup, people can copy API endpoint and open that in Chrome and get public info, but as soon as they try use that endpoint in their app, it will not return any info because of CORS. I don't know if this is actually works like I am thinking, but it just something that came in to my mind. – user1203497 Dec 31 '18 at 09:05

3 Answers3

7

Is there way hide API call? or make it private?

No. The browser belongs to the user. What it does is under their control, not yours.

What basically returns user information (name, address etc), based on what user id gets posted. If one wanted to get random user information, couldn't they just make API call to this endpoint, with random number in request payload and just get that user information?

If you are running an unauthenticated API. Yes.

It sounds like you desire security through obscurity which is highly unreliable.

I read something that one way to fix this is to use JWT, what basically encrypts the payloads

Not really.

You need authentication / authorisation.

You need to identify the user (this could be through a username and password, OAuth with a provider like Facebook or Twitter, etc).

Then you need to make sure that user is allowed to read the data they are requesting. e.g. A user record can only be accessed by the user who owns the record or a user with the admin role.

isn't there option to like turn this api call usable only in my app?

No

or make it at least hidden from developers tools?

No

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • But couldn't they just login in my app, copy that generated token and then use that token in their app to make call to my API and still get the data? – user1203497 Dec 05 '18 at 12:09
  • 1
    @user1203497 — Yes. But since it is data you are willing to let them see anyway, that shouldn't matter. – Quentin Dec 05 '18 at 12:11
  • My whole purpose of `getUser` function was to retrieve all user information. Then later I could simply use that function to get user information, whether it is settings page, where user needs to see information (like email) that is only for his eye or on user public profile that has public information (like name). So now If I am using Angular, I can't use such simple way and I have to basically create two functions- one for private data and other public that. Both of these are essentially doing same thing, just one can only retrieve data of authenticated user. – user1203497 Dec 05 '18 at 12:31
  • check this one. For example, hitting this websites url https://track.aftership.com/shreetirupati/115601676472 or http://www.shreetirupaticourier.net/Frm_DocTrack.aspx?docno=115601676472, is not hitting any API, does this mean they are accessing data directly from DB in front-end? – Satish Patro Jul 02 '19 at 06:40
  • How about obscuring the data returned from API-calls? Are there any standard-practices of doing that or does it all rely on the fact that you shouldn't return data that you don't want someone to stumble across in the networks tab? (Obviously not as a replacement for authentication/authorization of the API-endpoints) – Jeppe Aug 23 '19 at 09:19
4

In short, no.

You have ways of hiding requests by hitting endpoints that process your request, but since you start, consider you can't.

Let me explain further : Javascript runs in the client's browser. It means the client has full access to your front-end code : if he wants, he can completely break down your application.

The plus side is that it can only be broken on his own computer : the client can't mess with another client's browser.

On the other side, your server can be accessed by anything, but you're the one that has master control on it : you should secure it.

To do that, as you said, you can use JWT. But JWT is an authentication process, which is basically an encoded string. By decoding it, you can get client information, but they aren't fetch from the DB, they are fetch from the token itself.

If you want to secure your endpoints, you could for instance state that only the user with the ID provided by the token can access your endpoint : tokens can't be forged without the signature. This wouls secure your endpoint and prevent other users from making modifications.

On the other side, you could also prevent other applications from using this endpoint. For instance, if your user uses its token in an app other than yours, you could refuse that. But it's becoming a little more advanced, so for now, I think you should focus on securing your endpoint from other users.

Consider making another question with the tags corresponding to your backend language, which will be way more helpful than asking an Angular solution.

  • 1
    `On the other side, you could also prevent other applications from using this endpoint. For instance, if your user uses its token in an app other than yours, you could refuse that. But it's becoming a little more advanced, so for now, I think you should focus on securing your endpoint from other users.` ooh really? So how do you do that? – Maurice Nov 09 '19 at 10:36
  • @Maurice this looks like a URL accept setting on your server-side code. You can set a domain name and then accept requests from specific URLs. – MarvinKweyu Jan 23 '23 at 16:11
-1

Though this message was posted a long time ago. In my case, I send the request to a new window then just post the response back to my main window.

In that case, even if the user opens the network tab on the developer tools on the "opened browser" he can't see the logs.

Noelito Calma
  • 1