Browser 3.0 - How to Build Secure Web3 Clients by Philipp Langhans (Devcon4)

and today I want to talk about browser 3.0 how to build secure secure web 3 clients and I would like to start with this quote there are two ages of the internet before mosaic and after the combination of protocols with a browser which provided a great interface proved explosive in 24 months the web has gone from being unknown to absolutely ubiquitous and I like this quote because I think it's important to remind ourselves that the Internet is not so old and less than 25 years ago no one was really talking about the latest web development framework trends no one was sharing stuff on social media because the internet didn't really exist and people were more concerned about like infrastructure things and protocols and how to scare this thing and only a very small group of people actually had the the knowledge and the tools the money the resources in general to access the Internet so it was very similar to what we have with if you know but then something something happened the browser was introduced and now people actually could access the internet and then mass adoption started and we will probably see this once the scalability and protocol problems are solved and that there's some kind of message option for a theme as well and then some some funny funny things can happen and I want to show you how this looks like so we are in the year 1994 its December 1994 and Netscape Navigator 1.0 was released and suddenly it is easy to access the Internet and then this happens everyone wants to go online everyone wants to experience this thing before we had TV shows that would make fun of the internet that would laugh about it and suddenly it is a thing and someone noticed this and then someone is Microsoft and when they saw what happened they got really scared because they were really the dominant force they were completely completely owning the home computer market and this was a big shock for them so in July 1995 they released Windows 95 and it came pre-installed with Internet Explorer as the default browser and some of you might say hey that's good that's some horrific on but it was pretty much illegal and recall this browser was 1.0 and it's not called the browser disagreement of fight no it's called browser Wars because a big corporation used all the energy and all available resources to destroy a potential threat the internet was becoming a thing browsers became too big so they were going after developers on an individual basis they tried to sue them individually this ended with an antitrust lawsuit United States vs Microsoft they got charged with a legal tying of Internet Explorer to the Windows operating system and they had to pay hundreds of millions and this is not super interesting the interesting part is really this someone tried to monopolize and gain platform power over something that is decentralized the internet and this concept of platform power is something that I want to emphasize it means pretty much that the browser's are not just the clients that represent the infrastructure but clients actually have the power to dictate dictate the underlying infrastructure and protocols and they create blocking effects and they can they can be gatekeepers that control who should have access and what kind of access and if we see it we see this even today when Google is willing to pay 12 billion dollars a year to Apple just to remain the default search in Safari browser so browsers are still a very interesting and lucrative target for big corporations and they really want to own this this space and control it as much as possible but this is not what we want we want our tools and clients to be open and free as much as possible we want them to be an extension to the regular web but they should have the full access to the Ethier Network and all the benefits that come with it such as computational power smart contracts cryptographic security safe sovereign identity decentralized storage and crypto payments and we can call chorused where the browser 3.0 unfortunately this too doesn't exist yet and someone needs to build it so let's build a browser but before we are reinventing the wheel we should just shake this would be and there's chromium the open-source project for Google Chrome and this project has 20 million lines of code it takes around six thousand person years to build the estimated costs are 320 million US dollars 35 programming languages are used in this project more than 50 engineers are working on it full-time more than 60 gigabytes of RAM are highly recommended to build it and it takes roughly 24 hours on my machine so that is not an option for us we don't have these resources but there are certain frameworks that can help us with it and one of them is electron so what is electron electron already comes with chromium pre-built pre bundled it has no js' integration to customize the the browser behavior and it also has native api's so that it runs on all major operating systems it looks really promising it looks like a really good tool that we can use and many many applications are already using it and it's becoming a really big thing and we see this for classical and developer tools productivity but also a lot of trips or applications that are already using electron and I want to focus on before I go to this slide I should I should say this is a security talk this was the first part and I really wanted to emphasize why we want to build this browser but I think now it's becoming a little bit more technical but if one of you and the audience just recognizes one of these icons here or you may be using one of these products on your computer that's also ask your private keys or some funds on it then I think the next part which is more technical technical could still be interesting for you I want to focus on these web 3 clients which can be considered a subset of the browser 3.

