Intercepting all API calls with browser addon - javascript

I was wondering if it is somehow possible to intercept all JavaScript API calls of a website using a browser extension.
The background is that I would like to log what APIs some websites use and even block access to certain APIs or simply provide fake data instead of real data.
I know you can intercept HTTP requests etc, but I would really like to just find out when an API is actually accessed.
So for instance, I would like to find out when webRTC or webGL are being used, when a canvas is being read/manipulated or even when a website checks the mouse cursor position.
I couldn't really find anything on google about this. Did I miss anything? Or are you aware that something like this will be implemented in the future? I would really like to know.

https://webrtchacks.com/webrtc-notify/ describes a chrome extension which shims and detects usage of the WebRTC APIs. Its not perfect as there are ways to prevent the content script from being run.
Firefox has better APIs for intercepting WebRTC described in https://hacks.mozilla.org/2015/09/controlling-webrtc-peerconnections-with-an-extension/

Related

browser to get machine-id by launching an electron app or similar

I want to identify a user by unique machine id across all browsers. So came up with an idea of launching a app which determines the machine-id (like electron using nodejs) and passes back the info to the browser that launched it and use for identifying the user.
I have seen something like this been done on canyourunit
Can anyone point me right direction where can i find some info about this kind of approach.
As you would be asking a user to download and execute native code, electron or whatever else, there are several complicated issues to consider.
The obvious first one is that you must consider the user platform (OSX, Windows, Linux...) then, communicating back with the browser directly (which one?) is probably not practical.
Your native application could however send the machine id/fingerprint to your backend so you could identify what web client is what.
This is quite involved, fragile, and even if you only support Windows, will fail in many scenarios (system policies, firewalls, antivirus, proxies, strange network setups...)
All in all, it would seem that you should consider more standard Device fingerprinting techniques if you only need an ID.

Implementing Boomerang into a browser extension/plugin

I am currently developing a browser extension/plugin that one would install and would then report information such as page load times, number of objects on each page, etc. to a server so that the data could be analyzed.
I was curious if something like Yahoo's Boomerang JavaScript code (http://hacks.bluesmoon.info/boomerang/doc/) would be able to be able to do this. From what I have read, it seems like Boomerang was developed for developers to implement into their own website in order to gather data, but would I be able to gather the same kind of data by putting this code in a browser extension in order to gather the data from each website that is visited?
The link you're using for boomerang is very outdated (it was my first experimental page). Use http://lognormal.github.com/boomerang/doc/
Boomerang does already use these APIs, and much more, but as a browser extension, you could do much more in terms of removing code that supports other browsers, and also maintaining offline storage more efficiently than boomerang's cookies.
FWIW, yslow already does most of what you want, so maybe just use that (it was built by the same team)
I don't see why not from a technical perspective, at least in Firefox and Chrome. However, user privacy issues and policies of the browser extension stores might prevent you from tracking users in certain ways and/or without consent. So better check that first to avoid surprises later.
You'd need a way to gather information. Judging from your question text, the regular DOM APIs and the PerformanceTiming API might be sufficient. And that's probably what Boomerang uses already.
You'd just attach your code (or Boomerang) with e.g. Firefox Add-on SDK PageMod or Chrome extension Content Scripts.
You'll also need to transmit the data somewhere. Both Firefox (XUL1, Add-on SDK) and Chrome extensions allow cross-origin XHR.
So there you are. ;)
1 XUL overlay scripts are privileged, and not restricted by the same-origin policy.

Paste image to a web page

I did some research for a wysiwyg editor and found ckeditor that seems to be nice however I need to be able to copy/paste an image to the editor.
I found this web site that do exactly what I need http://pasteboard.co/ so its possible however I cannot find how it's done.
Do you have any ideas or solutions?
I would prefer a solution in pure html5/javascript and avoid any plugin but a silverlight or flash is acceptable too.
There are two ways you can handle this, the easy way, and the hard way.
The Easy Way:
Utilize the Clipboard API. This is an "HTML5" API, but it is only properly supported in Chrome. This will allow you to access a pasted image, from your clipboard, as a Blob. You can then send this Blob to your server via an XHR2 request.
The Hard Way:
Unfortunately, this is what you must do for all browsers other than Chrome, and it's not pretty. It involves you creating a hidden content-editable DIV inside of a "paste target element". This will receive the pasted image. You will then need to draw the image onto a <canvas> which will then need to be converted to a Blob. But wait, it gets better. You may also need to proxy cross-domain images (server-side) in some cases (possibly many cases). This may be required if the server hosting the image does not permit CORS requests on the images they host. You can read more about this situation in this MDN article.
A javascript-based uploader I maintain, Fine Uploader, already supports uploading images via paste, but in Chrome only at this time. I figured I would go through the hassle of implementing this in non-Clipboard API browsers if I received enough requests. Quite frankly, though, since handling non-CORS-enabled images in browsers that do not implement the Clipboard API requires proxying the image server-side, it hardly seems like its worth the effort (unless, of course, my user base tells me that they want it).
Hope this helps.

Simplest way of interactively testing a RESTful service?

I've recently gotten hold of a Rexster server with a REST API and I've been wanting to play around with it in an interactive way. I've never had to work with REST before, most of my work has been around SOAP and .NET. I'm able to trivially perform all of the GET operations just by navigating to the correct URL through the browser and reading the response with JSONView on Firefox, but anything requiring PUT and DELETE appears to require actual code.
Given that I'm still prototyping and testing the API, I'd like to have a way to interactively throw a bunch of requests at it and see what happens. I'm sure I could concoct something in Java or C# fairly fast, but I'm guessing there's a better way (which is why I was thinking javascript above) and was hoping you folks might recommend one.
Please advise, thanks!
If you are trying to debug requests and responses, then Fiddler or HttpScoop is great. However, for just interacting with the API, I've found that the Poster plugin for Firefox is the easiest of all. That sounds like what you're describing.
If you are on Windows, then Fiddler is your best option. I believe the Mac has an equivalent called Charles.
Recent versions of SoapUI allow you to interact with REST interfaces.
Maybe it won't affect you, but there's a bug in the current open source version that causes every query to be executed twice - took me some time to discover while testing a service that returns an incrementing number :-)

JavaScript code to take a screenshot of a website without using ActiveX

I have a JavaScript application that an user interacts with. I need to save the appearance of the interface at the current time, crop out the part that I need (or only shot the part that I need by specifying the div), and send it back to the server.
Clearly any external services would not be able to do this, I need a JavaScript (or Flash) script that can save the screen appearance. Is this possible?
Also, as the comment below says, I cannot use ActiveX.
Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/
I think using JavaScript, you won't be able to due to the security restrictions. Flash, possibly.
It's impossible in pure JavaScript, without using ActiveX.
It is impossible using JavaScript (nor Flash). It depends on your constraints, and there are some workarounds.
You can take advantage of browser extensions (such as a Firefox add-on), but I guess it does not fit your requierments.
The best option I can think of is to construct the DOM tree on the client side, and then post it to remote server.
On the server side nothing really holds you from doing generally anything. Using WebKit or even launching Internet Explorer or Firefox, you can create the snapshot server-side.
It's far from elegant, but possible.

Categories

Resources