A Look at Decentralizing Front-ends using Skynet, Homescreen, and HNS for More Secure dApps

Decentralized backends are not enough to create a secure and accessible Web3. In this talk, we look at some of the risks involved in centralized frontends before addressing how decentralized storage protocols and decentralized domains can help. We explore how these work at a high-level, before asking “is this enough?” as a way to briefly showcase Skynet’s Homescreen, which adds another level of security for decentralized web apps, allowing users to own versioned copies of their favorites apps in their personal cloud storage.

Transcript

(00:01) [Music] [Applause] [Music] uh [Music] [Music] [Applause] all right welcome back everybody [Music] kinetic is a blockchain crypto investment firm based in hong kong and puerto rico [Music] founded in 2016 they were the first fund in hong kong and one of the earliest in asia with a portfolio of over 220 companies they were seed investors in such

(01:04) projects as ethereum parity and polka dot solana ftx and of course handshake in name base [Music] founder johan chu was an active investor and supporter of the handshake ecosystem over one hundred thousand domains co-founder of d-web foundation co-founder of handicon and sponsor of the handshake house at miami hack week 2022 [Music] all right welcome back everybody uh here we have again a representative from skynet always happy to have them on uh this is daniel and he’s going to be talking about skynet and home screen

(01:49) so if you are involved in the website uh website free face hackathon uh implementing home screen uh the category using handshake and skynet together home screen uh is one of the requirements there so here is a great opportunity to learn uh how to implement that into your website but with no further ado i’ll let you take it away daniel all right thanks fistful i’ll go ahead and share my screen here so yeah this talk is mostly going to be about decentralizing front ends um you know specifically with an emphasis on

(02:25) skynet but also bringing in some hns and then trying to keep it broad enough that we just talk about decentralized storage as a whole i am daniel helm developer evangelist at skynet labs and in lieu of much of an introduction i want to start off with a question which is should we decentralize front ends so i work in decentralized storage day in and day out and so i’m going to say emphatically yes but maybe another way we can frame this question is to ask are we really building permissionless systems if they’re centralized at the

(03:02) point of entry so we have all these great smart contracts decentralized apis but if users are only interacting with them or controlling their digital assets by using you know front-ends and websites that are hosted on amazon digitalocean are are we really building permissionless systems here all right but before we maybe get into the the heart of it too much i want to back up and just talk about decentralized storage so if you’re not familiar it’s a core piece of web3 infrastructure and we’re storing things like files web

(03:39) apps nfts anything that is off chain anything that’s not on chain data but we want to store it in a way that we don’t have a single trusted central authority and ideally this setup is going to be trustless permissionless and censorship resistant so at the end of the day we’re really looking at how do we you know wrangle user data away from the likes of the amazons facebooks and googles of the world so there’s a few players playing in this decentralized storage space skynet obviously but you also might be

(04:14) familiar with ipfs or are weave and you know anything i talk about in the kind of first half of this talk is going to actually be applicable to all of these and then we’ll get into some of the tooling that skynet does that makes it a little bit unique so the core idea when you’re using decentralized storage is that when you upload a file and you place it in this storage system it is going to be identifiable by this unique cryptographic id and so we call these things skylinks and ipfs they’re called cids but you can

(04:49) think of this like a fingerprint for this file and and it lets us know that the file that we’re downloading has not been altered in any way from the file that was uploaded by the create original creator and uploader of that file um and what this does is it lets us have these guarantees right we know that they didn’t go in and change stuff later we know that the portal or place that we’re getting this data from is not lying to us about what that data is um and this can be a little abstract so uh i’m gonna just

(05:21) maybe show you what it looks like to interact with decentralized storage because i think people find it a little bit intimidating but it’s not so what it looks like to interact with skynet at least is you go to a skynet portal like skynetpro.net or net and you can literally select a file it will upload to skynet and we instantly get a url back that is you know that file hosted on skynet and um you see here we still have that kind of cryptographic identifier but we can change the portal that we’re accessing this from and um unfortunately

