Sarasota Sun Sarasota Sun - 6 months ago 24
Javascript Question

ExpressJs - How to make api files unreadable in developer tools

Naturally, when I use developer tools in Google and click open an API file in a new tab, I can see the data as exampled below.

But I have been to websites when I attempt to do the same thing, there is some security measure taken causing the opened in new tab page to show an "Unauthorized" message and not the data.

It cannot be a session event because I was logged in properly. I think it is determined by WHAT is calling the API file.

Does anyone know how to replicate this in my ExpressJs javascript/angularjs app?

{
username: "James Doe",
picture: "styles/person.png",
activity: 12
}


enter image description here

Here is an example from GTDNext.com

enter image description here

Answer

OK, I found the answer to this and I would like to share it with others because I think it is useful to add a layer of security on the client side when it comes to XHR data.

Keep in mind I am using angular.

In my app.config, I created 3 custom $httpProvider providers:

    $httpProvider.defaults.headers.put['X-Posted-By'] = 'mySecretApp'
    $httpProvider.defaults.headers.post['X-Posted-By'] = 'mySecretApp'
    $httpProvider.defaults.headers.common['X-Requested-By'] = 'mySecretApp'

In my node controller, that responds to the GET api call, I have this:

....
module.exports = {
  all: function (req, res) {
    if (req.header('x-requested-by') != "mySecretApp") {
        return res.status(400).send({
            message: errMsg.Util_ErrorMsg.getErrorMessage('Invalid requester')
        });
    };

Now, if I retrieve the data properly, through the browser, I get the data. However, if I try to open the api straight out from the browser, no data appears. Encrypting the data further would make it totally unreadable from developer tools -> Network -> XHR