I'm currently developing a web app that allows users to add a list of websites that they want to block i.e. preventing them from accessing the website from their browser.
Ideally I want to be able to block websites on every browser but this is difficult, so I narrowed my research to just Chrome for now. I came across the chrome.webRequest api which seems promising but it specifically says its for chrome extensions and am unsure if it would work for my web app.
Can anyone point me in the right direction for blocking websites on a web app, ideally using javascript. Any help is much appreciated!!
EDIT:
1) I forgot to mention that I'm using firebase for my backend.
2) People have been saying that I can't block websites outside the web apps scope, if I instead used electron to make the web app a desktop application would it then be possible?
Firstly you have a database containing URL of blocked websites. URLs are modified using your web app. That's one part. Now your problem is how to make the browser work with your database.
The only possible way for you to share blocked URLs with the browser is via API. You must have API that can communicate outside your web app.
Now browsers such as chrome/firefox give users the power to make changes inside and outside the dom. For chrome, you have chrome extension where Google provides API so the users can manipulate actions outsides regular actions such as manipulating dom. An example I can give that is closely related to your subject matter, which is an action activated before/after a user enters URL on the search box and for that, we use the following API from https://developer.chrome.com/extensions/webRequest
And it's same for Firefox.
I want to run JS code on Safari (iOS) or Chrome (Android) to detect for example, if WhatsApp is installed on the device.
I played with:
How to check if an app is installed from a web-page on an iPhone?
and
https://github.com/hampusohlsson/browser-deeplink
But the problem is that if the app is installed on the device - the browser re-directs to the app. I want to stay on the page after the "detection stage", is that possible to do?
Following a few hours of research + consulting with top experts I came to the conclusion that there is no legitimate way of achieving the goal of detecting whether a specific app is installed on the device without having the browser re-direct to the app if it is installed.
In iOS for example, there was an app just removed from the App Store because of violating the rules: SysSecInfo. The app managed to pull list of all running processes for example.
From: https://www.sektioneins.de/en/blog/16-05-09-system-and-security-info.html
See https://developer.apple.com/videos/play/wwdc2015/703/ "App
Detection" starting at 08:34
During this talk they discuss several APIs used to gather information
about processes currently running on your system (around 12:12 in the
video) and claimed to have fixed them. However as so often Apple has
only partially fixed the problems they claim to have fixed. Therefore
they have actually never stopped malicious applications from gathering
information about what other applications run currently on your
device, but only removed access to detail information that is only
relevant for harmless system information tools anyway.
System and Security Info is therefore still able to show the list of
running processes and enriches this list with information from the
codesigning information including the list of entitlements running
processes have.
I want to detect via JS if a user does or does not have a particular app installed.
I know about the app store tag that will pop the generic "download this app" if they don't have it installed. I'm not asking about that.
I have a concept, but it's incomplete. This would try to target both iPhone and Android devices.
Knowing that a link with a particular prefix can trigger an app to open:
Target a hidden iframe with JS to open a url prefixed to trigger that app
That page would fire a post message back to the parent if it loads, indicating the app was not opened.
If the app exists, the message would never be fired back to the parent, since it would open in the app.
Unfortunately, my client does not want app to open (or attempt to open) automatically, but simply know wether or not it's installed.
Thoughts? Blaring errors in my logic? Work-arounds? Existing solutions?
Thanks
There's likely no way to do this, because generally speaking you aren't allowed to poke around on a user's device from a web page. Even though what apps a user does or doesn't have installed isn't the most sensitive of personal information, it would still be a bit of a security/privacy concern to expose that information to scripts coming from the web. The app store tag is probably the closest you're going to get, since it's an official API to provide similar but protected functionality.
I can think of two ways to try to solve your problem, although none is especially good. Since iOS 6, you can use Smart App Banners to promote an app.
The most obvious solution would be to hide any actions from the user, e.g. by preventing the activity from showing up after issuing the URL request. I don't have any experience with this and cannot tell you to what extent it might be possible to hide it.
To be honest, I have no idea whether the second approach will work on mobile devices. It has been used for desktop applications a lot and allows inter-application communication - including communication between the browser and the app. However, the possibilities might be limited due to the usually high security restrictions on mobile devices. This is a highly theoretical suggestion as I am pretty sure it is unsuitable, whether it is possible or not.
Your app must provide a tiny HTTP server on an unused but fixed port. Your JavaScript code can then use JSONP to communicate with the app (assuming the security restrictions of the browser don't prevent this). If communication fails, you may assume the app is not installed.
Before anyone attempts to criticize this approach, let me say that this is a theoretical possibility, might be unstable and is unsuitable for most apps. The efforts of running an HTTP server are far too high for such a secondary task.
Synopsis: I am developing a HTML5 web app that will allow tablets(iPad or Droid) to login to a server and perform various functions. The client would like a way to check the devices mac address when logging in. From what I have read, most solutions use activex objects that will not work for webkit browsers.
Question: Does anyone know a solution that would hook into a HTML5 web app seamlessly(Idealy update a hidden form element with the value upon logging in)?
Thanks!
I don't think there's going to be a straightforward way to do this. The web server won't be exposed to a client's MAC address unless they're on the same physical segment...you'll only see the MAC from the most recent router hop in general.
If anything exists, it's going to be a browser plugin (show-stopper on iOS). And it would probably need more than the default permissions available (I don't suspect you can enumerate network interfaces in Java, for example, without asking for elevated permissions).
If you're looking for HTML/JS only then I don't think that this is possible. It won't be exposed.
The problem is that the packets you recieve back will only contain the MAC address of the node on the last hop.
This may be possible via a plugin, but then this limits you on iOS, and possibly also Android as you'd need to provide them a way of getting the plugin first (unless you used a plugin that was installed by default).
Edit: Not that I support an app for every little thing, but it shows that easy to press app buttons sometimes tend to do better than web apps (regardless of being able to make browser shortcuts to home screens). If it is suitable, you could consider loading this within a web view on the target device from within an app, from which you can then of course access MAC addresses and whatever else you may need.
MobiThinking: Mobile applications: native v Web apps – what are the pros and cons?
Forbes: Mobile Web App vs. Native App? It's Complicated
Let's say I've got a website that works better if a client has installed and logged into a desktop application. I'd like to be able to do 2 things:
Alter the website if they haven't installed the app (to make it easy for them to find a link to the installer)
If they've installed the app on a couple of machines, determine which machine they are browsing from
I'd like something that works on Windows and OSX, on any of the major browsers. Linux is a bonus.
A few thoughts:
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
Could I just let the client serve HTTP on localhost and do some javascript requests to fetch a local ID? I know google desktop search did something like this at one point. Is this a standard practice?
Thanks!
You can register a protocol from your desktop application (see this). This can be used, for example, to open your desktop application with arbitrary data from the website. You could then have your desktop app send a HTTP request to your webserver, telling it what machine you are on.
You can have a browser plugin (activex for IE or Netscape plugin for the rest of the browsers) that can communicate with the application. When the webpage is loaded, it can try to instantiate the plugin and if it succeeded, it can use it as a proxy to the application. If it fails, then either the app is not installed or the plugin was explictly disabled by the user. Either way, your website should degrade its functionality accordingly.
Update: Forgot to answer your questions:
Flash does it exactly this way. Flash is a browser plugin that is created by the web pages.
You can have a machine ID generated at the application/plugin install time and your plugin can pass that machine ID to the webpage when it is created.
On the topic of using local webserver:
I would stay away from having a local webserver, mainly because of security considerations. It takes quite a lot of work to make sure your local webserver is locked down sufficiently and there are no XSS vulnerabilities that other malicious websites can exploit to make it do stuff on their behalf.
Plus, having a webserver means that either it has to run as a system-wide process, or if it runs as the user, you can have the website interact with only one user's instance of the application, even though multiple users can be logged on and running it at the same time.
Google Desktop Search suffered from both the XSS security vulnerability (though they fixed it) and the limitation of only one user being able to use it on a machine (I don't know if they fixed this one yet, though chances are they did).
Websites can detect if you've got Flash installed.
Actually, I believe a browser can detect if you have the Flash plugin for the browser installed, and webpages can offer "installed" and "uninstalled" option that the browser can choose.
Otherwise, you are asking for a means, by putting some code in a webpage, of being able to analyze a user's home computer, and report what it learned to you website.
Can you say Major Security Hole?
If you can pick a development environment for the desktop app, then check out AIR from Adobe. It lets you develop desktop applications using either html/javascript, Flash, or Flex.
It has API calls you can use from a browser based flash app to see if the desktop based AIR app is installed, what version, etc. You can even launch it and pass parameters from the web app to the desktop app.
http://www.rogue-development.com/blog2/2008/03/interacting-with-an-air-app-from-a-browser-based-app/
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
it's quite a bit simple, your browser tries to render some additional files, with some specific formats such as flash .swf and I the browser doesn't find installation, then will be start downloading, or you will get the option to download that program.
Flash also uses AC_RunActiveContent.js please take a look at this js, people usually put this on their webpages
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave cabs/flash swflash.cab#version=8,0,0,0','width','981','height','635','id','build5','align','middle','src','build5','quality','high','bgcolor','#ffffff','name','build5','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','build5' ); //end AC code
}