(06:03) both of these are not going to be handshake domains but traditional domain names but i can put fileportal.org which is a portal that’s not run by skynet labs but a community portal and that file is still there instantly available and fully decentralized way all right we’re here to talk about front ends though so let’s look at something slightly more exciting i can also click here and select the build folder of a react application that i’ve built upload that and because this folder has an index.html file in it when i open the

(06:44) skylink here it’s going to act just like a fully deployed web app but fully hosted on skynet and again i could also just as easily access this through fileportal.org okay and so you know decentralized storage you can see how quick it is to be to be interacting with it i think it’s a pretty exciting and easy thing to get going with as a developer but let’s kind of keep looking at some of the virtues of this so i think some folks think like it’s just a web app um why go through all the hassle of worrying about the

(07:27) decentralized storage nature of it and there’s there’s a few reasons right developers might be liable for user actions uh on the websites and the code that they’re hosting and this is kind of still a regulatory gray area but it’s a it’s a place of concern for developers we also have hosting providers that might not share uh the community ethos of the sites and apps that they’re hosting and so we worry about things like de-platforming and censorship and another thing that on the user side we

(08:00) can be concerned about is that right now in the centralized web users are totally unaware when a website changes or updates in the back end they don’t have control or knowledge of when these things are getting modified and we’ll look at some of the consequences of that in a bit and lastly you know protocol stakeholders are totally at the whim of the developer team if the developer team decides they want to like totally change how a website looks feels acts uh anything else we have to accept that we have to

(08:31) either accept that or figure out a different way to interact with our decentralized backends so these aren’t just uh hypotheticals we see these playing out in the real world there’s real world consequences here um last year in july we saw una swap d list 100 tokens during a time of you know regulatory uncertainty and you know after this if you were a user that was using one uniswap for one of these tokens you had to find an alternative way to be doing swaps um we see sushi swaps miso i had a front end attack where a malicious code was

(09:08) introduced into the front end not into the smart contract we’ve seen one inch introduce geo-fencing to say like basically if you’re in the states you have to sign this thing to say you’re not in the states and if you’re not using a vpn we are going to restrict you from using our web app compound had a bug where you basically couldn’t redeem prizes uh reward tokens that you were given because there was a bug in the smart contract and they weren’t able to fix it in the smart contract right away and so instead

(09:43) they just modified the front end so anyone that wasn’t using a decentralized version of the front end was locked out of clicking that button and interacting with that smart contract but everyone else was still able to and so it kind of was a very uneven playing field for that time all right in the last one that might be more near and dear to folks in the h s ecosystem is we’ve seen dns hijacking attacks where here the entirety of pancake swap or cream website was just replaced with an alternate version

(10:16) when the dns records got pointed to another location okay so all that being said uh web3 needs decentralized front-ends you know i focus the all these use cases on d5 specifically just because there’s money involved so the stakes feel really high but this applies to anything that we’re talking about where we want to have this decentralized permissionless access so as a developer you know it’s probably going to be a pain it’s a new paradigm to figure out and so there’s reasons to ask you know why not

(10:54) decentralize well not all web 2 patterns translate to web3 sometimes we’re seeing limited framework support and decentralized storage and also lots of developers have performance concerns about using decentralized storage um you know to which i’m going to change the question there and say well why not decentralize with skynet a little bit of a shill here but it is performant it is uh user controlled data that has cross ecosystem and decentralized user identity that has a really incredible interoperability between applications

(11:30) and so although web 2 patterns might not translate one to one you can actually build some really powerful tooling with with new patterns that aren’t available to developers in web 2. in terms of limited framework support skynet has full support for gatsby react router vue and other dynamically routed client-side frameworks and in terms of performance concerns uh i think some of that’s going to be out of the scope of this topic but you’ll see me interacting with both putting data onto skynet and also just

(12:02) interacting with the skynet web app and this talk and um you know take what you will from that our goal though is that any developer can build a web3 application that anyone can use it’s really looking and focusing in on this how do we make this something that’s browser-based and that doesn’t require a cryptocurrency to kind of interact with and use okay so at this point i hope that some of the developers are or at least the web developers are thinking okay i’ve pushed changes to my website all the time if my