0 so these are clients that have access to the ethion network but they can also host EPS decentralized apps and they provide an interface so that these apps can actually interact with the network and the most prominent ones are probably madam as brave then if you missed and the parent parity client and this is the approach that these projects took so meta mask is really convenient and it's a great tool it's a Chrome extension then brave was built on electron if you missed build on electron and parity had a UI that was built on electron and now they have a wallet that is built with electron and brave were probably the first that recognized that electron is not the best tool to build these kind of browser browser logic applications and then they forked electron to fix some of the security problems and they call it moon and then they realized this will also not help and now they going completely away to something that is closer to chromium and the if you miss team also realized that electron might not be the best choice and we have an internal project called Tao and I will talk a little bit more about this in a second and that tries to fix all these security problems but before I talk more about electron why it's not just every electron is not such a great option why it's not everyone just building a Chrome extension and I really wanted to motivate this with the first couple of slides and that we need some kind of diversity and that platform power is a big problem and besides this being a browser plugin has more limitations limited API X is not running in chromium forks without extension API such as electron it's perceived and a type of coupled to the Chrome Firefox or whatever the hosting application is and it has no platform ownership which is probably probably the biggest problem because then this can happen someone decides for you that your extension should not exist anymore should not be available anymore and this happened and the Mirrormask extension was removed from the store for a couple of days and they are more crypto extensions that got completely banned from the store well this happens someone decides that all applications should not exist anymore and this also happened and there was something called Chrome apps and they got pretty much killed within the last two years all of them okay now I want to focus a little bit more on electron security and there are a couple of ways how to build an electronic application there is a good way where you actually build a user interface with web technologies which is what you want or you build your your DEP with web technologies and then you need to make some like extensions to the to the the stuff that the browser does not offer you a regular browser so you design an API for this and then may need more access to the operating system you write the application logic that is that is running in a separate process and you have some kind of messaging mechanism that is whitelist whitelisting certain messages between these two processes that's good but it's also harder to build and you can also do this with electron you can build the whole your user interface code that is running in the browser then you don't really need an API and you can just write your whole application code that is also running in the in the browser window and that's for most applications a really bad idea and this is possible because of a feature one of the core features of electron which is called node integration so node integration allows you to access all the node Rhea's api's from within the browser window you don't need the separation of these processes anymore you can do really crazy stuff you can accept the filesystem just from a regular web page this is possible especially because the electron project removes the sandbox from the browser which is one of the core security mechanisms so that's really bad and it opens a really large attack surface for these applications and we should be aware of this and there's there's our application code but this is only at the top our application has its own dependencies to NPM or yours then it's running in the electron framework and the electron framework has dependencies to chromium nodejs v ID and some lower-level api's and we need to be aware of the fact that every single layer can be attacked and was attacked so far so we saw on an infrastructure level there was a DNA attack against my ether wallet then for electron we've seen a bunch of node integration bypasses so you can actually turn the node integration off for these browser windows but then we've seen cases where an application that was running in the browser window could turn it on again which completely defeats the purpose of it and if this was not working they will just create a new window that had note integration on and they would load itself there themselves into the new window and then they get full access to the operating system and it's this is the security nightmare and then they have full access to all your keys and files and whatever you store on your computer on the dependency level we've seen NPM modules being hacked so someone created an NPM module and they did not really protect their account someone was able to hack into this account they modify the the module code and then this module is a dependency of millions of other projects and they can infect in fact millions of other of projects on the application level we see a bunch of cross-site scripting attacks which is probably the the most dominant thread they are especially don't cross-site scripting for electronics another big really big thing for us updates that are security critical and I want to show you why so for with mists for example in version 10 10 we have dependency two-electron 1.8 in version 11 we have a dependency two-electron - so I I said it before electron has its own set of dependencies so electron 1.48 for example has a dependency to chromium 59 then node 88.2 and v8 5.9 and electron two has a dependency to chromium 61 node 8.

