How can hide request header and parameters for rest API - javascript

I am using laravel and Vue js.
In Vue js, I am requesting API using axios.
when I inspect and get request header and parameters in a browser and it is possible to request in Postman.
Everyone can request any APIs after login because it is possible to get header and parameters.

It is not possible to hide this. However if you use HTTPS, the connection to your website is secure and no one in the middle can see it. The token is only visible to the user that it belongs to, so it poses no security risk as the user should have access to it.
Being able to inspect the requests sent is a feature of the browser and it is in no way related to your site.

Related

SPA: Access Instagram authentication code directly in app

I load user profile informations from instagram by the basic api in a local test app.
So this actually works like written in the documentations.
I used Postman to get along the authentication and token stuff.
The order to access the graph api, to query media fields would be like:
Get access code (from authentication window redirect url)
Get access token (from acces_token endpoint)
Get media data (from graph api by access_token)
I´m using UI5 js framework with UI5 Tooling.
I get a response with data in step 3 from ajax call, but first i have to execute step 1 and step 2 manually.
But i want to do all this authentication-mechanism directly in my app. Including opening this authentication window and acessing the code from the redirect url.
When i do an ajax call in step 1, i get an CORS error of course, because step 1 doesnt respond with the corresponding CORS header (like step 3 does).
Well, anyways i most likely could handle this by a proxy, but whats about the production environment? I dont get how this approach should ever work in a real app. Even when the CORS problems are handled by aproxy in dev environment, it should be still there when a real user uses the app.
So the question is: How can i access or implement this authentication window (on a diffrent origin) in my app? I have seen other apps doing this permission window, but i have no clue how to implement it in a web app.
By clicking "Allow" you get redirected to he redirect_url with the access code
How can i get the access code directly in my app, avoiding CORS in production
I don't have a definite answer, but regarding your CORS issue: It seems like instagram added a CORS policy somewhere last year (see this other question on SO). This means that you would indeed have to build a proxy.
Basically you need something that accepts all the endpoints that the original API accepts, forwards them to instagram, reads the response, and returns the response to the client (aka browser). But your proxy will then not add the CORS headers. Or even better, you add your own CORS headers (assuming your proxy and your app will run on the same server) and no one else will be able to use your proxy from their web app.
Unfortunately I don't know about this authentication window. Maybe this is just a fancy way to hide that they are running a proxy behind the scenes as well? You should be able to see in the network tab where the insta data is coming from after you login. I would guess not directly from their graph API.

Referer not getting sent in GET request, but sent in POST on Ionic/Capacitor app

I'm in the midst of integrating an app with Ionic (v5) /Capacitor (v2.4.2). On iOS, my URL is capacitor://localhost. When I'm trying to load up iframes from a third-party source, I notice that the request is always failing because the Referer field isn't getting sent from the WKWebView, as compared to what I would expect when I do the same, but load up the files from my desktop browser.
Reading the link on the Referer field, I see that the browser doesn't send in the Referer field in the browser if the protocol is not http or https.
Looking at Google/SO answers, I can't find any previous answers that might address my use case, but I'm trying to be able to load up the iframes for my credit card form on my Ionic integration.
Are there any ways to make this work, and is my understanding of the bottleneck correct, where it's the fact that the custom URI schema present on my Ionic iOS app is causing the Referer from not being sent in the GET request?
I notice that it is being sent in the POST requests, so I am really curious here.. The Origin was being sent in the POST requests, apologies.
Would appreciate any advice on this.

How to set an HTTP header on a request to avoid HTTP authentication?

I have an HTTP authentification that appears every time I try to get access to my Cisco switch.
After analysing packets using Wireshark I figured out that I need somehow to put a header containing my basic HTTP authentification so I can avoid retyping it every single time (I have so many switches and I am currently developing a tool for network managing).
What i want to say , I want to somehow make my authentification using only one single button
PS : i am beginner at JavaScript I dont use it alot
Thanks
You have to allow Cross-Origin Resource Sharing (CORS) request to pass the authentication.
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.
If you want to check if it works or not you can use this extension

Retrieving cookies with javascript XMLHTTPReq

Just wondering if it's possible to use an XMLHTTPReq to login to a website, and store the cookie. Specifically I'm after the PHPSessionID from the website I am logging into.
I then want to pass this cookie into another request to submit a form.
Any ideas of how to do this?
Cheers,
Nick
You will be able to get your own site's cookies from document.cookie. In the AJAX callback, use a library to parse the value and read the cookie you're looking for.
Of course, if the server sets the cookie HttpOnly (which it should be doing), it won't be available in document.cookie.
At this pont, you need to reevaluate what you're doing:
If the form points to your website, your server script would have access to the cookie anyway.
If you're sending the user's session ID to another domain, why? This is a huge red flag that screams security problem.
If you're logging in to another site, then no – the same-origin policy prevents you from accessing another site's cookies.
Edit: Since this is for your own use, you can do this in a way you're not limited by the browser's origin restrictions. Some thoughts:
You could make a Chrome extension. Extensions aren't subject to origin restrictions, and the development model and API is pretty much the same as what you'd do on a regular web page.
You could use Node, which has no restrictions. You'd be able to invoke your script from the command line, but the API is going to be slightly different that what you'd use in a web page.
Use your language and framework of choice to POST to the login page, get the Set-Cookie header in the response, and use it to send a Cookie header in another POST to the form target.
You can only send cross-origin requests using XHR if both the browser and server support CORS. Additionally, the third party site needs to allow your site to send such requests and to receive its responses. If it doesn’t, you aren’t allowed to send the request or receive its response respectively.

javascript / ajax question

I'm wondering if anyone knows a javascript library where I could remotely login to a site, then browse pages upon logging in.
This is very easy with php's curl but I'm wondering if there is a javascript equivalent where I can execute multiple remote url's under a single http session.
Basically what I'm looking to do is post a username/password to one of my sites and then immediately post some other commands to a different url (same remote domain) using the authenticated session.
I haven't come across anything like this yet so I'm wondering if anyone can point me in the direction (if it's even possible). Can definitely be HTML5.
Due to same origin policy restrictions in browsers this is not possible using javascript. You need a server side script that will act as a bridge between your site and the remote sites. Then talk to this local script using AJAX.
There are some techniques available to bypass the same origin policy:
If you don't need to read the response of your POST calls, you can create a FORM by javascript with an action to any url (not limited to the same origin policy) like in this question: How do I send a cross-domain POST request via JavaScript?
But this means you rely only on session cookies for the security, this is open for XSS attacks.
As you own the other domain site, you could develop a small service that returns a JSON with the data you need, and use the JSONP technique, eg:
<script src="http://otherdomain/curl?url=page.html&callback=cb">
</script>
May be you could signin before using the POST technique above and sending a secret token that you reuse in the url to improve the security.
And finally there is a way to act/read on other pages using a bookmarklet.The idea is to inject in the other domain's page a script that can run with all the privileges, and send back information to your domain.
But this requires a manual action (click a link or a browser bookmark)

Categories