(12:36) web app is immutable you know how are you know how do i update it for users or if i do update it and then i have a new url how are users going to keep up to date with the latest version and i’m going to give us a little story here where we have our friendly user and she loves this website called daily builds and daily builds the website that every day has a new build and so on tuesday’s build she has access to it using this immutable sky link over here and she’s happy and using tuesday’s build but on wednesday’s build

(13:13) it comes out and our user doesn’t know what the wednesday build skylink is and this is a problem she doesn’t know how to stay up to date with things so in the skynet ecosystem we have a kind of primitive that is called a resolver skylink these things look just like skylinks but behave a little bit differently and they let a developer team sign essentially a pointer to where they want this this new skylink to resolve if you’re familiar with ipfs they have ipns and it’s a little bit similar but what that means is that this user

(13:48) can just have the one sky leak they have this one resolver skylink and on tuesday’s build it points to tuesday on wednesday you know our developer team has an automated build process that uploads wednesday’s build and in one go also updates the resolver skylink and so our user is happy that they don’t have to know any additional skylinks here okay happy unless they are a real human in which case skylinks are ugly annoying whatever else and so in actuality we’re going to put a human readable name in front of this and so

(14:21) this is where h s traditional dns or ens can get in here and we can point daily builds or dailybuilds.hns.com this is a portal construction here or dailybuilds.com we can point the records here to our resolver skylink and so that way the user just has to know the one item okay so that’s all well and good you know like this is the state of most uh decentralized storage systems and how you know users usually interact with these things but there’s a question is decentralized hosting enough if we look back at some

(15:03) of those attacks that we saw that’s not going to really fix things for us and so let’s let’s take a look thursday comes around and thursday’s build is wild it’s got malware the developers have gone totally rogue worst of all dark mode has been removed from the application our user is not happy but because it’s an automated build process the resolver skylink updates to now point at this latest build and our user who’s accessing uh it through daily builds doesn’t know any different right they

(15:38) don’t know the original underlying uh immutable skylinks to tuesdays and wednesday’s builds so they have no way of reverting back to those things even if they know that there’s a problem for thursday’s build and so this was an issue that we were seeing and how users were using decentralized storage and so we developed a project called sky sorry home screen and home screen builds on skynet and what it does is it allows you to download full version of decentralized applications and save them to your

(16:14) personal cloud storage on skynet i think it’s easier to see in action than it is to describe um so let’s go ahead and pull that up so i will open a new tab here and i will go to home screen i’m going to access it on skynet pro because it’s a little bit faster and sign out first what i’ll be presented with is the home page here and this is a web app fully living on skynet and i am able to log in with my sky which is a part of the skynet suite here and i’m able to log in with a passphrase this is you know my seed phrase

(17:06) that lets me do all the kind of personal cloud uploading and updating on skynet and i’m instantly presented with some applications that are already in my home screen um and so i can access one inch in a totally decentralized way that was living on skynet or any of the other applications that i have um let’s say i want to go back and add my react app to home screen i’m able to paste that there locate it and click add to home screen and when i do this the application is going to go and grab all those assets it’s gonna grab the

(17:46) html css javascript save a copy of that in my personal storage and then make it available to me here um and and you know for the developers there this is not just data that is living in my browser this application data here is also living on skynet so if i were to access this on another device log out log back in all this is still instantly available to me because the application data itself is also living on skynet and you can see how fast i’m able to update and interact with that okay so that’s not all we can do

(18:22) when we created this application we let it know about home screen we did a little bit of extra work to make it home screen compatible and what it allows us to do is come and click check for updates and so now what home screen does is it looks at the resolver skylink that i have saved and assigned to this application it says has this updated is there a newer version of this application there is and so i can click update and now i’ll go download that version i’ll get all the assets the css the javascript the html and save a full

(18:56) version of that client-side application here in my personal cloud storage this time for some reason going slightly slower but there we go okay so now i’m accessing an even newer version of the one inch front end but if we have that scenario where oh damn everything’s gone wrong i’m able to click here click view details and at any time downgrade to the previous version or any version that i want click save and so on my home screen i just have the experience of opening up my preferred version of the one inch

