How to use webauthn without key fob - authentication

I have tried my firefox 62 and chromium on various webauthn examples and I could not make any of them work. Are those supposed to work without special hardware? I activated security.webauth.webauthn_enable_softtoken in about:config. Though I can't find much documentation on what exactly it does. Is webauthn ever supposed to work without special hardware?
https://webauthn.bin.coffee/
https://webauthn.io/
https://webauthndemo.appspot.com/

To be able to use the "softtoken" in Firefox you have to enable it and disable the usbtoken:
security.webauth.webauthn_enable_softtoken=true
security.webauth.webauthn_enable_usbtoken=false
Then you can test on https://webauthn.bin.coffee/ and https://webauthn.io/ .
However, I have no idea how exactly it works and where its documentation is located.
As for the question how to use Webauthn, it should be possible according to the standard, but if browsers support it is another thing. Check this comment: https://github.com/w3c/webauthn/issues/1027#issuecomment-411441722
The spec is indeed written with hardware-backed authenticators (external or built-in) as the main concern, but WebAuthn does not in any way forbid integration of purely software-based authenticators.
...
It's perfectly possible for browsers or browser plugins to provide support for software authenticators, although WebAuthn provides no standardised API for doing that.

Well, WebAuthn is evolving technology. Supported only in Firefox/Chrome Desktop and Chrome Mobile browsers.
You'll need some U2F stuff like https://www.yubico.com/products/yubikey-for-mobile/
or AddOns like https://krypt.co/

Webauthn is pretty widely supported now, and it works in modern browsers without a roaming authenticator (a USB device or similar). It's very easy to test on the site you mentioned, https://webauthn.io/
https://caniuse.com/#search=webauthn

Related

What is missing in Firefox to support Vue.js debug within PhpStorm?

According to PhpStorm documentation:
Debugging of Vue.js applications is only supported in Google Chrome and in other Chromium-based browsers.
People like Jonathan Bossenger already tried to circumvent this dependency and make it work with Firefox anyway, but only to come with conclusion like:
Even if you try to edit the available list of browsers and enable Firefox it won’t come up as an option. Believe me, I tried!
Which lead to the question: what is integrated within Chrome/Chromium which is not present in Firefox, leading to this deficiency in development facility?
We used to support Firefox remote debugging (but without source maps) through the FireFox Remote run configuration, but our solution doesn't work in the latest Firefox versions due to changes in the protocol, and there doesn't seem to be an easy way to fix it. We've made some progress recently, but there are still some blocking issues.
Related tickets: WEB-45986, WEB-48076, WEB-2337

How to Capture Live Stream from camera and watch live or save for later viewing?

