Securing Your ExpressJs API Files from Prying Eyes in Developer Tools

Typically, when I utilize developer tools in Google and choose to open an API file in a new tab, I am able to view the data as illustrated below.

However, there are occasions where upon attempting the same action on certain websites, a security precaution is triggered which displays an "Unauthorized" message instead of the actual data.

This issue cannot be attributed to a session error since I was logged in correctly. It seems like it is based on WHAT is making the call to the API file.

Does anyone have insights on how to recreate this behavior in my ExpressJs JavaScript/AngularJS application? 

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

For example, this occurs on GTDNext.com

javascriptangularjsexpress

Answer №1

After conducting some research, I have discovered a valuable method to enhance client-side security when dealing with XHR data. I believe it would be beneficial to share this information with others.

It's important to note that I am utilizing angular for this purpose.

Within my app.config file, I have implemented 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, which handles the GET api call, I include the following logic:

....
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')
        });
    };

When properly fetching the data through the browser, the desired information is displayed. However, attempting to access the api directly from the browser results in no visible data. By further encrypting the data, it becomes completely unreadable even through developer tools like Network and XHR.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to include multiple spyObjs within a beforeEach block?

In the process of testing an Angular 1 application using Jasmine, I have encountered a dilemma. My question is, can two spies be created for two different services within the same beforeEach statement? Currently, I have managed to make the first spy work ...

javascriptangularjsunit-testingjasminepromise

Identifying the differences between a select2 dropdown and select2 multiselect: a guide

I currently have two different controls on my page: a select2 dropdown and a jquery multi value select Select2 Dropdown <select id="drp_me" class="select2-offscreen"> <option value="1">one</option> <option value="2">two</op ...

javascriptjqueryjquery-pluginsjquery-select2multi-select

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

Transform Gulp task into webpack configuration

Main responsibilities: Concatenate and minify JS files in a specific order Ensure that minification does not disrupt AngularJS modules Include an MD5 string in the output JS filename to prevent browser caching, e.g. bundle-24141asd.js Update the generate ...

angularjsgulpwebpack

The clash between Kendo UI and jQuery UI

I implemented Kendo UI for the date picker, and I'm looking to incorporate jQuery UI for the autocomplete feature. Upon adding the jQuery auto complete to my code, I encountered the following error: Uncaught TypeError: Cannot read property 'e ...

javascriptjqueryjquery-uikendo-ui

Solving Addition and Subtraction Errors in Javascript/Jquery

Upon running the script below, it aims to calculate the height of the browser, as well as the heights of both the header and footer, subtracting them from the initial browser height: var a = $(window).height(); alert (a); var b = $('#header').cs ...

javascriptjquery

How can a static website incorporate a local image without the need for backend functionality?

I have a unique challenge with my static website. It is designed to display a local image from the user's computer without utilizing a traditional backend system. The website itself is hosted on a static file server, and all image processing must be d ...

javascripthtmlbrowserfile-uploadcross-domain

how to choose the :after pseudo-element with jQuery

Below are the codes I have tried. When this popup appears, I want to be able to close the entire popbox using the close button. CSS code .bigdiv{ display:none; background-color:#efefef; box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4); ...

javascriptjqueryhtmlcss

Encountering an "AJAX not a function" error while using the d3/flask interface

Hey there! I'm new to the world of JavaScript and AJAX. Take a look at this d3 function I've been working on: var node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + ...

javascriptjquerypythonajaxd3.js

Are there any modules in Angular 8 that are used across various projects?

I am facing a challenge with managing two projects that share the same core functionality. These projects have identical layouts and pages, but certain components and modules are specific to each project. Currently, I maintain two separate Angular projects ...

javascriptangularmoduleangular7

Is it possible to import Vue directly from the "/path/to/vue.js" file without using npm or NodeJs?

Is it possible to build a web app using just a single index.js file and importing other available files like shown in this image: https://i.stack.imgur.com/02aFF.png encountering the error message: import not found: default Do you have to use Vuejs wit ...

javascriptnode.jsvue.jsnpm

I am encountering a strange issue when trying to redirect a URL in a Node.js application

I am currently working on developing a URL shortener using Node.js. I have successfully implemented a POST request that generates a random ID. This request requires a redirect URL input. However, I am facing an unusual issue when trying to create a GET ...

node.jsexpressmongoose-schema

Transferring Cookies through FETCH API using a GET method from the client-side to the server-side

Struggling with a challenge here: Attempting to send a cookie via a GET request to determine if the user is logged in. The cookie is successfully transmitted to my browser and is visible in the developer tools. When I manually make a request through the UR ...

typescriptexpressnext.jsgetfetch-api

How can React hook state be efficiently utilized in a debounced callback?

function Foo() { const [state, setState] = useState(0); const cb = useCallback(debounce(() => { console.log(state); }, 1000), []); return ...; } In the code snippet above, there is a potential issue where the state variable may become outda ...

javascriptreactjsreact-hooks

Tips on integrating the createjs library into a ReactJS project

Hey there! I'm currently working on developing a canvas-based app using ReactJS, and I need to integrate the CreateJS library. As a newcomer to ReactJS, I've been struggling to figure out the best approach. I've tried two different methods - ...

javascriptreactjscreatejs

Issue with VueJS instance: Unable to prevent default behavior of an event

Is there a way to disable form submission when the enter key is pressed? Take a look at the different methods I've attempted along with the code and demo example provided below. SEE PROBLEM DEMO HERE Intended outcome: When you focus on the input, pr ...

javascriptvue.jspreventdefault

Recording a specialized event sent from a web component to React

Trying to incorporate a Lit web component into a React application has presented some challenges for me. This web component is expected to dispatch a custom event at some point, and I need to handle it in the React application appropriately. Despite my li ...

javascriptreactjslit

What is the method for eliminating the box shadow on a table?

Seeking assistance on removing the shadow effect from ng-tables upon hovering. Can someone guide me on how to achieve this? See screenshot here: http://prntscr.com/jcpl5g widget-body { background-color: #fbfbfb; -webkit-box-shadow: 1px 0 10px 1px rgba(0, ...

htmlcssangularjsngtable

The checkbox is not updating as anticipated

I'm currently developing a basic widget that allows the user to change the value of either the check box OR the entire div by selecting them. Below is the code I have implemented: $(document).ready(function() { $(document).on("click", ".inputChec ...

javascriptjqueryhtml

The ng-model in Angular is unable to capture the initial input value on load

I am currently using a window onload script to obtain longitude and latitude data and pass them to hidden input values. $(function() { window.onload = getLocation; var geo = navigator.geolocation; function getLocation() { if (geo) { geo ...

javascriptjqueryangularjsgeolocation