(19:40) front end okay so that’s a little bit what it looks like to interact with home screen and you can also do i don’t even know if skynet lab is set up as an hns name but i think it should be no it’s not i know the dg helm is though and you know i’m able to use human readable names there as well okay so that’s what um skynet has been working a while on um building and promoting is this way for users to make sure that they’re always able to fork that code and have you know user version guarantees about the front ends that

(20:34) they’re accessing in terms of what’s next um you might have this kind of question like oh well there’s this interaction with the portal that is the next piece that we are trying to make fully trustless by verifying all that data that comes into the browser if you caught david’s talk earlier today he talked about the kernel and that is something we’ve been working on to kind of fill that gap so that data is fully verified and it can be multi-portal by default if a portal lies to you you don’t have to know the kernel

(21:05) will just jump to a different portal and download the data from there and it all can happen right in the browser if you’re interested in integrating with home screen it’s pretty simple uh the main steps are that you have to deploy an app to homes to skynet you’ll want to probably automate those deployments and we have a deployed a skynet github action that can just do that every time you push domain or whatever and then what you do is in your um application you have a kind of manifest file and in that you just add in your

(21:41) resolver skylink as a piece of metadata and that’s it and that is enough for home screen to know where to always look for the latest build that you are signing that hey i’m publishing this thing so what you’ll want to check out is the our docs docs.skynatlabs.com integration home screen if you want to see what it looks like in the github repo that is hello handycon which i don’t have up anymore let me pull it up just to kind of show a little bit of how simple modifications are on a basic react app

(22:26) basically the gist of this is that you have a workflow file that you can copy paste and it says that every time i push to main i want to run this github action and i will upload the build directory and i will also pass it a seed so that i’m able to sign those updates on the resolver skylink and that’s really about it um i would love to talk to anyone about ideas that they have for the you know hackathon website build a race going on we’ve got over fifteen hundred dollars justin cya coin prizes uh we’re doing

(23:07) prize pools so even if you don’t think you’re going to have the best website just build something get it on skynet and you’ll still get something out of it and here’s a bunch of resources skynetfree.net is a free portal that you can sign up on and have really good service and access to skynet on we’ve also got our developer guide and most importantly we’ve got our discord where we have a ton of developers that are really generous with their time and knowledge and are happy to help out new

(23:39) folks into the ecosystem so that’s all i’ve got i hope i love left quite a bit of time for questions and happy to talk more about decentralized storage all right awesome thank you again for giving your time talking a little bit more about this um we have one of our developers actually in the chat right now jordan he’s building h s chat and would like to talk later so definitely hit him up on the discord jordan we do have a couple questions here uh if you can see those so yes and no i think right now

(24:22) so let me actually just talk a tiny bit about how home screen works or sorry how handshake and skynet interact um i talked about these portals just briefly and that’s going to be where you’re on the kind of the domain name you’re using to to request data from skynet and what we have set up there is we’re using handshake full nodes on every single portal server and so you can try to access something like you know sky transfer dot hns and then the portal name that’s kind of portal it’s skynet

(25:02) pro and so what that’s going to do is on the portal side it will go check the handshake record and it will actually look for a text record in the entry there and so that text record is just pointing directly at a skylink and then the portal will know how to do that and use that and so internally in the skynet ecosystem that’s how we normally are using h s um we do also um have projects that have used tradition you know uh using actually the tld to set up records and so i know that like um angry mouse has set it up so that i’m able to

(25:47) resolve handshake names using skynet in in this sort of way but i don’t believe i i don’t believe there’s a way to do it in a fully decentralized way right now i know that um name base also you know has set up for d-links they’re they’re doing this where they have a different record set up um in so you can see all this kind of in the documentation but i believe right now we are only supporting our implementation of h s and h domains um i kind of wonder what would happen if i did something like that

(26:25) um i think that’s still pulling our h and s there but all right so i hope that answered your question and maybe that’s something to work and build on in the future uh making sure this can be fully decentralized you know it’s all process you know we gotta start somewhere though for sure yeah and if you caught david’s talk we have exciting stuff where we’ll be able to do h s resolution in browser and that’s not something that we have set up in home screen and so um we would then have to like do another

