Sessions is temporarily moving to YouTube, check out all our new videos here.

Client side Encryption with Javascript

Mykola Bubelich speaking at viennaJS in May, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

JavaScript cryptography on client side: design and develop safe and secure file transfer service (demo


- My name is Mykola Bubelich and I am originally from Ukraine and one year and half of year I work here in Vienna. I am so excited to be here and I'm so excited to live here. You have a great country, you have a great city. So thank you. Yes, okay I'm experienced full stack developer. I have more than 10 years of experience of developing. I'm CEO and founder of company Belichberg. Today is my second working day of my own company. So, I'm pretty new. You can find me on Facebook. You can find me on GitHub and of course I have my personal webpage, of course everyone should have their own personal webpage with a free certificate. This is me, this is my friend, I don't know maybe Bobby. Who cares, he is my friend. And I would like to describe the problem that we are solving this day. I really love this guy who collect all information from people. I'm not saying that is not super bad, but yeah but I will say personally, I would like to be more private, especially when someone try to threaten me when I try to send my naked picture to my friend or my wife or whatever, I would like to stay privately. Of course you know that everyone tries to listen you, tries to get more information and sell this information to you or sell this to third party companies and to sell you goods and services. Sorry guys, I don't know that you will be here. I will write something different here. So we have a privacy problem on file transfer. As you know, every server that provides you a free file service, they don't have any security measurement or security for their hash and their encryption all data before you send it, so you send raw data to the server like Amazon, Etsy or different service. They will try to analyse you, try to get as much as possible information from you. We will think about it how can we solve this problem? And we find out the solution, and for the server that will solve the problem, we have the next requirement: the server should be transfer up to 500 Mb, the client-side encryption should be strong enough to beat all the NSA computery bit, all the super stuff, blah blah blah that is used by NSA, MESEATS and FSB if you know it, stored by a limited time up to seven days because we cannot analyse the information, so we cannot use it and why we should store it for free, so only seven days, not more. Provide link for download and this is be happen only one download for every files or bunch of files and of course we would like to pass all security tests with the highest rank, it is the bleeding edge fun project, so we should use at least the latest and greatest technology that we can use it right today, so this should be cheap and easy maintains, we are lazy, sorry we are developers. And server owner should have their own knowledge about our files and about all files that you can put on this service. And of course, this should be fast, I mean really fast. It should be great, great. So I'll introduce you the project, it's called CryptoEsel, sorry I am pronounce a little bit different from German, but this is CryptoEsel, this is only he can do this. It's a fun project. I think I have all slides, wow. So this service is providing you free security transfer and first question why it's Esel? Everyone want to know why we choose Esel and here we I described why we use Esel's. Because the donkey, Esel is the donkey in English, we use this nice animals for hundreds of years, maybe thousands of year and they never fail. This is something great opportunity for them and of course they strong, they smart and they small. It means small, it means faster in the internet way and they don't care about what they carry along. They don't care about this what exactly in this bottle. They don't know, so they just carry anything that you put on this bottle. So make donkey great again. This is our message. We choose super bleeding edge technologies that we can use it right today, right now. This is of course a lot of well stat-like page, PHP, generic Redis, PostgreSQL, we build it on top of Heroku, because it's easier, it's simple, it's fast. It's continues our logic. And of course we try to store all little bit information of files or channel of files we try to store on Amazon S3 because it's easy, cheap and safe. And of course for the frontend, because right now it's ViennaJS, it's a frontend we use ES2015. It's the latest version of JavaScript. We use Axios Ajax, we use ReactJS, we use FileAPI + Promise. We use WebWorkers and our bunch of encryption libraries that we implemented by own. It just for fun and of course we used Bulma CSS, Sass and flexbox for a representation. How it works, I think it's our talk it's related to this talk about the deep files, so we divide files, this is all is made and doing inside the browser, no server side iteration across to this thing. This alls doing inside the browser in current version like every browser do this in this way in this time. So we split file in chunks by one megabyte, because it's easy to upload on mobile network and then we have the hash of this chance of file with a special key and this help us to prevent the possibility if you have our different customers have the same files and they will have the same hash for same files. I think you understand, won't you of that number? We provide the key that helps us prevent this situation. Every new files with a different key produce different hash so nobody knows what exactly inside. Then we produce the chunk and hash. Then we encrypt it with the ChaCha20 encryption cypher and the chunk we send with a post to Amazon S3, directly to Amazon, not send in to our server side. We directly send it to Amazon from your browser, nothing more, nothing else and the metadata that is stored securely safe on our server side just to store somewhere and have this ledger or whatever. So what about encryption? The golden rule of encryption say, "Don't roll your own crypto, bro." It means every people who work in cryptography, every mathematical that they are a special kind of people that are hiding from other peoples and thinking they live maybe different world or whatever, they all recommended you please don't try your crypto libraries or whatever. And sometimes I will agree, but what I want to do if I want to learn something? I should write it by my own hands and this at least helped me good experience how to write it and we yes, we break this law. We writed my own crypto primitive that we use on this project and of course if you have a great idea and if you have a good algorithm, you can always open source your project that any other people can see it, any other people can estimate what is your project and try to give you a feedback. It is always better than having a proprietary technology and proprietary encryption scheme. Please open your cryptography on your project. It's not a huge deal, just make people save and try to protect the data. It's not a problem to just open your source folder related to encryption, unless what you use inside your application. So how we find out crypto primitive life, what exactly we should use right now for the cypher, for the hashing and for the other project if you start your project right now? I recommend you this paper. It's called Post-Quantum Cryptography for the Long-Term Security. Long-term in JavaScript it means up to 2020, so we are nearby, only two years and then something will change because this guy worked with this special paper and as you know they offer it about quantum computers because quantum computers, they can break all cryptography in seconds maybe, 10 minutes. They all try to prepare your project right now. I highly recommend it to you to read this page, to read this PDF, they spend a lot of money. They spend a lot of years to find out what exactly in use right now in your project, like cypher, like hasher, like other peoples. Just look it and of course I have these pages intact. So for the crypto primitive that we use on this project, we choose BLAKE2 for the hash function. How many of you know what it is a hash function and why they use it here? So no explanation why we use hash function? Okay, also I think I have limited time. We use BLAKE2, it's really awesome hash function if we compare it to the latest, greatest SHA3-256, it's half time, less speed than BLAKE. And BLAKE is open source. BLAKE it's not designed by NSA or other special institutes. It's designed by super cool guy and yeah you can use it for every hashing function. I think it's Google can use it and a new version Linux kernel, they use BLAKE2 for hashing. So the main parameter for this hashing is the can produce digest yes it's small size, sorry, they can produce digest with 256 bits. It's a long stream that you can produce of any kind of your arbitrary data. You can provide the key that can help you to shuffle it to be your arbitrary data or input data. Salt and personalization, of course we have our pure JS implementation for BLAKE2s. You can visit it right now from this page and you can see the build. The main reason that I have this because I am develop this JavaScript primitive that I would try understand what's happening inside and one way it's all right by my own whether good description, good implementation, if you look on this page, you can see a good JavaScript pure implementation, whether documentation, whether easily readable and understandable build, so at least you learn it from this page. And of course if you want to know more about this, please use it. Some crypto currency, they use BLAKE2 to proof of work if you know it. Okay, so byte operation for the BLAKE2, of course we are on ViennaJS conference, so I would like to share a little bit more about the real code that you can look at. We use normal array. It much, much faster than TypedArray right now and they are easier to maintains. Of course, BLAKE2s is fast because we can use a normal array and here just gamma function that shuffle off your data inside every with every byte, you shuffle 10 times with this gamma function and here it's slightly rotation, right rotation that can rotate byte, it's work with the bytes on JavaScript on the right. So in JavaScript right now, you can work with the single bytes, single bits inside shuffle you can rotate it left or right. So now it's so easy to work with that, no problem. Crypto primitive that we use for encryption. It's a cypher, it's a ChaCha20. This is a winner of some kind of winner of competition about cypher. It is stream and ChaCha now is selected as a main cypher for the Google browser. Maybe if you open a webpage it's HTTPS and other pages maybe somehow you can use it ChaCha for encryption. I love this cypher because it's easy, safe and fast. It's designed by these guys called Daniel Bernstein. This is a really good guy, good mathematicianal and he knows everything he tests this Salsa or ChaCha many, many times and when I develop this crypto primitive I see how it's fast, how it's easy to understand and how it's powerful. Because it use only three operation inside, it's only additional rotation and store, nothing more. Nothing special, fancy tunnels, nothing special multiplication and so on and so. This is the stream cypher that work really, really fast. Of course we have the own implementation of that. You can use it, you can read it, no problem, it's open source. And we use for encryption all data that was stored on servers in all the metadata, so all metadata that we stored in our servers that all encrypted and we are as owner of this server, we don't know nothing about what is inside. Byte operation for the ChaCha, the main goal that happens here, this is four line. In normal ChaCha algorithm, you have 20 iteration of this algorithm, so you have here source, you have this plots and I love JavaScript. You have this JavaScript hack to make unsigned integer 32 bytes. Maybe if some of you know what's happened in here it just move the sign of the integer. It's so easy to use this hack. It's so fun I should just show you it, it's so awesome. And of course we have the the left rotation and have little-endian how to convert bytes to unsigned 32 by 32 bits, sorry it's a mistake, 32 bits of pure unsigned integer. Of course, we use normal array input and output. It is unsigned in its array, so it's a new kind of array in JavaScript thanks to this new implementation and I think with that assembly this code should run much, much faster than everyone's nearby on the native speed, so this should be super, super fast. Of course, good crypotography, it is always when you can easily understand or understood the implementation and you can write it. I always said that if you understand your cryptography and you can draw it in one piece of paper that is a right way. If you have something so difficult to understand and you have the all university work with your cryptography and your other stuff, it's not good way. You should be simple and understandable for everyone. Okay, the next thing I would like to talk about specifically cryptography in the JavaScript is how to get the random bytes in JavaScript. I know that you maybe know the problem that never ever use Math.random Never, because people can die of that. It's really. Because this is the function that can be easily predicted. This Math.randomnever be used for some of cryptography, salt or ESO whatever, so in this project we propose to have the server side expose of course the strong cryptography and we use it aside client-side Crypto API. It's a new API that we can easily get the real cryptography random bytes from the operation system as you can see it here, it's from NIC, yeah you can use it right now, all major browser and supported, so you can usually use this kind of random instead of Math.random Never, ever use it. Next, file hasher in Web Worker. It's a nice piece of code that shows how we exactly hash the files because our files we cannot have all files by one chunks. It's a lot of information, especially if you have a huge files like 500 Mb or maybe more. It's not possible load all information in huge array on your browser so we go to another way. We chunk it with pleated file by chunks and read it one by one and hash it by chunks and save this small chunks and then use it for hashing. Of course we use reader, read as or by buffer, the same way as you told us on zip files. And here the last step, we produce the hash function for the whole files. It's not so problem. Of course we have the post message again to the server site. Hash Key help us hide information from similar files or chunk data, yes. I think it's very important you can hide all information from your source, you can hash it your files after encryption, but never, ever before. If you should have this, please use the salt or key that we have displayed because you don't expose any information about your files about any content that you hide inside the files. React state because our operation it's react application, it's single page, like same single page, so we have the react. Here you can see that exactly every file have their own hash have their own hash key, have their own password and this is all state for the all files in our file chunks or files I don't know how it's called in English, sorry. Each file has own dynamically generated password, hash key. Image preview, I know that image preview for the browser is really fun to get image preview because you load the file on the browser then you can show it now you can store the 64 by 64 pixels differently and it was a challenge how to get this 64 by 64 pixels in the JavaScript. We solve it, yes, but it's fun to know it. And of course the general the whole train of the files, it's encrypted with a user typed password. Of course it's hashed, seed, salt and some kind of identification that you can share this link to your friend or your not friend and he can open and easily get your data or your files if he or she type the password right. I will try to attention that the server owner cannot reveal any information about files in chunks because it's not possible. All information stored in metadata and all information is encrypted and stored in site, so we don't know nothing about files and we delete it after seven days of your if you're not send it or recipient don't receive, your file is deleted so try again. Database example, this what exactly we store in database. As you can see, it's a really lot of mess bytes, so completely understandable, completely readable, you can see the nodes here, the hash here, the key here, the rest here and the size is here. Only how and you reveal some information, some little bit information, it's a date and time of creation of file, but in the future we can solve it by remove these fields at all. Here how we can configure the engine, it's a server site, how can configure it to be more secure that ever and I will try to pay attention about this content security policy. It's a new header that you can use for the webpage and browser say I am in for the image source and use only the self of data or blob and I use only HTTPS, nothing else. If you try to make the style of internet inside the page it's not possible because browser say you are not only allowed to do this. This really help you to prevent the SSS attack or other kind of attacks, it's super awesome and of course refer policy. It's saying the browser don't share with another page, what is your reference page and it's frame policies, content policy and so on and so on. How it's look and feel, how it's working. This is a real page, you can visit it right now. This is the first page that you enter. This is nice logo of course. You press send secure transfer, nothing, not just transfer, it's a secure transfer, you can add files, you can add message, and you can of course add in a password and confirm that and then after magic ultra transformation super fast magic ultra transformation you have your link that you can share with your recipient and give us of course and of course you can send the link with an e-mail, but the password for these chunks or for these files, you should send by post in paper. It's because of two different way how you deliver the secret message. Yeahmaybe you can just tell it by silently, just whisper little bit How can I receive the file? Okay, I can go to this link with this special hash that never, ever go to the server site, because this part of code is never, ever transferable with the browser, never go to the server site. Server site see only this path, like and receive, nothing here. This is visible only for the JavaScript for the line good JavaScript and of course you can type the secret password that you receive by post and open the file, magically you press the button, download and that page download chunks from Amazon S3 then they ripped it and then save it, with the library save.s. Yeah, it's so easy, so easy to download file by chunks, check it with a hash, always control the server site is never, ever touch your files or never change it because you have this integrity and hash inside. And then you just download it. And what would happen if I try and get the same data the same file again, I should have this error because you download only once and this can be triggered you that if you have this error that someone have your file so it's a mindful thing about and you know that someone downloaded your files, you see the error. Okay, next step is how to test project online, how to test it how securely, how it's configurated, because it's always a problem how you configurate your engine how you configurate your server site that be so straight and so secure. I recommend it, we recommend it, the security headers, it's here, give us A+ because we all super secure, easier, Esel it's super secure service and of course SSL Ops, SSL test give us A+ because we are super secure. I buy the certificate of on eight dollar per year and it's super, super secure, yeah and GT Metrics show us that we are super fast. We have a rank A, not 100, sorry, but little bit lower and of course because they don't know where exactly where it is Austria, they try to test us from Canada, from Vancouver. Why not Nidorant or other pages or other services. And of course I would like to share information about our team, I just want to say it's fun project that we made after work. That it's not our main work, but this is some experience that we would like to know more in JavaScript especially so it's me, I am here. I am author of idea and frontend developer. I develop all the script elements and little bit more react, but not too much. I would like to thank Matt Schramm. I not see, she is not here. She developed this nice logo of CryptoEsel especially with the Rayban glasses, so I saw awesome. I really recommend if you want to do with some page design or with some other design, please look on her site. She is really, really great and we have a lot of fun to work together. And of course I would like to introduce you Oleg Rudenko. Here is architect mentor who provide this whole infrastructure, how to build it, how to pose it, how to test it, I really thank you Oleg. You are a super great mentor with Rudenko and I would like to thank you for the Stepan Grebenluk I not see it here today, but he is a security advisor. He is study here in San Pietro University on security institute, I don't know how it's actually pronounced, but he is know a lot of information about cryptography, about how we should provide before or after hashing or some other of this talk, so I really recommend this guy to talk if you need something. And of course, we are looking for you and why we are looking for you because I'm really eager to find out the people that have the same mindset that have the same problem about privacy sorry guys we would like to make the internet private again if it possible of course. But if you have the same idea or you share the same problem that we please find me please contribute open source project. Maybe after some iteration we can beat all this gathering information companies that gather all information of you and I would like to be little bit private, not always, but in some cases, especially sending naked photos, so please contribute open source project and thank you. And no donkey was warmed in making this service, so we're super green. Thank you.