 Welcome everyone to the WebAuth automation using Selenium by Mayank Joshi and Saikat Sen Gupta. We are glad that both these speakers can join us today. And over to you guys, you can start the session. Thank you so much the organizing committee for selecting our presentation for this. I'll quickly share my screen and then we'll have a quick introduction of Mayank and myself. So I'll introduce myself first. My name is Saikat Sen Gupta. I'm currently working as a software engineer at Mastercard. I have around 14 years of work in IT, particularly worked on Java, Selenium and other related technologies around testing automation, some DevOps as well. And this year we got a chance to work on a technological WebAuthn and this talk is going to be our exploration around WebAuthn and how we can automate that using Selenium. So I hope that this session is going to be useful for you. You'll get to learn something new. So Mayank over to you. You can introduce yourself and I'll start sharing my screen. Thank you so much Saikat. I'm Mayank Joshi. I have around 13 years of experience in IT industry, mostly into roles of automation engineer, functional QA, right? And recently I moved into software development engineering role. My roles have mostly spanned around developing automation suits using a quick test automation pro right, which was first of the automation tools. Some some time down five or six years down the line right mostly use in banking domains today and later on moved on to J behave Selenium and started using a lot of behavior driven frameworks as well. So recently I'm working with MasterCard close to seven years now and I along with Saikat are working together on a project right which is to enable WebAuthn across enterprise and also make it available as a value added service to our internal as well as external customers. This session is more around how we dealt around the challenges that we had come across while automating passwordless authentication using WebAuthn and this is what we are going to demo in this session. Okay, so quickly discussing about what is WebAuthn right we are all too familiar with using usernames and passwords as a method for authentication. So this framework is ubiquitous and easy to understand for the common consumer, but still think right one in five users have experienced account takeovers from password credentials. If you wish to check your check it out yourself right if your credentials have been leaked some somewhere during this journey, it journey you can just go and check have I been pond.com right using your username or phone number, and it will give you the history of whether you were a pre to account takeover anytime in your IT journey. According to a study during a period of just one year data breach is exposed total of 1.9 billion user names and password. This in itself is concerning and waiting for some some innovation to happen in this space wherein how we can get away with this form of authentication. So then so industry advanced and and then there came in the next iteration of credential authentication which which we all know is second factor authentication or two factor authentication, but customer accounts for popular low assurance second factor is SMS and we all know there are a lot of documented ways with which describes how vulnerable it is to phishing attacks. Industry advanced again, and when we moved over to you to F, which is universal assurance framework right using security keys. It accepted it was accepted industry wide and it attracted traction but again. It was not that seamless of adoption with with all of the majority of the browsers that we have in the industry, and that is the reason why it, it was not it, it didn't fly. There were also concerns with the way there was an implementation of it around using JavaScript APIs in the background and and again it lost team. In comparison to all of this forms of authentication provides a potential solution to advance phishing attacks, which simultaneously improve customer experience. So we have a brand new web or thin platform API that provides standardized way of store strong authentication on web. It is also available on all majority of the browsers on desktop and mobile platforms beat Chrome, Firefox, Edge, Safari, Opera all browsers have already certified themselves against this particular solution, along with industry leaders like Windows, Microsoft right and and I I was they have already embedded this solution on to their platforms and hardware's and have already received phyto certification for the same. So web or thin is is not is more than just an API right it is it also enables authenticators that come in wide variety of forms, which we usually call user authentication forms right so you can authenticate yourself either using fingerprint or password or touch ID or your face ID right even in comparison to password. So you can think of it as a strong form of authentication right where you do not have to combine it with passwords to implement second factor of authentication. Basically you already have something that have something right your device and something that you that you are right that is your fingerprint so you get great security along with user experience. Quickly talking about the advantage it it brings along with it is firstly is the protection against phishing an attacker who creates a fake login website can't log in as as the user because the signature changes with the origin of the website so web or thin works on the concept that you are a client and there is a server now the exchange that happens between the client and server over here is in form of public key cryptography and along with that there are some signatures which are exchange over the internet right and and that signature is closely tied to your domain name of of your web application as well as the private key which has been stored which is stored on the user device and and used to sign that signature will talk more on on this in a while but usually this is how it it prevents phishing usually if I present a spoof site and and try to authenticate or trick a user to authenticate itself against it. I'll be caught and it won't be allowed right so this is one great level of protection which we get with web or thin which is protection against phishing. Secondly if you talk about impact of data breaches right as I said the number of data breaches that we saw just a just a while ago in regards to passwords. Developers don't need to hash the public key and if an attacker gets access to the public key used to verify the authentication, it can't authenticate because it needs a private key. The whole logic of web or thin works on public key cryptography, where in the private key which gets created as part of the registration remains on the device. However, the public key along with some other attributes, which can help identify that particular user account and and its credential is stored on the server. Even if the public key gets breached right somebody hacks the database where I'm storing all of these details it won't be of much use because unless you have the private key public key is of no use. So the main advantage that we have with with web or thin and as I said right invulnerable to password attacks. Obviously, you do not have to use passwords in any form over here and an and an attacker may obtain the user password for another website. Which can be termed as a great data breach but since there are no passwords involved over here we are safe from that perspective since it is all the game it is all game of public and private key. So quickly walk you through how this works in action through a simulation that we have already recorded and you can also try it yourself. From this website which is web or 10 dot me right so. As you can see right that the three key important participant in this flow are the authenticator. The web app running on the web browser and the web server right so as a user. I'll authenticate myself I register myself either using username or email ID right and the to kick off the registration flow the server first exchange is a challenge right which is a large random number. And which is later thrown away right so all of this information along with the random bits of string right which which is termed as a challenge response is transmitted along with user information to the web app. And the browser web app then calls the web authentication API right it extracts the domain name of the web application and provides all of this information to the use to the authenticator which then asks for user consent as you can see on the screen. Right, so this is required so this malicious websites cannot use apis to track the user it is it is a part of protecting users privacy. So I'll make use of the platform authenticator which is available on my on my laptop and I'll provide my consent. The authenticator then generates a public private key pair internally along with the credential ID user information and importantly the domain name this credential belongs to all of this right is is forwarded to the server. Right and it is stored along with the user information and a private key over there. So as you can see right this is the private key. This is the public information presented on the screen is something which is stored at the server. And this is corresponding to the user information whereas the private key remains on the device which is usually the authenticator is part of the device and it is something which will store this information. So remember you only have to do it once now then comes the next part of it as in to use the registered authentication mechanism to authenticate for a subsequent transactions on the website. So starting here is authenticator already knows your private key and the server has the public key in association with the user account. So once again the flow starts with the server generating a challenge. The server transmits the credential ID and the challenge to the web application, which in turn calls the web authentication API and and that is when you get to see again the user consent screen popping up. The user is you provide your registered authentication over here the user is locally verified browser extracts the domain name of the calling application and sends all of this information to the authenticator. Authenticator looks up this information for the credential ID. And the name of the website matches to the one that was provided at the time credential was created this is what this authenticators this is what makes authenticators registered resistant to fishing. So, all of this is is in short the complete journey of how registration and authentication works in real. Obviously the challenge that gets created the random bytes or the random characters string is obviously invalidated at the end of registration authentication flow. Right it is it is just short lived. So that is all about web authentication in action. So all this time we have been talking about authenticators right so people usually get confused by the term authenticators it is. But a way to verify a user right there are a number of authenticators available in the market today. Some authenticators are I tried tight closely to the platform or the device nowadays the latest models of devices and laptops that we get in the market they already have this authenticators in build right so if I have to give you a few examples. Windows Hello right it already comes with in build strong authenticator which can help you authenticate using fingerprint face or pin. Similarly on iOS if I have to say you get a authenticator right. I sense which can help you authenticate using touch ID or fingerprint right so to talk more about this authenticators right platform authenticators are the ones that are integrated with the device and are capable of capturing the authentication factor authentication factor can be fingerprint right touch ID as I said also called as internal authenticators. So a few examples of platform authenticators touch ID face ID windows Hello where the respective features include being embedded with the device itself. With platform authenticators the primary device such as a laptop or the smartphone contains the necessary components of a trusted platform module such as secure enclave or TPM right if you talk specifically about Android and ours. The user actively or passively authenticates the request is matched against the encrypted information on the TPM and that is how they are granted access all on the same device. So this is more of a concept of local authentication rather than authentication details getting exchanged over the channel right and server validating it against the set of passwords that it has already stored at its end. Now coming to next type of authenticators which is platform authentic cross platform authenticators are also called as roaming authenticators or external authenticators such as hardware security key right you might have used you be key at some or the other time in your journey right this authenticators can be used with a laptop or mobile device and others cross cross platform. This characteristics enables their use to establish a secure source for verifying the user identity and for delegating trust to the specific device in the user control. Right the user can therefore authorize other devices as needed or we can say we can they can bootstrap them such should one of those other devices be lost or become corrupted the roaming authenticator is used to authorize a new device. So it is more about the roaming authenticators you can also use your mobile device as a roaming authenticator. You can also use a UB key as your roaming authenticator basically trusting some another device which can be used as a form of authenticator and authorizing the device which does not have the inbuilt capability within the device itself. The last form of authenticator is is a virtual authenticator right so as compared to previous two authenticators which are more tight tight to the hardware. Right this this are kind of authenticators which are simulated authenticators or you can say software based authenticators which are developed just to serve some of the purposes right for example automation which is one of them. You cannot make use of real authenticators and then present your fingerprint or face ID during your authentication or automation journey what comes in. Picture and can come to your rescue is the virtual authenticator which are are in builds or not in build those are software authenticators and mostly developed using JavaScript. You only had have to add a few lines of code to your login page to implement it right web browsers are automatically compatible. For example Chrome already has a support for virtual authenticator and that is something which will be demoing in a while. However web browsers are automatically compatible and users do not need any tokens smartphones or plugins right to to use them. So this this category of web authenticator as specifically more useful when we get into automation or performance testing phases of of QE right so what we do is I get to take us through to the automation stuff. Thank you so much bank for setting up the context and sharing the overview of web author and it was very helpful even I could revise some of the concept myself. So hello everyone now I'll walk you through how the virtual authenticator basically works and so far the implementation is done by the chromium team right the chrome and chromium based browsers such as edge. Then you have opera then brave all these browsers do have the virtual authenticator functionality already built with the system. So when we started our journey with this project eventually we had this question right like now how we can automate the stuff like there was a testing aspect as well. After the expiry testing is over right we also at the same time we have started thinking about the automation aspect and Selenium for was there for quite some time I think it took four or five years finally we got the final release of Selenium last year. In our organization there is a policy that you have to like pick the latest stable releases of the software software whatever applicable. So since when we started working on this only Selenium three was in the release state. We basically explore Selenium three how we can fit in our automation journey in that and obviously Selenium for was giving a much more flexible option. But we picked up that later once Selenium four was released to the wider audience. Now, coming to virtual authenticator. Let me. Okay, so I'll use this website which is similar to the one we just have seen web authoring.me so there are quite a few sample websites in case you have to explore the stuff yourself. This is going to be helpful so how the application under test is going to work right I'll give a quick overview how web authoring.io is working. So first of all, as we just seen that I have to enter a username it could be anything. So let me add Selenium conference. And then there are certain option we can keep it as is, but this is basically to fine tune your authenticator experience so there are quite a few attributes defined by the web authoring spec. So one of which is attestation attestation type right so what exactly is attestation type. So that means basically the authenticator that you're using is kind of a legit type of authenticator right so that the server will know that okay attestation was done and this is the authenticator that I can rely upon. Okay, so there are two different type of attestation one can be indirect or the other one will direct so in indirect attestation you basically don't expose a lot of information. Those are kindly wrapped in such a way that that is more private and you're not exposing a lot of details and still getting the benefit of attestation and direct is like you're saying that okay this is the authenticator ID and these are the other details, which can be utilized to attest that particular authenticator by the server. Right so I can choose any of this let me select direct type of attestation. And then there is authenticator type so we just spoke about authenticator type so virtual authenticate is kind of a emulated one, which is particularly used for testing and debugging the journeys, the user experience, but primarily it's two different type of authenticators that we have right so one is the cross platform or the external or roaming type of authenticator that might just explain. So, last one is the platform the first step platform module that I do have in my inbuilt on my system right so right now I'm presenting this from my MacBook, which has a secret and clip, and I do have the touch ID enable right so I would be able to register myself on this side. So it's asking me for the password. I have given the password now it says that success from trying logging in. So if I just log in with the same user, I'll see that the password prompt is again shown to me, I'll enter that. And I'm successfully logged in. So if I tried with a different user, for example, which isn't registered yet. So basically the same options once again, and I try to log in. So I'm getting these options. And it says something went wrong right so the operation either time dot was that's because I haven't registered myself right so that's that's the reason. And there are certain other advanced setting, which will quickly look into once we open the virtual authenticator. So now, how can we enable the virtual authenticator so that is there in the Chrome DevTools, or if you open the DevTools window, let me zoom in a little. Okay, so if I just go under the settings option I can see there's a more tools, there are a lot of tools available. And then I do have this web auth and functionality. I'll select that. And now I get a very simple minimalist window, which just saved that enable virtual authenticator environment so right now. So my device do have the TPM module it has the actual authenticator setup right so I'm just creating a bridge between the virtual authenticator and the browser so that the next time all the calls will be redirected to my virtual authenticator rather than going to the platform module basically. And the new authenticator option basically is giving me the different protocols available so CTAP2 is a default one that I'm selecting here. Under transport mechanisms I had I do have four types. So internal is going to be selected when I'm using the platform module like the TPM module. So the Bluetooth NFC would be used for external or roaming authenticators right so I'll select internal. And there are a few more options right supports resident keys supports user verification and large brawl. So support resident keys basically means that the storage of the credential can happen like WebAuthn has given a lot of flexibilities. So in case if someone wants to store the like credentials. They can store them encrypted and secure manner in a server. Okay, so then I can enable the support resident keys or a visible as resident keys or not. And user verification support is basically ensuring through gesture modalities like I'm entering my biometrics or entering some peanut password right just to ensure that okay user is verified when the transaction was done. So I'll just simply add the authenticator and I can see that now a new authenticator has been created. I can rename the authenticator by default it takes this six digit of the ID. Okay, so I can name that so for example dummy authenticator something like that. And it is going to be active so I can create multiple authenticators but at one time only one single authenticator would be active. Now, so the other options we can see that whatever I have said is basically reflected in the in the screen as well. And then there's a credential store. So authenticated authenticated is basically the credentials to every time I do a registration on like the WebAuthn enable site, right the credential will be created for me the private and public keeper, and that would be stored as one record. So if I just go ahead and try to register myself. Now you can see it's saying success, but I haven't got that prompt right that's because the browser has now redirected the call to the virtual authenticator rather than my inbuilt actual TPM. And I can see there is a credential created with a signature count one and there are options for some reason I think I have zoomed in that's why it's not clearly visible. But there is an option to explore that and remove that as well the credential. Now once that is created that same credential now can be used to log in myself right so by click login. I can see that I'm logged in at the signature count has also increased. So the signature count will be increased every time you use that credential to authenticate yourself right so that's that's like basic functionality of virtual authenticator, which could be used in case if you want to like under what circumstances you would be using virtual authenticator right so as a developer or test you have to debug certain scenarios you have to emulate cases I do I don't have a probably external key, but I want to emulate that kind of idea how my application is going to work under such cases, then virtual authenticator would come in handy because it gives me a lot of debugging possibilities, flexibility is using a physical authenticator that is not going to be possible, because by definition, those are secure right so you don't have a lot of state information for those authenticators available during the work right so that's that's where the virtual authenticator came into picture and the Chrome team I believe they were having some issues while writing the unit test, etc. So that was one of the drivers for them to quickly come up with the virtual authenticator. And the web author is a W3 spec compliant API right so that's how it is now quite useful to use the same in Selenium. So we'll see right now how we can do it using Selenium so the first demo is going to be on Selenium 3 and then we'll eventually cover the same as using Selenium 4. So, as you can see this is a very straightforward, nothing fancy. And here we have created this one single test just to check the registration and authentication flow. And if I expand this test, that is not a lot basically I'm just opening navigating to the web author and and pardon me I have I'm not using any standards like page objects or other stuff. This is just for a demonstration quick demonstration how the web author and virtual authenticator abuse, so I didn't use those. So I'm just entering my username password, trying to register and then eventually I'm trying to log in. Okay, so that's what the test is all about. And in the meantime, I'm just setting up the virtual authenticator as well. Now, in order to send those virtual authenticator I basically am using the extension command right so I'm just creating a defining a new command using the HTTP command executor class and it's kind of a hacky. If you get to know a better way to do it Selenium 3. Please let me know, but I believe you're still, you're probably already migrated to Selenium 4 because that is giving a lot of new stuff new functionality is exciting features. So I don't see any reason why you're still would be using Selenium 3 but in case if you're still stuck with Selenium 3 and this is also possible. When you are just defining this extra command to add a virtual authenticator with all the options. Now, what are the different options available, all these are documented on the web author and spec for which we will share the links later on. And then finally I'm just adding the virtual command with the session ID that has started and with all the params parameters that I've created right so protocol CDAP to the transport is internal and then the other options that we have seen can also be embedded here and executing the just to set up the virtual authenticate and it could be like you are adding the virtual authenticator then it also gives functionality to add credential remove credential all those methods are available. If you just use this define command. Okay. So, that's pretty much it. Let me quickly start the test just to see how it is working. Hopefully things will work. And I do don't have that curse of life demo. Okay, so the website is now up username and the details are entered registered successfully. I clicked on login. Okay, so that's truly the curse of life demo. Okay, let me see what happened. And then I'm able to look at element. Okay, maybe my network is slow. I'll just do a little bit of trickery here increasing the sleep time. Not a good practice, but I think there enough to do in a live demo. And that should be okay. That's just because unfortunately my network was not giving me company. Okay. Okay. So it is getting open because I entered registered logged in logged in. Done. Test is now successfully done. Now, as you have just noticed that this is a lot of hacky way to do something. Let us implementation of selenium, right? So let me switch to my selenium for project and all the projects are already up and push to GitHub. So I'll share the links for the code base and as well as the slides. So same test is again getting run from this. No difference in that, right? Only difference is the way I am setting up the virtual authenticator. Okay. So as you can see, the virtual authenticator is now part of the class and I didn't have that idea because I primarily work with the Java technology. So I was told that this implementation was completed in Java and I think in one of the Python patch release, this is also available for selenium for other implementation. I'm not quite sure. I think it will be eventually taken up and implemented, but the virtual authenticator which is an interface, right? And the implementation can be found in the remote virtual authenticator, right? So all the implementation are added here with the add credential, get credential, all those nice and useful methods are available here. And then what I'm doing is I'm creating a virtual authenticator options, setting up all the options that I need, something similar that we have seen, like setting up the transporters, internal protocol, asset app to user verification, setting up a true user verified as to all the shop options are now added in the virtual authenticator options, which is being passed to our driver, which has the virtual authenticator capability now after all the setup is done. So that's it. This is very neat and clean way and very much readable as well. Just to see that, okay, everything is working fine. Still using web authentication capabilities. Let me run this. Okay. I probably have to do the same hack. So before it fails, let me just increase the time a little here. Again, not a good practice. So, okay, let me see now. Okay. The same site will come up in a moment. Okay. There it is. Registration is done successfully. Now we are trying to log in and we are logging. The test case basically successfully done. And that's adding gives some adrenaline short, seeing just the green ticks. So that's how the virtual authenticator could be automated using Selenium with both the versions as you have seen, but the preferred one would certainly be Selenium 4 because it has the cleanest way to implement the stuff. Right. So that was all about the demo coming back to the presentation. I think we have covered all the things that we wanted to cover. I'll share the link and the presentation as I have already promised. So we do have still some time for Q&A. Shailesh, are we going to take the Q&A now or will it be done in the Hangout rooms? If we have time, like we have a couple of minutes so we can take the questions. I can see a question in the Q&A and the question is that how long would the authenticator be available on a particular browser? And this is a appeal to everyone that in case you want to ask a question, just ask them here in the meantime or you can join our Hangout also after the call. So over to you, Saikat. Yeah. Thank you for that. And this is a nice question. So for me, since the application context was not stored anywhere. So in this case, the test, the authenticator would be lost as soon as I've closed the browser window, the authenticator is not getting stored as such. We haven't particularly explored the way it could be stored for future usage, but I think that's possible. But it's just that we haven't explored that part. But yeah, thanks for that question. That was quite interesting. Guys, if you have any question, you can ask him right now. Or after this, yeah, we have got one more question. So that is, can we use the same for application with authentication using push notification in phone? Push notification would be a different aspect altogether. So like in one of the journeys, we were exploring how the authentication can be done using WebAuthn. But the flow would be triggered from an external device. So for example, like to answer your question, I think it's going to be no, because push notification is a bit different than virtual Authenticator, but that could be a bridge. Like how the WebAuthn prompt is shown to the user. So for example, I do have my laptop, which doesn't have any touch ID or fingerprint sensor as such. But I do have my mobile, which is like Android mobile or iOS phone, which has got this capability, right? So from my web application, I can initiate the Authenticator or registration flow from my laptop. And then eventually I'll get a push notification on my device or maybe I have to scan a QR code and that then I'll finish the registration on my device. I'll register my phone finger, like Authenticator. And later on, whenever the authentication requirement is there, I can use the phone. But yeah, push notification is a bit different and the virtual Authenticator is, again, a little bit different and surprising. So yeah. Thank you, Saikath and Mayank. That was a really wonderful session. And I hope you guys have enjoyed it. Thank you.