I'm front-end dev and my app run inside android WebView, after I call api method form my react app by axios(or fetch/xhr), WebView developers inject some important headers into my request.
they expect me to reed request headers and show some where inside my react app.
the problem is how can I read request header after api call???
I installed mode-header extension to simulate development environment. in chrome devtool I can see other request headers injected by browser into my api requests but I cant read them!
Related
I'm working on an Electron app which heavily uses webview to provide a custom interface to a remote site (Salesforce). The webview is loading pages which contain ajax requests. I need to capture the responses to these requests so that I can refactor out the screen scraping the app is currently doing.
I have tried several methods:
WebRequest (Only captures request headers, not response bodies)
Monkey Patching XMLHttpRequest (Failed to work after injecting via preload= and was extremely difficult to debug in a webview)
protocol.interceptHttpProtocol (Did not contain response body from webview)
mainWindow.webContents.debugger.attach (Did not work)
We have a legacy website which I'd like to supplement with a chrome extension as a temporary measure.
The site is set up with Spring Security and each request is authenticates with an access token.
I have tried creating an extension that makes a request to the endpoint visible from network requests with the correct data but the endpoint does not respond at all.
Running the same code directly on the website through DevTools gives me a proper response, so I'm thinking the error is due to CORS.
Is there a way to make a chrome extension run code directly on the page so there wouldn't be any CORS issues or should I approach this issue a different way?
I have a Nginx webserver in front of a Node REST API delivering JSON formatted data.
I also have a web app which consumes the above API and works fine for a majority of the requests it makes but sometimes, for certain URLs, the client gets a CORs error aka an 'Access-Control-Allow-Origin' error.
When I call the data again from the server of the web app it works fine again.
Could anyone shed some light on this issue.
I am using axios to call the API from the web app
You need to add CORS headers in response so that api can be accessed from browser.
You can use npm cors package https://www.npmjs.com/package/cors
I have a VueJs app with a Laravel backend as the API.
When running locally the app works as expected with https, however when on the production server I get the Requested an insecure XMLHttpRequest endpoint message.
My server is on Digital Ocean, has been setup with RunCloud and has SSL enabled through LetsEncrypt.
The application can be viewed here: https://vehicletrader.sweney.co/#/
Please note at this stage theres is no authorization surrounding the API.
Any advice would help.
A slash / at the end of the request URL was the cause of this for me.
My axios call was a simple axios.post('https://getShafiq.com/hello/').
Locally, it was working.
But on prod server behind CloudFlare, it would return insecure XMLHttpRequest.
What I noticed in the 'Network' tab of my browser's dev tools is that the URL is returning a 301 - Moved Permanently and right after it, the error about the insecure endpoint.
I removed the / after /hello and boof, it works.
i have disabled the laravel CSRF Token security in my application, the reason for doing it is that i am using a javascript frontend framework instead of blade (angularjs) and i have a mobile app that uses the same routes as my web app so having it enabled caused me to get "Token mismatch" errors or "inavlid token".
My question is now that i have made my client side code completely independent of my server side code how do i implement this feature?
Also how would i make it work on my mobile app too since the APIs use the same routes as the web app.
The web part
As I understand with statement "i have made my client side code completely independent of my server side code", you mean that, your backend is on different host/port than angularJS app.
This makes troubles, beacuse of CORS:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
How CSRF work:
backend app: send cookie to browser with CSRF token
browser: save token from backend app
browser: send token with next POST/PUT/DELETE request
Your app fails in step 2, beacuse browser will save cookie only when protocol, host and port match those from frontend app.
If you want to implement custom CSRF tokens, you have to make $http interceptor service which will deal with adding CSRF to requests and update current CSRF after request.
Doc: https://docs.angularjs.org/api/ng/service/$http (section interceptors)
To test if I am right, you can run browser with disabled web security. CSRF tokens will then be saved.
For chrome / chromium:
Go to terminal
cd to chrome folder
Run chrome --disable-web-security
The mobile app
Everything depends on your HTTP client in the app.
CSRF are actually cookies and they have to be sended in every request different than GET and updated after these requests. Please make sure, that your library is saving CSRF cookies and your web app sends CSRF cookies (not headers).