I am trying to make an online examination portal. When students start the exam, their webcam will start automatically and record the stream live and store in the server. Invigilators will either watch the students live or they can watch the saved live streams later.
I researched about this and found WebRTC as a possible solution along with a gateway server like Kurento. But later found out that WebRTC is not supported in Safari, which is a setback! My application should run successfully in web portal in any modern browsers which includes safari and also in android or iphone.
So can anyone suggest a possible solution to my problem? Which technology should I use that can support all browsers and OS?
Also, it would be helpful if you can provide links to good documentation or tutorials.
Note from the future (2020): This answer really isn't accurate anymore.
WebRTC is one problem... capture from the camera with getUserMedia is another. Safari doesn't support either.
There is no video capture API in Safari currently. The only thing you can do is make a native app for iOS.
Worse yet, because of Apple's restrictive policies, alternative browsers, such as Chrome, are crippled on iOS as they aren't allowed to use their own browser engines.
Use standards based technologies like getUserMedia and WebRTC for your primary web-based application. If you decide that the economics of your situation enable it, you can make an iOS app to work alongside until Apple decides to participate in modern browser standards like everyone else.
You can use Mediadevices.getUserMedia (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to capture webcam stream on browser (chrome and firefox).
To play with webcam stream on safari, you would have to use a pollyfill - https://github.com/Temasys/AdapterJS
To record the video/audio stream, you can make use of Media recorder api https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder (Note : recording stream is still a challenge in Safari as there is no support/pollyfill. However, it works perfectly on Chrome and Firefox latest versions).
Helpful demonstrations :
https://webrtc.github.io/samples/
https://mozdevs.github.io/MediaRecorder-examples/index.html
https://codepen.io/collection/XjkNbN/
https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/

How to get started with WebRTC?

I am a beginner with WebRTC, and I would like to know if there is anything I need to import to use the JavaScript APIs.
No, you do not need to import any library. webRTC is included in Chrome and Firefox (and for Chrome beta and Firefox on Android).
Your error may be because you need to prefix it with webkit like this:
peer = new webkitRTCPeerConnection(...)
You don't need to include anything to use WebRTC's APIs, but as a practical matter, you will probably want to use an adapter to normalize API naming differences between browser vendors (e.g. webkitGetUserMedia/mozGetuserMedia).
Google maintains a nice adapter that does this, and handles a few gotcha errors you might run into if using them directly.
Just include the following script in your page.
https://code.google.com/p/webrtc/source/browse/trunk/samples/js/base/adapter.js

There is an offline software to test a website in different browsers?

I'm looking for an offline software that can speed up the testing of a website in different browsers.
Yes, I can install Opera, Firefox, Chrome, IE and Safari and test in each one, but this slow down the process because there are a lot of changes to be done in the website I am working and each change must be tested in all browsers.
More specifically, I am looking for something similar to IETester, but for different browsers. I'm not interested in online services (there are a lot), but offline.
So, someone knows something like this?
I find the Selenium tool [ http://seleniumhq.org/ ] very useful for such needs:
there are drivers for almost all modern and not-so-modern browsers: firefox, IE, Opera, Chrome, Safari..
scales quite well through the webdriver thing (remote control execution of tests on many different hosts), and
is well established: there are many resources available around to develop and deploy it.
Main drawback, as for my own experience: the learning curve is somewhat tough.
There is also a nice test management tool especially targeted at Selenium: Bromine (disclaimer: I did not yet use Bromine, but saw great comments on it).
Regards,
--
boris
Adobe BrowserLab for Desktop Browsers (Free) As noted in the comments, this has been discontinued. But they recommend Sauce labs, and Browser Stack instead.
Adobe Edge Inspect aka Shadow is also available and does all the above quite well. It is primarily for Mobile Browser testing and debugging.
Microsoft's Expression Suite also has its own Cross-Browser Testing utility, called Expression Web Super-Preview.
In Microsoft's words,
You can view browser renderings side-by-side horizontally or
vertically, or overlay them to identify differences. You can use
rulers and guides to measure and highlight visual problems. You can
zoom in and out of a page and see all the browser renderings update in
tandem.
You can try BrowseEmAll (http://www.browseemall.com) which is a desktop application for windows (and sadly windows online).
Still it contains all major browsers and simulators for iOS and Android which should make the testing easier than switching between different browsers manually.
If you like groovy, then try Spock.
I've experimented with Spock and Gem for BDD tests.

How do you test your web UI to see if it renders uniformly across different browsers?

Tools like Selenium are good for testing user interactions on the web UI. However, I was curious what are people approaches for strictly testing and verifying that web pages are rendered correctly across a set of browsers?
Is this even possible?
May I recommend browsershots where you can submit pages and have them rendered out in a variety of browsers with various things set on or off such as Flash and JavaScript. At the end of the day you will still want to install FF, IE6-8, Opera and Safari/Chrome for testing manually. Also, if you've got a friend with a Mac (or a PC if you're using a Mac) get them to test in Safari too as I've personally found differences in the way both of them render the same page.
I'd also recommend that you develop mainly in Firefox and regularly check it in IE6 as you work. IE6 is the one that will mostly screw up so if it's working in both it's more likely to be working in all.
When you find rendering weirdness try and fix it in your markup and CSS first before resorting to CSS hacks as they can lead to 'interesting' problems later or in other browsers.
There is only a handful of browsers you need to test, as some share a common rendering engine (Gecko or Webkit). Without explaining which or why, here's the current wisdom (2009):
Build your site using Firefox or Opera (on any platform). BTW Opera uses its own Presto engine;
Test in whichever of the above you didn't use.
Validate the (X)HTML and CSS (important!).
Test it in >=IE7 and note the glitches, if any.
Use conditional comments in separate stylesheets for each version IE - never use CSS hacks as they'll go out of date.
Test in IE <7 if you like and do the same, or use conditional comments to ask users (politely) to upgrade their version of IE.
Test in Safari (Webkit).
Don't test in Chrome, you already have by proxy (Webkit)!
Don't test in IE for Mac - the share is too low and it's no longer updated.
Finally, try enlarging the text in Firefox, Opera, IE and Safari. Opera also has a hand-held emulation mode for mobiles.
You will have now covered (theatrical guess) 99.9% of browser setups. If you're on OS X or Linux, you can run Windows in a virtual environment like Parallels or Wine. Apparently Wine also has a Windows binary, but I couldn't find it. Caution: you'll need to be sure that your virtual environment allows IE to read conditonal comments.
In practice, I find that if a site has valid code and works in Firefox, Safari and Opera, it'll probably be okay in IE7 up. The only HTML/CSS gotcha is IE's 'haslayout' handling. If you don't have the browsers, BrowserStack is an excellent online testing service.
Finally, if you're using Javascript, you'll need to go through a similar process, problem being that as a rapidly developing area, newer versions of some browsers handle Javascript in increasingly effective ways, so functions in older versions might break or fail quietly.
If you just want to see if layout is correct, just submit your website to BrowserShots.org and visit later to see the screenshots.
If you want to test the functionality (JavaScript, etc.) then you'll need to test manually.
Manually?
I do not see an alternative if you want strict testing. Just install as many different browsers as possible and test in all of them. Of course this includes different versions of most popular browsers, and you need to check on Windows, Linux and Macintosh.
Previously I was use WM for different versions of IE, but I find out some new tool for testing layout, and UI as well with this tool, link for FF use fire bug extension, those tools are for manually testing.