Are there any currently accepted methods for building full screen web applications in HTML 5 using just JavaScript and CSS?
If so, what are the pros and cons of each? What cross-browser quirks are there?
This is bleeding edge, but the latest chrome builds have a Fullscreen API. See this slide deck for details:
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42
Also, it looks like these dudes figured out a way to do it without resorting to unsupported features:
http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games.html
There is a proposal which is based on discussions on the WHATWG mailing list. This was originally triggered by this WebKit API, but as far as I'm aware that only works on iOS and there are no other implementations at present.
As it stands, Full Screen mode can only be induced by the user directly telling the browser to go into that mode.
It's like back in the slave days. You're the slave, the user is the master, and pixels are your food. They may not give you much, but they give you some, and you have to savor every last bit.
This used to be possible back in the day - IE 4 did "Chromeless Windows" - but is no longer possible in pure HTML for security reasons.
If you can have the user install local software, something like Mozilla Prism might work - I've never tried it myself though.
Related
I've tried on getting browser info from javascript - navigator.userAgent, but cannot find any related string with "Vivaldi".
Please help to suggest if there are any other programming method or javascript can be used to detect Vivaldi browser?
The correct syntax in JavaScript is navigator.userAgent.
You can check window size, but it may be incorrect.
Vivaldi has its own sidebar and bottom bar that the others not.
But remember, user can change the window size to prevent detection.
According to Vivaldi, the userAgent will not have Vivaldi in it for a better user experience and mimic Chrome in all sites except a few known ones.
For the next release of Vivaldi, we have decided to try something different. The problem with our current approach is that with the web being almost infinite, we can’t possibly discover all the websites who have blocks set against us. Thus maintaining a list of sites where we present a non-Vivaldi User Agent is difficult. Instead, we will try doing the reverse. For a handful of sites where we know the label Vivaldi (and our version number) is responsibly used, we will present our full User Agent. Those sites being our own and a handful of interesting alternative search engines: duckduckgo.com, ecosia.org, qwant.com, and startpage.com. Every other site will get a User Agent that appears to be identical to Chrome.
src: https://vivaldi.com/blog/user-agent-changes/
Since you haven't mentioned your use case, assuming you are building sites, the best solution would be to do what everyone does. I recommend building websites agnostic to browsers and devices, but responsive to resolutions and feature support. Almost all of the browsers are running on Chromium these days, except Safari and Firefox (to my knowledge). So they are all going to work consistently across the board. For any given feature, one could always refer to w3c or mdn docs for compatibility and build around that.
Browser detection is also not quite reliable, as there are extensions to spoof the information. Like this extension that mimics a TV agent so one can run youtube console version on it.
On the other hand, once again I don't know your use case, one might benefit from platform detection over browser detection, like catering to mobile and TV users. Even then, if you have a site responsive enough the platform becomes non-essential information.
I am looking at trying to scan barcodes from a mobile device.
I been doing some research and I having hard time finding JavaScript libraries that can do this.
I see these projects
zxing
This seems to be no longer in development and just bugs fixes are done?
QuaggaJS
This one, I am not sure if it is development either anymore as changelog is from 2017
quagga2
This seems to be a fork of the one above? So this might be the better choice to go with vs the 2?
What I am trying to achieve is this. I want to go on an andriod device (think phone, maybe tablet), load up chrome or firefox, go to my site click a button and load up the devices camera and scan a bar code (mostly EAN-8/13).
I want to do the same thing on apple devices (iphone and ipad), load up safari (not sure if they got chrome and Firefox on these devices. I don't own apple), click a button and load up their devices cameras and scan a bar code.
I think this is possible in all the libraries I listed above, but I am still unclear if this is possible on apple devices? I read somewhere that before ios 14 it would not be possible?
I am open to other libaries, I can use Jquery, vanilla javascript and I think angular (but I think it is version 3).
Just been doing this same research myself. All of those open source ones you listed seem to be either dead or have performance/reliability issues. Looks like only the commercial versions are really viable at the moment:
Dynamsoft - https://www.dynamsoft.com/store/dynamsoft-barcode-reader/
Scanbot - https://scanbot.io/products/barcode-software/web-barcode-scanner/
There are also two different mobile apps that are viable. These are web apps that just display a browser view and make a barcode scanning function from the app itself available on the page:
https://berrywing.com/scan-to-web-app/
https://www.mochasoft.dk/iphone_barcode2.htm
The second one has a more capable JS API of the two.
UPDATE: I went with that last option from Mochasoft. Turned out quite well.
tldr; Can one get the browser version from the front end without using navigator strings or Client Hints?
So with Google's announcement about freezing the navigator.userAgent string, I've been tasked with going through a bunch of javascript libraries at work in an effort to replace browser sniffing (aka userAgent). I know, I know, we shouldn't use userAgent in the first place because it's a sack of confusion and lies, but I'm inheriting this code and not creating it. Luckily, a bunch of the use cases were dated (IE8-10, PhantomJS, Windows Phone) and I could remove them completely. Others I could figure out which features/intentions the original authors were using and I could swap their conditions for feature detection.
But some of the public facing logic is using navigator.userAgent to figure out the browser version and this has been more challenging to replace because everything I find on the interwebs related to this search points to using one of the navigator properties. I don't know how and why clients care which "version of Firefox a user is on" and I'm awaiting that answer, but in the meantime I'm trying to see if there is a solution out there that can detect browser version on the front end. I'm not restricting the answer to just javascript, if there is a CSS/HTML/JS combination, I'm all for it.
I'm also aware the Google says we should use Client Hints but that requires hitting the server which is out of scope for my task.
Freezing plan via the Google Announcement:
Different parts of the UA string have different compatibility
implications.
Some parts of it, such as the browser version and the OS version, can
be frozen without any backwards compatibility implications. Values
that worked in the past will continue to work in the future.
Other parts, such as the model (for mobile devices) and the OS
platform, can have implications on sites that tailor their UI to the
underlying OS or that target a very specific model in their layout. Such sites will need to migrate to use UA-CH.
If I am reading the second bullet here correctly, then the version parts of the navigator strings will be frozen and unreliable by Early June 2020.
Again, just so it's clear, I know this should be replace by feature detection, but I don't have full control over our clients and users and I'm just seeing if there is a solution out there. I have a feeling lots of folks will end up trying to solve this problem soon enough.
Is there any way to consistently detect PhantomJS/CasperJS? I've been dealing with a spat of malicious spambots built with it and have been able to mostly block them based on certain behaviours, but I'm curious if there's a rock-solid way to know if CasperJS is in use, as dealing with constant adaptations gets slightly annoying.
I don't believe in using Captchas. They are a negative user experience and ReCaptcha has never worked to block spam on my MediaWiki installations. As our site has no user registrations (anonymous discussion board), we'd need to have a Captcha entry for every post. We get several thousand legitimate posts a day and a Captcha would see that number divebomb.
I very much share your take on CAPTCHA. I'll list what I have been able to detect so far, for my own detection script, with similar goals. It's only partial, as they are many more headless browsers.
Fairly safe to use exposed window properties to detect/assume those particular headless browser:
window._phantom (or window.callPhantom) //phantomjs
window.__phantomas //PhantomJS-based web perf metrics + monitoring tool
window.Buffer //nodejs
window.emit //couchjs
window.spawn //rhino
The above is gathered from jslint doc and testing with phantom js.
Browser automation drivers (used by BrowserStack or other web capture services for snapshot):
window.webdriver //selenium
window.domAutomation (or window.domAutomationController) //chromium based automation driver
The properties are not always exposed and I am looking into other more robust ways to detect such bots, which I'll probably release as full blown script when done. But that mainly answers your question.
Here is another fairly sound method to detect JS capable headless browsers more broadly:
if (window.outerWidth === 0 && window.outerHeight === 0){ //headless browser }
This should work well because the properties are 0 by default even if a virtual viewport size is set by headless browsers, and by default it can't report a size of a browser window that doesn't exist. In particular, Phantom JS doesn't support outerWith or outerHeight.
ADDENDUM: There is however a Chrome/Blink bug with outer/innerDimensions. Chromium does not report those dimensions when a page loads in a hidden tab, such as when restored from previous session. Safari doesn't seem to have that issue..
Update: Turns out iOS Safari 8+ has a bug with outerWidth & outerHeight at 0, and a Sailfish webview can too. So while it's a signal, it can't be used alone without being mindful of these bugs. Hence, warning: Please don't use this raw snippet unless you really know what you are doing.
PS: If you know of other headless browser properties not listed here, please share in comments.
There is no rock-solid way: PhantomJS, and Selenium, are just software being used to control browser software, instead of a user controlling it.
With PhantomJS 1.x, in particular, I believe there is some JavaScript you can use to crash the browser that exploits a bug in the version of WebKit being used (it is equivalent to Chrome 13, so very few genuine users should be affected). (I remember this being mentioned on the Phantom mailing list a few months back, but I don't know if the exact JS to use was described.) More generally you could use a combination of user-agent matching up with feature detection. E.g. if a browser claims to be "Chrome 23" but does not have a feature that Chrome 23 has (and that Chrome 13 did not have), then get suspicious.
As a user, I hate CAPTCHAs too. But they are quite effective in that they increase the cost for the spammer: he has to write more software or hire humans to read them. (That is why I think easy CAPTCHAs are good enough: the ones that annoy users are those where you have no idea what it says and have to keep pressing reload to get something you recognize.)
One approach (which I believe Google uses) is to show the CAPTCHA conditionally. E.g. users who are logged-in never get shown it. Users who have already done one post this session are not shown it again. Users from IP addresses in a whitelist (which could be built from previous legitimate posts) are not shown them. Or conversely just show them to users from a blacklist of IP ranges.
I know none of those approaches are perfect, sorry.
You could detect phantom on the client-side by checking window.callPhantom property. The minimal script is on the client side is:
var isPhantom = !!window.callPhantom;
Here is a gist with proof of concept that this works.
A spammer could try to delete this property with page.evaluate and then it depends on who is faster. After you tried the detection you do a reload with the post form and a CAPTCHA or not depending on your detection result.
The problem is that you incur a redirect that might annoy your users. This will be necessary with every detection technique on the client. Which can be subverted and changed with onResourceRequested.
Generally, I don't think that this is possible, because you can only detect on the client and send the result to the server. Adding the CAPTCHA combined with the detection step with only one page load does not really add anything as it could be removed just as easily with phantomjs/casperjs. Defense based on user agent also doesn't make sense since it can be easily changed in phantomjs/casperjs.
Ground rules:
No flash
No add-ons
Must be supported on IE8 at the least
I'm wondering if Canvas could do it in combination with JS and may be some ingenious JS libraries.
Update - I am required to take a screenshot of that silverlight element, without being provided with it's source. (Story of my life) Before resolving to totally recreating the silverlight element, I thought I would give it a shot.
Update 2 - How about wrapping the silverlight's .xap with another .xap? (like flash could play a swf file inside another swf) I'm not sure if that's possible, being new to silverlight.
Update 3 - Since I am no longer trying to work on this problem, I'm not in a position to try the solutions given by the goodfellas. I'll be choosing an answer with the highest number of votes in about 2 weeks from now.
No, allowing screenshots to be taken could cause security issues e.g. if someone injected javascript and took screenshots when you were looking at your online banking site.
Having said that there seems to be a discussion about doing this with SilverLight on the silverlight forum. Could be what you want.
yes it's possible...
use below code
<WebBrowser Grid.Row="1" VerticalAlignment="Top" Source="{Binding VodeoUrl,Mode=OneWay}" Height="280" Width="280"/>
in C# code :
eg. swf file url: http://xyz.net/evideos/tanzanite-01/7398a.swf or you can set local path also.
VodeoUrl = video[0].ToString();
The API for Javascript's interactions with the browser are designed such that this sort of thing cannot happen. It would be a huge security hole.
Canvas is an element that is drawn to on the page, it does not grant access to the browser's drawing system. Furthermore, IE8 does not support canvas, so IE8 support is out the window, especially if you require no addons.
In summary, no. It is not possible, nor even advisable.