(26:58) trust setup with our portal who’s running the h s um resolver there so i i think that that is something with the kernel is going to be pretty easy to do and to add support for so there you go sometime in the near future this is going to be fully decentralized you just gotta gotta be patient and then let me see this one okay how does one know the latest build is secure before updating um they don’t they if they are going to update they can if it’s an open source project they can go and check the source they could even

(27:39) build it themselves but i think um you know or just check twitter but at the end of the day yeah you’re not going to know that the latest version that you’re using of anything ever is going to be um good right because the developers themselves could be the ones introducing malicious code but the idea here is that you’ve always got that escape hatch and that if it’s something that’s really high priority and that you’re really paranoid about if you know a version is good to go and you don’t

(28:10) need to stay using the latest build because you’re interacting with immutable smart contracts you don’t need to worry about that and you can just kind of keep using the version that you like to use so actually on top of that i kind of was wondering so what if you know that the latest version is the one with like some malicious type of stuff in it do you just like kind of like go and like talk to someone who might have the uh most recent or like the latest what’s the word the one before the version before that messed up version do

(28:43) you just kind of talk to them and then manually add it there since you can’t necessarily add it because you know that one that you’re adding is the one that’s malicious yeah that’s a great question and so what you can do there is your friend could send you um you know a skylink of one that isn’t bad um you know the our system does not have a history of all changes of these mutable records um old changes drop off and so we can always go in and add the old skylink um and you know save that to our home

(29:20) screen it’s already saved and we could share that with friends and i’m really interested in like hopefully as this picks up more traction on the user side i would love for github repos when a version release is made people put in like this is the immutable skylink for this thing which you know in github someone could go and then alter as well but it would be one way of kind of publishing that record of where the old versions live on skynet gotcha cool uh one from matthew yes good question so the question here is

(29:58) like okay someone’s paying for this right and yes the answer is they are um when on the back end here skynet is kind of like a layer two you can think of it on top of the scion network and the scion network is blockchain storage that connects renters of storage with hosts of storage and the renters pay the hosts in cya coin and on skynet when you have a portal that portal is acting like a renter on the siya network and so it is paying for the storage here to those hosts we have different ways of you know handling this

(30:40) the main idea is that web apps are really cheap so we don’t need to worry about it uh too much but scisky.net is our portal that we we kicked off you know skynet with and it was free to use anonymously you never had to sign up or anything um and believe it or not a lot of abuse came our way and we’ve been struggling for a couple of months dealing with uh serving providers taking us down uh domain name providers taking us down and so what we’ve ended up doing is setting up systems where you are can pay um on skynetpro.net you can pay

(31:22) for up to 20 terabytes of storage for like five bucks a month i think or maybe it’s a little bit more um and then we have a free tier where you still have to sign up but it lets us at least say like all right we know someone’s email address if they’re abusing our service and so if you want to run your own skynet portal you’re going to be paying for storage on the sci network and cya coins but otherwise it is up to the portal and their users to figure out the economic incentive there for the portal to

(31:52) provide that you know service and to provide the pinning on the site network i think that answers the question and then and then i think this is kind of uh already answered that right um i will update my browser yes um i think so yeah um end users are not paying directly to the scion network the portals are and you know the portals and the end users have to kind of figure out how to how to make that work so okay and then another one from the same user yeah um i think i don’t see why not it seems like those are are great ideas i think our

(32:46) development effort and kind of maybe our ethos for building as fast as we can is often how do we have how do we make it easiest on users and if you know a huge majority of the web is using chrome and firefox like how do we get to them and how do we get them using web3 as quick as possible and so super interested in external integration of these other tools like utilizing um skynet and the primitives we’ve built there and the web apps but it’s not something that we’ve focused on you know as a team for our

(33:23) development efforts all right also that being said reach out and i’d love to talk about it because in some ways a lot of this tech is is pretty simple um once all the abstractions have been made so yeah great um and if you didn’t notice on the air meet this one is scheduled to go until uh 7 35 but that was kind of a mistake we shortened this one down a little bit um so if there’s any other like questions or save rounds uh just let us know but if not then we’re gonna uh cut it here we’ve been talking

