Get a list of endpoints called by the frontend and on which webpage they are called - frontend

I want to refactor some back-end code. This code communicates with a front-end app, where the front-end app calls a bunch of APIs. I wish to trim the responses provided by the back-end. For this purpose, I want to know what properties does the front-end actually require. So, I want to know where an API endpoint is called on the front-end. Is there any tool which can solve this problem? A tool, to which I give the input my front-end application, it outputs me on what webpage it is calling a particular endpoint. Please note that this is the reverse of doing Ctrl+Shift+I, where I would want to know what endpoint is being called on a particular webpage. What this question is asking instead is, that I do not know the webpage which calls a particular endpoint, can you tell me how to find the webpage, given that I know everything about the API endpoint?

Related

How to show list of API that used in a webpage?

I know this is not source code problem. But maybe this place is the only one I'm thinking bout.
I got mail from some hacker maybe that he got the list of API that exist in my webpage.
He use BurpSuite to get the traffic of the web process. But somehow he get the API that used in the web.
Now I'm trying to intercept my own web. But It's only show the outer process, such as list of controllers and function. But how to show the list of API also. He can show the token and also the endpoint of the API. Is there any setting to do first?

HTTP Calls integration pattern- Making HTTP calls directly from Javascript vs Axios vs Node, which is more secure?

A novice javascript developer here!
A have a basic question on whats the best and secured way to make HTTP calls from a front application to a backend service that needs an authentication. My application is a SPA (using Vue.js) & getting data from Java services. Java services need authentication details and return sensitive user data.
I see there are a few options and I wanted to understand a better approach amongst all 3-
Making direct HTTP calls from javascript code- Concern for using this approach is, as Javascript code can also be viewed via dev tools in browser, wont it be easier for anyone to do an inspect and view all critical authentication details hence making overall integration less secure?
Making an HTTP call using Axios via Vue framework- Seems like Axios is Promise based HTTP client for the browser that lets you easily make HTTP calls without much code overhead. but is this secure? is Javascript code loaded in the browser? Or the front end code sends the request and axios makes the request from backend server where the application is hosted?
Using Node- If front end application has unique routes configured for each API call and in my application if I have a route mapping to use request module and node js backend code to make those HTTP calls, is that going to be a robust and secure way of integration?
Please let me know your thoughts and apologies if this is a dumb question!
Not dumb at all. You're just learning.
My first question to your answer 😅 will be: is your application server-side rendered or it's sap + backend?
If it's server-side rendered then I would say it's secured since Node will be sending pages with all required data. On the dev tool, you will only see static files being loaded.
However, if it's SAP, I am not sure whether there is a way to hide whatsoever you send to the server from the dev tool. The only one thing you will need to do is to make sure you encrypt whatever is sensitive to your application.

Prevent flooding of Logic App http endpoint

So the problem i am having is that i'm scared someone will flood my mailchimp account with trash email addresses. I'm currently working on a website where we will do a sign-up for emails. The website is build in Vue.js and uses Axios to call a Azure Logic App. The post towards the logic app contains a json with an email address inside.
What's particularly scaring me is that someone would be able to paste the javascript code from the button onto the console and just flood the logic app.
Logic App actions costs money and flooding it would cost me money and a datalist full of trash email accounts.
Would someone know if you're able to restrict Logic apps and check if there has been a request made already from that specific user agent? Creating a database just to save this data seems unnecessary and would also cost you like 23euro a month on azure.
I'm constantly trying to think about solutions but vue.js handles everything client sided. I Expect to create a email form that submits to an Logic App endpoint but that can't be flooded by a single user or bad actor.
Any help is welcome. And as always thanks in advance !
I am afraid logic app have no proper way to handle scenario.But I think it will be a workaround for you :
On your JS static front-end, you can implement a timer to make sure your logic app endpoint can be called i,e one time per 60s from your front-end. What's more you should obfuscate your JS code to make sure your code logic can't be modified easily.
However, this way not works if attacker runs numerous of your front-end instance to call logic app endpoint. So for this scenario , the best way is implement a backend to block malicious calls .

Making Firebase and Angular2 project

I'm new at Firebase, I'm starting making a project which has to include Firebase and angular2, but I am such confused about how to implement them. I don't know if a there's the need to have a Back-end implementation (like Java or NodeJs) to handle some security issues (like form validation, authentication, routing etc), or it's enough just implementing Angular2 to handle all these issues. I would be so Thankful about any helpful advice how I could implement these both technologies to build my project successfully. Thanks
first firebase is something like your backend firebase can safe get and send request as your backend apps...
and angular js will do the rest like you just said andd all the backend stuff you can handle by firebase :)
This is my simple explanation on how this 2 works together
Always keep in mind that Angular works only in front-end. Its domain is the look and feel, application events, sending data to server and anything else that has something to do with displaying data is coded in this area.
Backend services in the other hand interacts with your database, creating business logic, handling authentications, saving / sending of data and other stuff that interacts with the database is coded from here.
Now how these two interact is done by the frontend service to send HTTP requests to the Server which is the backend service. This is done by using Angulars $http service or the so called jQuery AJAX or the infamous XMLHttpRequest JavaScript native. New technologies today utilizes Web Sockets which is being used by Firebase and some other frameworks, Web Sockets offers a faster way sending / fetching data from server.
The server then interprets the data being sent and send appropriate response. For example getting user list, saving profile, getting reports, logging in, etc.. It would work in this workflow.
1) Angular sends http request to server to get list of users.
2) Backend service installed in the server then interprets the data being sent.
3) Backend service then gets list of users from the database.
4) Backend then sends the data back to the frontend service.
5) Frontend then recieves server response and displays the data to the view.
Also these two is coded separately. To have more detailed explations research about how frontend and backend services interact you can find so much resouces in Google.

Disable direct requests to REST API

I'm making a REST backend for private use of our frontend, they will both be in the same server.
The problem is that I'm worried about security issues, I don't want a attacker to use the API directly, either by JS or by using other REST client.
Lets take this service as an example
http://myserver:8080/something/webresources/film
That's a service that allows to GET, PUT, POST, DELETE I want that only the frontend be able to use it, otherwise since anyone can see client-code it would be easy to get the endpoint and start putting or getting data. I do have BASIC AUTH so they would have to register and if they did something wrong I would be able to see who did it, but that doesn't solve the problem.
I could implement access control so that a user only could get/update/delete their own movies, but I would have to do that for every REST service(I have over 100 by now), plus I might need to actually get others movies
This is my first public project, I am really lost.
You can do it through your web server. I'm using Nginx. I have an if statement that checks the $http_referer. If it returns nothing, or the value returned is not my application/frontend page (meaning someone is trying to hit the api directly), it'll return a 403 forbidden page.
If your application doesn't send out emails to your users don't worry about the following: I added a block to allow access to my static images as the only exception, as my application sends out emails with images and I don't want them to break.
That's it. Problem solved. No one has access to my api except my frontend page/application, unless they can forge the $http_referer to match my domain which if they can do that then they deserve to break in.
Your only option to call the REST API from server side. You cannot hide from the users what's going on in their browser... You can have a layered application, so the frontend layer can call the backend layer on the server while the client can see only the frontend. (Check the layered system constraint.)

Resources