9 and v8 6.1 and the latest version is for chromium 71 for note it's 11 and for v8 and 7 and you don't have to remember all these numbers I will break it down for you the latest version is 71 the version that is used as a dependency of our electron dependency a 61 that's a 10 version difference chromium has a release cycle of 6 weeks that's a 60 week difference in Petra's security updates bug fixes more than a year outdated and it's even worse because we get this the responsible is closed our timeline for v8 bucks for example is not one year it's a couple of weeks so we have documented exploits such as this s this v8 integer overflow and you can find it online this is a is an attack that works in old outdated browsers it also works for every electronic that is still on 1.8 for example another big problem who is reinstalling their browser when they want to refresh a web page I hope no one does this because this is what crazy people do but this is our update model right now with all the electron apps so in order to push a very very simple change to the user interface we would have to go through the whole process or process of reinstalling all the binaries that come with it which gives you a sec 60 megabyte update you need to download a new installer and then run through the whole process of updating a new browser basically just for very small changes so we saw these problems and we wanted to fix them and we did this with our internal project called tau so what is tau tau is also chromium it's not yes it has native api's but we're doing a bunch of things in a different way so for example there's no node.js integration anymore we are also not using the chromium content that is used in electron but we're using CF and CF is maintained by Spotify and they're doing a really great job in providing really recent updates for the chromium v8 and Noem chromium and v8 dependencies for the browser we also have the advantage that chromium embedded framework allows us to enable a full sandbox and for the back-end process we can use whatever we want so we can update to the latest v8 version which which is version 7 and we can update to the latest node.js which is version 11 and then we get this nice benefits so the 8 version 7 was released two weeks ago and it comes with web assembly support for 4 threads and that's pretty cool if you think about all the stuff that we have on our roadmap for it wasn't for example that rely on newer features that are not available in all browsers yet we also have these advantages because we get all the benefits all the changes to no js' all these like bug fixes and improvements to the crypto API for example and many of the crypto algorithms that we need to achieve our goals with a theorem getting implemented are already implemented in your note versions so that's that that's a have benefit as well so who's using Tao pretty much no one is using this except maybe our little like proof-of-concept project and that's a good thing because electron is a one-size-fits-all solution and you have to think about it they're going through the full bureaucracy the full backporting they need to coordinate with Microsoft with get up with slag and all the other applications that we just saw when they want to make a breaking change it will take forever just because they need to coordinate it very well they cannot just break all these applications and we have the benefit that we can actually we can break things we can move first so it's a really small project so far I think it's extremely promising it's not meant really for the mainstream but I think it's it's good that that we that we're bringing out this message now that it exists and it already has pre-built binaries so you can actually test it out it the pre-built binaries are working on Mac and Windows so far they're they are known for for Linux but we will probably provide them within the next weeks and this is how it looks like you won't see a difference to a regular Chrome browser or electron application you will see this is our new mist UI react running in one of the tower windows so it's it's a browser window and we can control and customize it and we can run application code and it has all the updates that we need and all the benefits that we want and we also introduced this new update mechanism to avoid this these painful long release cycles where we actually split our application into multiple multiple paths so the user interface is updated separately and then we have something that we call the shell or the browser window and this becomes interchangeable so we can switch between electron or tau as long as we have an API that the user interface communicates with and our application logic communicates with we can run updates pretty much every day or every week have for all these parts and this is the what we call the app shell model and there will probably be a blog post following on our on our medium blog we also have a bunch of modules and reference implementations if you're interested to check it out there the mist UI react project that is working in Tao and an electron was just recently adopted by the etherium if human getup repository and then there's create direct create react app extensions which turns every react app into an electron towel container as you can call it then there's an update that does hot updating for these containers for electron or Tao apps and then we have a reference implementation for the electron shell and the tour shell that can actually host one of these electron react apps for electron water and that's it and if you're interested in any of this you can come talk to me or you can just reach out via my github or my mail thanks my thoughts about note WebKit yeah I think one of the of the cool benefits of electron is the the community so I I said it's a disadvantage it can also be considered as an advantage because you actually have this like large community and we have the same forum you see the benefits of many projects already using these technologies you get already tools for black building update and update mechanisms signing applications or creating installers and I think this the whole ecosystem for electron is just better than for node then for node WebKit but I think node WebKit is a cool project and it it also goes in a very similar direction so yeah so you said that Tao is kind of like in a kind of beta sandbox development and you're not really saying hey let's start using Tao at what point should those other applications start using Tao and integrating that yeah that's a good question there was no like real roadmap there was never the idea that this could become something really big and I think that it was also not the intention to make it a competitor to electron for example and we started with a proof of concept the proof of concept look really promising and now we're seeing like all these additional benefits and and possibilities how it could integrate with other aphelion projects such as remakes or the the holy was enough for efforts and swarm and I think yeah I think it looks really promising and we will probably focus all of our energy to make it the perfect fit for these applications and not any other like mainstream applications they should probably try to use electron and just put some pressure on them so that they they fix their about security of you perform any security I Tonto and second question have you put into the like continuous integration filling systems that have been built by Martine and indeed oh the answer is no and no Soto is not was not going through a security audit and missed of course was going through a very very complete security audit we learned a lot from from these lessons and from this audit and we try to incorporate all the these things that we learned into tau but it is not in this stage where we would perform a security audit on it and the other thing is the other question was if we have integrated into any kind of continuous integration or continuous delivery mechanism and the answer is no because we are and this was on one of these slides I've mentioned it really briefly we are rolling out our own mechanism for this pretty much where we have these reactive containers and we're also thinking about stuff like how to properly sign these containers and modules because and this is something that we're really missing in the whole note reyes ecosystem you can actually put check sums on stuff but they are the these these modules are not never really signed and we have these advantages we know how to do it and we could potentially incorporate it in our own mechanism okay thank you so that style has like an in will like kind of some sort the principle would be the same as for mist so we will try to interact with Goethe room for example or with parity with some external client that we would download and try to update through our update mechanism they are of course yes of course a potential we saw a lot of him like development for the ethion Jas project and there could be the the option to try all these like JavaScript libraries to make it more like a full client at some point but so far there are no plans to turn it into a light client full client whatever okay so you mentioned the update process of tower vs.

electron-electron obviously is you got to download the whole app even if there was a minor change on the App 60 megabytes whatnot I quite didn't get the update process of tau as in like if I want to update some HTML or CSS or something along the lines do you download a smaller copy of the app or or how does it work so like let's say the whole app is like still 60 megabytes right yeah and then you want to update smaller processes how do you go about doing that yeah so the the user interface this yellow box is packaged separately and then we have a frame for this which is the browser frame that includes the update mechanism and it will actually check for newer versions of this UI it's pretty much like a hot hot updating mechanism for electron apps only that you don't have to press f5 but someone else will do it for you and they will check our github releases page for new updates and we also provide like all the tools to publish these updates they include check sums they include versioning a channel if it's better release we can even make staged rollouts so we can say it's something like 10% should update now and then the the shell will update this new like packages these containers and run them you