(34:00) for about 30 minutes and i think everybody’s learned a little bit about home screen which i was the goal of this anyway so uh i’m just gonna wait a minute see if we get anything else and if not we’ll call it um but with this time i guess i’ll just show the hackathon again i really cannot show this enough we want content on handshake names we want uh we were partnered with skynet for this kind of website race as well um so and one of the requirements is using home screen like i mentioned before in

(34:37) the beginning of this talk um so if you want to learn more about that uh just check the feed at the top right of the air meet and you’ll see i posted a discord and a twitter link that you guys can share around um there’s money to me be made like daniel said uh the category with handshake and skynet is a fifteen hundred dollar pool of uh see a coin so if you were the only one to submit a site for that category guess what you get fifteen hundred dollars worth of see a coin and 2k worth of h s because you’re first

(35:13) place because they’re the only one so you there’s no reason not to build um for sure so definitely go check that out share it around it only helps everyone to put content on the d web but i’m not seeing any other questions anything else uh from you mike um yeah i mean just just a second uh what what you’re saying i mean we want to build i mean we really uh want to make sure people are you know i know we’re a it’s a domain protocol but we need to keep building we need to cooperate with yeah saya thank

(35:48) you daniel for sharing um show the world that there’s more and more websites and content that’s quality and valuable in in the handshake ecosystem is really really important so um we’ll also maybe we should make a hashtag fistful or something for for the hackathon or is there one maybe yeah no i wish i would have done some more marketing that is definitely my bad i kind of dropped the ball on marketing no no or something maybe i could follow it we could all try to just reshare but i think even in the last panel i think choosing

(36:18) which domain you know i saw some people on twitter already registering names like slds or tlts great so i think but there’s even extra incentives right that some of these uh these state tld people are are using if you register username one of their names they’ll also throw an extra money i think we’ll have to make some kind of a summary too um um but yeah uh it’s just really really important i’m really happy we have such amazing um people in community developing and building uh it’s it’s very important so

(36:51) anyways that i personally can help or of course fiscal super helpful or people and network can help you uh don’t be shy to let us know yeah definitely reach out on the discord and i also just like don’t want to forget to say thanks to you mike and fistful like handicon’s been great of what i’ve been able to catch so far and um i don’t know i love the handshake community and what you all are building so it’s exciting to be together hey we love y’all right back that’s for sure [Laughter]

(37:20) yeah i mean these collaborations it’s always been nice messiah so thanks thanks guys for uh and and daniel too for uh for everything so then i think um we got networking too maybe people could also go in one of those lounges um not sure if daniel has time or but he’ll be in discord too but maybe find other people i’ll try to spend some time i think we got a little bit of gap a little bit of a gap for some networking before our final session right fistful yeah so our uh name base uh name cheap kind of talk that’s going to be

(37:52) happening at uh 7 50 pst and um so we got like a little bit more like 30 40ish minutes right now so yeah go network go talk um and just just make the most out of handicon that you can right now and then we’ll see you for our final talk for handycon yeah so namecheap will be here and uh and johnny wu and everybody’s favorite community manager uh he’s awesome so he’ll be i think he’s on a panel yesterday but he’ll get some time up on stage so it’ll be an epic way to wrap up uh wrap up handicon on day three

(38:28) but definitely stick around for the networking and then we’ll see you what time would that be 30 minutes yeah yeah about no about 40-ish minutes 40 minutes so you guys got a good i know last year’s handycon people wanted more networking so hopefully people have had more time this this year for the networking and uh we’ll be all hanging out so thanks so much everybody alright see you guys there okay [Music] [Applause] [Music] so [Music] kinetic is a blockchain crypto

(39:37) investment firm based in hong kong and puerto rico founded in 2016 they were the first fund in hong kong and one of the earliest in asia with a portfolio of over 220 companies they were seed investors in such projects as ethereum parody and polkadot solana ftx and of course handshake in name base [Music] founder johann chu was an active investor and supporter of the handshake ecosystem over one hundred thousand domains co-founder of d-web foundation co-founder of handicon and sponsor of the handshake house at miami hack week

(40:17) 2022 [Music] [Applause] [Music] [Applause] [Music] foreign [Music] [Applause] [Music] [Music] [Applause] you