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

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

javascriptcssgoogle-chromeweb-applicationspage-refresh

Using knockoutjs to call a component on the home page

I am currently facing some challenges with knockoutjs components, as I am following the guidance provided in the official knockout component documentation. Could someone please advise me on how to correctly invoke my widget component on the main page? It ...

javascripthtmlknockout.jsknockout-3.0

Utilizing variables in GraphQL requests

UPDATE: see the working code below GraphiQL Query I have this query for retrieving a gatsby-image: query getImages($fileName: String) { landscape: file(relativePath: {eq: $fileName}) { childImageSharp { fluid(maxWidth: 1000) { base64 ...

javascriptreactjsgraphqlgatsby

Troubleshooting 'Warning: Prop `id` did not match` in react-select

Having an issue with a web app built using ReactJs and NextJs. I implemented the react-select component in a functional component, but now I'm getting this warning in the console: Warning: Prop id did not match. Server: "react-select-7 ...

javascriptreactjsnext.jsreact-select

Avoid rendering the React component until the AJAX call has completed

Suppose the following code is given: componentDidMount() { $.ajax({ type: 'GET', url: '/data/', dataType: 'text', success: function(response) { this.setState({data: response}) ...

javascriptjqueryajaxreactjs

Error: Attempting to access the property 'push' of an undefined variable has resulted in an unhandled TypeError

if (Math.random() <= .1) { let orgAdmin = User.find({email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1234454665324721380c0d">[email protected]</a>'}); or ...

javascriptjsonintellij-idea

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

Currently, I am utilizing Sencha Ext Js 4 and have integrated an Ext.grid.Panel into my project. I am interested in adding another element inside the header, such as a textbox. Is this achievable? {filterable: true, header: 'Unique' /*Here i w ...

javascripthtmlextjsextjs4

Enhance your slideshows with React-slick: Integrate captivating animations

I recently built a slider using react slick, and now there is a need to adjust the transition and animation of slides when the previous and next buttons are clicked. I received some advice to add a class to the currently active slide while changing slide ...

javascriptreactjsslick.jsreact-slick

"Encountered an issue while attempting to send the message: Unable to retrieve data" while utilizing NextJS and the

Currently, I am utilizing fetch along with NextJS to attempt to send information such as name, phone number, email, company, and message to an API. However, I am encountering an issue where the error message simply states 'Failed to fetch' in the ...

javascriptreactjsnext.jsfetch

Adjust the vertical size of the slider in Jssor

Hi there! I'm currently working on a slider that I want to have a dynamic width (100% of the container) and a static height of 550px on PCs, while being responsive on mobile devices. Below is my code snippet: <div class="col-md-6 right-col" id="sl ...

javascriptjqueryhtmlcssjssor

When using Angular's *ngFor directive with the async pipe, the DOM does not reflect changes from an API

I'm having trouble with the offers$ observable in my Child component. When it is updated using a post request, the changes are not reflected on the DOM when using *ngFor and async pipe. However, if I subscribe to the get request instead of using an ob ...

angularjsexpressngforasync-pipe

Substitute a JSONP API call using $.ajax() with a direct server-to-server API call

My javascript application utilizes an ajax function that has the following structure: $.ajax({ url: apiURL, dataType: 'jsonp', success: function(data) { if (data.ok) { //perform actions }}}); Everything was working perfectly until I ...

phpjavascriptajaxjsonetsy

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

I've been working on an Angular project where I display a loading circle that disappears once the content is loaded. This circle is simply a CSS class that I call from my HTML only when the page first loads, like this: Actually, the circle consists o ...

javascriptcssangularjs

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

javascripthtmlsvgjointjs

Rails: Utilizing AJAX to dynamically populate Bootstrap dropdown menus

In the setup I have, there is a dropdown responsible for displaying notifications. <li class="notifications dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-remote="true" data-toggle="dropdown" data-target="#" href="/notifi ...

javascriptruby-on-railsajaxruby-on-rails-3twitter-bootstrap

Require field change in SharePoint 2010

I have implemented the following code on a SharePoint page - it locates the specified select based on its title and triggers an alert when the "Decision" value is selected. I am interested in removing the alert and instead substituting with code that iden ...

javascriptjquerysharepointsharepoint-2010

Angular 8 utilizes JavaScript for its programming language

Looking for a solution in JavaScript - check out: codepen.io/skovtun/pen/VwLvXPB Struggling to find an equivalent for Angular 8+. I want the center block to maintain a fixed width of 1200px, and automatically compress when the left, right, or both sideb ...

javascriptangular

displaying issue: Issue [ERR_HTTP_HEADERS_SENT]: Unable to modify headers after they have been sent to the recipient in the command line

Node.js version: v18.15.0 mongoose: 7.1.1 After successfully sending data through PostMan and saving it without any issues, I encountered an error on the console. app.post('/product', async (req, res) => { try { const singleProduc ...

node.jsmongodbexpressmongoose

Adjust the font size based on the dimensions of the container

I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...

javascripthtmlcss

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

The Challenge of Toast Notifications Visibility with <dialog> Element tl;dr When utilizing the native dialog.showModal() function, the <dialog> element appears to consistently remain on top, which causes toast notifications to be obscured by ...

javascripthtmlnext.jsdialogreact-hot-toast