Sometimes, one needs to add special headers to each request or specific requests made from a browser. The common approach to do this is by using browser extensions which allow us to modify request headers. Is there another way to do this, without any browser extension ?
PS - I have searched SO and not found a single post which actually suggests or shows how to do what I need.
Outside of APIs designed to make custom HTTP requests (XMLHttpRequest and fetch), it is impossible to add arbitrary HTTP headers to requests made by browsers using JS embedded in a page.
If you control the websites that you want this functionality on, you could achieve this by setting each application to install a ServiceWorker. In a nutshell, service workers run as a proxy server within your browser. They can do things like notify you of updates even if you don't have the website open.
Within a ServiceWorker you are able to set up event listeners that can do some asynchronous task on behalf of the client app. This includes the fetch event which is fired every time the web page makes a request.
Here's a write up on someone implementing a ServiceWorker who also needed to intercept network requests. You could follow most of this and just alter the logic when inspecting the request type. At that point you could add any special headers before dispatching on the applications behalf.
Theres no possibility to edit requests in existing DOM without using any external tools. The most suitable is Browser Extension which is editing the existing DOM and HTTP requests (XMLHttpRequest and fetch) done by JavaScript code.
Theres millions of possibilities to add headers to requests if the owner of website is you. And the solutions are different consider on what lib are you using for doing requests.
But in general it's not recommended to modify website data that is not yours.
The Browser Extension is the exact thing that you found for your problem.
Hope my comment will help you.
Related
I'm trying to console.log POST requests with my chrome extension but can't figure out how to do it, can anyone give me an example? I've looked at the chrome extension API but still can't seem to get to it
In Google Chrome, browser requests such as POST and GET are visible in the Network tab of the Inspector.
Screenshot from Chrome Devtools Overview:
If you are looking for a natural way to make a Javascript hook on browser requests (such as for logging them out), you will have more issues as there is no native way for Javascript to hook on requests at browser's scale, for security reasons.
But if you are okay to use a dedicated extension for the job, you can look at the webRequest extension for Chrome:
https://developer.chrome.com/extensions/webRequest
Use the chrome.webRequest API to observe and analyze traffic and to intercept, block, or modify requests in-flight.
Here's an example of listening for the onBeforeRequest event:
chrome.webRequest.onBeforeRequest.addListener(callback, filter, opt_extraInfoSpec);
Beware, there are security requirements and limitations:
You must declare the "webRequest" permission in the extension manifest
to use the web request API, along with host permissions for any hosts
whose network requests you want to access.
Note that due to the ordered or asynchronous nature of the webpage resources loading (HTTP/1.x or HTTP/2.0) you are not be guaranteed to catch all the requests made by the browser that happened before your Javascript hooks were setup.
Eventually, you have some tricks, such as those referenced here for detecting AJAX calls through Javascript proxification mechanisms.
Another strategy would be to have the request detection deported on server and informing the client he sent a request (through Websockets/queues for example). It would only work for requests targeted on the domains you manage though, and it sounds like a bit of an expensive solution. It all depends of what your ultimate needs are.
I'm working on google chrome extension which get the page url and analyze it. How can i intercept the browser request and serve that request condionally based on some criteria. I'm surfing but could find any material.
That's going to be very tricky, if at all possible.
The closest that extensions API provide is blocking webRequest API. There, you can intercept a request and make a decision to allow it or block it, but..
You can only do that until the request is sent out. So you can only rely on the URL and maybe request headers. Even in later events (when it's too late to redirect) no point webRequest API gives access to the response itself.
You have to make the decision synchronously, which basically severely limits processing options.
What you could do (very much in theory) is always redirect the request to your own "loading" page, meanwhile trying to replicate the request yourself (near-impossible to fully do, also consider side-effects), analyze the response and then substitute the "loading" page with the real one.
It's going to be either very complicated or impossible to do in complex cases. You're basically trying to implement an intercepting proxy in a Chrome extension - it doesn't really provide the full toolset to do so.
I have some HTML/PHP pages that include javascript calls.
Those calls points on JS/PHP methods included into a library (PIWIK) stored onto a distant server.
They are triggered using an http://www.domainname.com/ prefix to point the correct files.
I cannot modify the source code of the library.
When my own HTML/PHP pages are locally previewed within a browser, I mean using a c:\xxxx kind path, not a localhost://xxxx one, the distant script are called and do their process.
I don't want this to happen, only allowing those scripts to execute if they are called from a www.domainname.com page.
Can you help me to secure this ?
One can for sure directly bypass this security modifying the web pages on-the-fly with some browser add-on while browsing the real web site, but it's a little bit harder to achieve.
I've opened an issue onto the PIWIK issue tracker, but I would like to secure and protect my web site and the according statistics as soon as possible from this issue, waiting for a further Piwik update.
EDIT
The process I'd like to put in place would be :
Someone opens a page from anywhere than www.domainname.com
> this page calls a JS method on a distant server (or not, may be copied locally),
> this script calls a php script on the distant server
> the PHP script says "hey, from where damn do yo call me, go to hell !". Or the PHP script just do not execute....
I've tried to play with .htaccess for that, but as any JS script must be on a client, it blocks also the legitimate calls from www.domainname.com
Untested, but I think you can use php_sapi_name() or the PHP_SAPI constant to detect the interface PHP is using, and do logic accordingly.
Not wanting to sound cheeky, but your situation sounds rather scary and I would advise searching for some PHP configuration best practices regarding security ;)
Edit after the question has been amended twice:
Now the problem is more clear. But you will struggle to secure this if the JavaScript and PHP are not on the same server.
If they are not on the same server, you will be reliant on HTTP headers (like the Referer or Origin header) which are fakeable.
But PIWIK already tracks the referer ("Piwik uses first-party cookies to keep track some information (number of visits, original referrer, and unique visitor ID)" so you can discount hits from invalid referrers.
If that is not enough, the standard way of being sure that the request to a web service comes from a verified source is to use a standard Cross-Site Request Forgery prevention technique -- a CSRF "token", sometimes also called "crumb" or "nonce", and as this is analytics software I would be surprised if PIWIK does not do this already, if it is possible with their architecture. I would ask them.
Most web frameworks these days have CSRF token generators & API's you should be able to make use of, it's not hard to make your own, but if you cannot amend the JS you will have problems passing the token around. Again PIWIK JS API may have methods for passing session ID's & similar data around.
Original answer
This can be accomplished with a Content Security Policy to restrict the domains that scripts can be called from:
CSP defines the Content-Security-Policy HTTP header that allows you to create a whitelist of sources of trusted content, and instructs the browser to only execute or render resources from those sources.
Therefore, you can set the script policy to self to only allow scripts from your current domain (the filing system) to be executed. Any remote ones will not be allowed.
Normally this would only be available from a source where you get set HTTP headers, but as you are running from the local filing system this is not possible. However, you may be able to get around this with the http-equiv <meta> tag:
Authors who are unable to support signaling via HTTP headers can use tags with http-equiv="X-Content-Security-Policy" to define their policies. HTTP header-based policy will take precedence over tag-based policy if both are present.
Answer after question edit
Look into the Referer or Origin HTTP headers. Referer is available for most requests, however it is not sent from HTTPS resources in the browser and if the user has a proxy or privacy plugin installed it may block this header.
Origin is available for XHR requests only made cross domain, or even same domain for some browsers.
You will be able to check that these headers contain your domain where you will want the scripts to be called from. See here for how to do this with htaccess.
At the end of the day this doesn't make it secure, but as in your own words will make it a little bit harder to achieve.
User will click on button to download file, once it started then it will abort or cancel after some time interval. Also I want to upload a file without user intervention. I would like to know whether it is possible with client side scripting (jQuery, Ajax, jQuery-form.js...).
Can some one suggest whether it is possible using either of these techniques (i.e. without any server side scripting).
Regds
The short answer is: not likely. The long answer:
You might be able to upload a file using a PUT http request. However, most servers are not set up to handle PUT requests without some sort of server-side scripting. (See this article for how Apache can be set up to handle PUT requests.) Also, many servers are set up to not handle PUT requests at all due to security concerns.
Another possibility is to store files on the server using ftp. (See the Mozilla docs on using XMLHttpRequest.) Unfortunately, most browsers will not support an Ajax request where the protocol is changed to ftp:. (Note that the XMLHttpRequest spec states that protocols other than HTTP/HTTPS might be supported but are not covered by the spec.) As with PUT, configuring the server to handle ftp requests also raises security concerns.
No there is not, as there are some basic questions that the browser scripting cannot answer, the most important being:
Where do I save the file to?
I am about to look at building an extension for chrome that can listen to a particular http GET request, and then react by passing the body on to another application.
This will be limited to one website, and I am only concerned about the one request (though the query parameters can change)
The data will most likely be communicated to the other application using another GET or POST request by the extension.
I am new to most of the topics concerned with this issue. I have not used created a chrome extension before, though I see it has a lot of documentation which has helped greatly.
The question I am asking is how in a google chrome extension do I react to a GET request?
I am aware there is a network view in the dev tools, so I guess what I am asking is probably possible. I had guessed it may be done with an "Event" as listed here http://developer.chrome.com/extensions/events.html , but I cannot find the "onGET" event or similar
Thanks,
Luke
It would appear that this is not particularly easy to do. There is an "onCompleted" callback with the chrome "webRequest" API, but that would not allow me access to the body.
What I have had to do to solve my issue, is get the plugin
https://chrome.google.com/webstore/detail/proxy-switchy/caehdcpeofiiigpdhbabniblemipncjj/related
And set up a proxy on my local machine. ProxySwitchy detects the request to the URL I care about, and uses my proxy instead. My proxy then duplicates the message and allows me to do with it as I please.