Video details

The Art of Writing Secrets - Encryption for JavaScript Developers


Presented by WWCode Boulder/Denver Speaker: Jen Schreiber
Jen Schreiber is a Senior Software Engineer at Workday in Boulder on the Distributed Trust team, building a blockchain-backed network for verifiable digital credentials. She loves organizing and hosting meetups, growing the local community of technologists and representing WWCode in the Boulder/Denver area. On the weekends, you can find Jen on a trail enjoying the Colorado sunshine or trying out a new recipe.
Stay in touch with us!
___ 💻 WWCode Digital Events: 🔎 Job Board:​​​​ 💌 Make a Donation:


Awesome. Well, thank you all for coming to hear me share all about encryption. Tonight. My talk is titled The Art of Writing Secrets Encryption for JavaScript Developers. But really my goal is to just demystify encryption for you all. Whether you work on the front end or the back end, whether you're working in encryption often or not really aware at all, I just want to share with you a little bit about encryption, give you some examples that you might have in your everyday life as an engineer, and share with you all why I love it. So I'm Jen. I am hosting this meet up tonight, but also by day. I'm a software engineer at workday. I work all on the back end, primarily in Go, Kotlin, and AWS. And when I can a little bit of JavaScript and react here and there. So tonight we'll be talking about encryption. I will start with a little history lesson, encryption through the ages. I'll share with you what is encryption different types of encryption. We'll talk about JSON, Web tokens, JWS and JWE, and then lots of time for questions. But I will say if you have questions throughout the talk, I'll try to keep the chat open so that you can just drop them in there. Hopefully I see them as I'm talking, but if not, I'll be sure to get to them at the end. Okay. So encryption is an ancient art. The first documented uses of encryption date back to around 1900 BC, when an Egyptian scribe used nonstandard hieroglyphics in an encryption. Some experts even argue that encryption appeared kind of spontaneously, like after writing was invented with applications ranging anywhere from diplomatic missions to wartime battle plans. Anytime someone wanted to kind of send a private message from one person to another, encryption could be used. So we fast forward to 100 BC. Julius Caesar was known to use a form of encryption to convey secret messages to his army generals in the warfront. This substitution cipher that he used is known as the Caesar Cipher. You can see that on the top left of the slide. And the Caesar cipher is probably the most mentioned historic cipher in academic literature. Fast forward even more to about 1900 years later. Thomas Jefferson invented the cipher wheel in the 1790s. And the cipher wheel, you can see that the bottom left has about 1000 letters that had to be aligned just right for a message to be decoded. And lastly, on the right, this is an Enigma machine. These were cipher machines that were famous for their use by the Nazis in World War II. And the cipher machine, they had like an electro mechanical rotor mechanism that scrambled all the letters of the Alphabet. And it used the daily set of keys. So like, kind of the scramble was different every day. And these messages were thought of to be really hard to be decoded that you all might know of. The story of when the Enigma machines were proved breakable by mathematicians and most notably, Alan Turing. So after the Enigma machine got broken in World War Two, all of Germany's war movements came really predictable, and it helped the Allies kind of speed up their victory and win. What is in encryption? Why don't you all take a moment, drop it in the chat? Just take a guess. If you have no idea what encryption is, I'm curious what you all think. Let's see. Waiting for some chats to come through. Any guesses? Throw it out there. Okay. Changing data so it's not easily accessible. A way to hide a message. Yeah. Oh, that's a hard word to say. Obfuscation of content. Yup. Great. All of these things are correct. Keeping all the secrets super secret. Yes. Encryption accomplishes that very well. So encryption is just the process of encoding information. It's so that only the sender and the intended recipient of a message can view its contents. So encryption takes a message, which is what we call plain text. We encrypt the message and outcomes. Cipher text, which is basically like unreadable string of characters. There are three main types of encryption. Hash functions, symmetric encryption and asymmetric encryption. And we'll go through each of these types of encryptions one by one with lots of examples so you can really understand them. So let's start with hash functions. I'm guessing hash functions are probably what everybody is most familiar with. A hash function, you take an inputted message, you perform some mathematical operation on it, and outcomes a hash value. With hash functions, you are transforming an input of an arbitrary size to a result of a fixed size. So if you can see on this slide, I'm running some hash functions, specifically 256 within my terminal. And first I hash hello, women who code. Then I hash. My name is Jen, and then I also hash. I love hashing functions, don't you? And you can see that the output of hashing, all of these strings are a fixed size. So I think that's pretty interesting. It helps predict data size when you're storing these types of hash values. Hash functions are one way functions. So when you go from an input message to a hash value, you can only go one way, so you cannot go. Let me show you from the previous slide. You cannot go from a hash value back to an input message. There only one way. Hash functions are used as kind of fingerprints. By hashing something, we can kind of see if it maintained its message integrity. So say we hash an input, and later we hash the same input. We can compare the hash values, see if they change, and then that will tell us if the input message itself changed. Examples of hash functions include Shah 256, MD five. Decrypt is a hash function. You might be familiar of decrypt password hashing decrypt based on the Blowfish cipher. Some examples of password hashing, so the first one is an example of decrypt. That string just shows you how a decrypt password is built, the different components of it. And another example of hashing in your everyday life would be Git commit hashes. So anytime that you are committing code with Git, Git creates a commit hatch for you. This is what I circled in red. This is considered the commit ID. And to build this hash, the way I understand it, get basically hashes your working directory and hashes metadata about you like your username and the date of your commit. They use a Sha one hashing function and through that you can get the commit ID. So hashes are everywhere. Whether you recognize them at the time or not, they really help us do our everyday work. So Besides hash functions, other types of encryption include Asymmetric and symmetric encryption. These are both keys encryption, and this is where it really gets fun. So you might be thinking you have no idea what a key is. Well, a key is just a string of characters used to lock or unlock a message. So this slide shows you what a key will look like. I have the pink arrow pointing to a public key and you can see that this is just a string of characters. This public key belongs to Google associated with their SSL certificate. So I think you should be able to see this. I got this right off of the Internet. So you can click that lock button within your URL and you can see the SSL certificate that docs is secured with. And then I just open up some details and scroll down and you can see I got the public key right here on their website. So yeah, public key is just a string of characters. So the two types of key encryption that we're going to talk about are symmetric encryption and asymmetric encryption. Symmetric encryption is when you encrypt and decrypt using the same key. And asymmetric encryption is when you encrypt and decrypt using different keys. Don't worry if that flew right over your head. I'm going to go through some examples and I think you should really get it. So let's start with symmetric encryption. Symmetric encryption is called private key cryptography. This is because symmetric encryption uses one key, a private key for both encryption and decryption. Symmetric encryption is often used for things like data storage or banking. And some algorithms that you might have heard of are AES and Des. Symmetric encryption algorithms. Okay, so let's help you all understand what symmetric encryption is. I'm going to use the example of one of my favorite Netflix shows, Great British Bake Off. Any fancier? Maybe I see some nods. Yes. Absolutely. Yes. Okay, so we have the cast of Great British Bake Off. We've got Matt, Noel, Paul, Hollywood, bottom left. He's a really Tan one. And then proof. So I'm not sure if you have all watched the latest seasons, don't worry, I won't spoil anything. But let's say it's Pastry week and we have the whole competition of the contestants making their pastry. The judges have to vote who's going to be the Star Baker. So they're going to use symmetric encryption to do this. Okay, so Paul wants to send. Oh, yeah, Mary's not here. This is later seasons. So Paul wants to send an encrypted message to Pru, and he wants to send this message via an Insecure channel. Paul doesn't want any of the contestants or Noel or Matt to be able to view this message. He wants the message only to be viewed by Pru. So Paul and Pru have a judge's private key. This is just one private key that they both have a copy of. So what Paul does is he takes his message that he thinks Jurgen should be Star Baker, and he uses his private key to encrypt the message. Out comes this gibberish of unreadable text from that encryption. So Paul then sends the encrypted message to Prue. Prue uses her copy of the judges private key, same key that Paul used to decrypt the message. And then she now can read the message that says Jurgen should be Star Baker. So the big thing is that there's one private key and both the sender and the recipient have the same copy of that key, and the key is used to encrypt and decrypt a message. So say Paul wants to send the text. It's Pastry week to Noel and to Matt. Paul would have a different private key that he would use with Pru, a different private key to use with Noel, and a different private key to use with Matt. So although Paul is sending the same plain text to all of them, the cipher text output would be different for each of the messages because a different private key is used. So you can see how let's say Paul says it's pastry week to prove Noel or Matt couldn't read it, even though it's the same plain text message, because they don't have access to the private key that was used to encrypt the message. So hopefully that helps you kind of understand how one key is used for encryption and decryption, and it's shared across the sender and the recipient. So next we'll move on to Asymmetric encryption. This is called public key cryptography. Asymmetric encryption has different keys used for encryption and decryption. So in this case, we're using a private key and a public key. The public key is derived mathematically from a private key, but you cannot derive the private key from the public key. Asymmetric encryption is a lot slower than symmetric encryption, but it does have better security because we're not sharing private keys to recipients. We are just sharing public key. So I'll go into that. Asymmetric encryption is used for digital signatures. It's used for blockchain transactions, it's used for PKIs. And some algorithms for Asymmetric encryption include RSA and ECC. Ecc just stands for Elliptic curve cryptography, just another algorithm that's often used. So remember when I showed you this public key that Google uses for their SSL certificate? This actually uses an Elliptic curve algorithm. It uses a SEC P 256 algorithm. So you can see how kind of different keys, different algorithms will be used in different scenarios. Okay, so let's go through the next example. We'll talk about my next favorite TV show and help you understand Asymmetric encryption. Okay, do we have any Alias fans out there? This is a bigger stretch. I don't know. Okay, well, I'll tell you the premise and you'll be sure to get all the references. Okay, so Alias is really just like a spy show. Jennifer Gartner is a star, and it's available on Amazon Prime if you like some good, bad TV. So let's introduce you to the characters that we'll be talking about. Jennifer Garner or Sydney Bristow and her dad, Jack Bristow. They are both super spies for an organization called SD Six. And then we have Sark, who is their enemy, and he's considered the attacker in this scenario. But Sydney and Jack want to be able to send encrypted messages to each other using Asymmetric encryption. Usually in cryptography examples, you will hear the sender and the recipient known as Alice and Bob. So we like to use Alice and Bob in examples for some reason. And the attacker, or the Eavesdropper, is known as Eve. So Alice, Bob, Eve. But I'll keep calling them Sydney, Jack, and Sarks. So Sydney wants to send a message to Jack. Jack has two keys which are called his key pair. He has a public key and a private key. Jack's private key is totally private. Only Jack knows his key. He keeps it secure. He doesn't share it with anybody. But Jack's public key is shared to anybody who he wants to send encrypted messages so he could share this publicly on the Internet or something like that. These are all characters from Alias who would also have access to a public key. So when Sydney wants to send a message to Jack, she takes her message. She uses Jack's public key to encrypt the message. Then Sydney sends the encrypted message to Jack, and Jack uses his private key to decrypt the message. So the thing to note here is that although anybody could grab the encrypted message, you have to have Jack's private key to decrypt it. You have to have the private key that corresponds to the public key that was used to originally encrypt the message. So they go together the public key to encrypt the private key to decrypt. And if Jack is able to keep his key private, his messages are safe and only he can decrypt them. So let's come full circle and give you an example of this in JavaScript. So let's talk about JSON web tokens for jets. Have you all heard of Jots before? Used them at all? I see some nods yes, some no. Okay, so Josh are just compact and self contained way to securely transmit claims between parties. So it's just a way to send information from one party to another. Chats are often used in technology for authentication, for authorization, for information exchange. And they're in a JSON format. So key value pairs. Jots are made up of three parts, a header, a payload and a signature. Jots don't have to be signed. They can be unsecured jots that don't include a signature. You would add a signature for more security, but when they are signed, you can see in red we have the header, in purple we have the payload, and then in blue we have the signature. When we do include a signature, this is then called Haws, a JSON Web signature. I didn't mention this earlier, but it's first time seeing Jot and you're like what the heck are these letters? It's just the claims on the right that are base 64 encoded. That way we can send them in a kind of more easily transmittable way to a recipient. So once we include a signature with our Jot, our Jot is now a JWX JSON Web signature. Json web signatures are content secured with digital signatures using JSON based data structures. Jws provide integrity protection. So when a jot is signed, the recipient can verify that the jot is coming from a certain party and that it has not been changed since it was sent for that party. So you'll get it once I keep going. But JWS are made up of three parts, a header which includes a protected header and sometimes an unprotected header. It includes a payload and a signature. So if we go back to our example of Sydney and Jack, Sydney might want to send the claims that Sydney is an issuer. Her audience is Jack. Maybe she has a secret spy message mission in Helsinki and her date of arrival. So she would want to send these claims to Jack and she wants to make sure that Jack knows that the claims are coming from her and that they haven't changed since she sent them. So to do that, I'm going to walk you through some JavaScript code of how you would generate a JW. Okay? So don't get overwhelmed with the slide. I'm going to break it down bit by bit. But for the code I'm going to be using the NPM package called Jose and let's go through it. So in order to generate a JWS, I first start by generating a key pair. This is going to be a key pair includes a public key and a private key. Remember, a key is just a string of characters. So luckily the library has the easy function for us called Generate key pair that will generate the keys for us. In this case, I'm using an Es 256 key pair. This is just an Elliptic curve signature algorithm that's used with Sha 256 hash algorithm. You don't really need to know these details. If you were to read through the JWS specification on the Internet, it would tell you you should use these types of key algorithms and not these. It'll be very prescriptive of kind of what the protocol is. Okay, generate a key pair. Next up, we need to sign our job. We just pass in the payload, which is the part in the pink. We set a protected header, we set the expiration date, and then we just run the sign function. We pass in our private key, and out comes the JWS. You can notice that the output of JWS is signed, but it's not encrypted. So on the left, I have just the string of the jot, and I actually use my terminal to just base 64, decode the header and the payload. You can see that I can read this. It's plain text if I'm sending this over the Internet, like anybody can read this. So it is not like private information that's sent, but it is sent with a signature, meaning that we can verify who sent the message. So in this case, Sydney sends the claims to Jack. She signs it with her private key, and then Jack can take Sydney's public key, which is widely available, and he can use that to verify that the message actually came from Sydney, and it is the message that she wanted him to get. So to verify the chat, this library just has a function called Compact verify, where we pass in the string of the JWS, we pass in the public key of the sender. And verification is really easy. We'll just get the output of claims and the protected header, and we can see that everything was verified as expected. So once we have a JSON Web signature, Sydney might want to send a payload that's encrypted. She might not want anybody on the Internet to be able to see that she's going to Helsinki, the one she's arriving, because it's a super secret spy information. So what Sydney will do is she will encrypt this jot with Jack's public key, and then Jack will decrypt the jot with his private key. In this case, we're using JSON Web encryption, or JWE. This is when content is encrypted and we're using JSON based data structures just like a chat. Jwe have a few more components. They're made up of a header, including a protected and maybe an unprotected header, an encrypted key, an initialization vector ciphertext, and authentication tag. Let's go through some code real quick and show you what a JWE looks like. All right, I'm using the same library again. This is the Jose library through the JW flow. First step, generate a key pair. In this case, I'm just using a different algorithm. This is a Elliptic curve to the Hominin Ephemeral key that I'm using. Again, details don't really matter. Don't let them bog you down. So once I generate the key, pairs private and the public key I need to sign and encrypt the jot so I just pass in the payload. Again I'm passing in the algorithm that I'm using to sign and the encryption algorithm I'm using to encrypt and then I call this encrypt function and I pass it in my public key and outcomes the JWE. Let's check it out real quick. This on the left shows you the string of the JWE, you have the protected header which I can basically for decode. Then you can see I try to decode the cipher text and it's like just gibberish. So this is where all my claims are happening in the cipher text but I can't read it unless I have the private key. So you can see that in this case my data is encrypted and signed. Last step in the flow would be to verify and decrypt the JWE. Again there's just a function, this library is really handy, just decrypt the chat, I pass it in my private key and there you go the outputted decrypted message. So I know that was a lot pretty quick about JSON web stars. Aws but it should give you kind of like high level view of all of these things that are happening often on the front end. Jobs are used for authentication and authorization. So again Jots are the high level JSON web tokens, they can be signed creating a JSON web signature, they can be signed and encrypted as a JSON web encryption and altogether we have the fake chat happy family. So that is encryption for JavaScript developers in a nutshell. Hopefully you all learned that encryption is not as scary as it sounds, it's just the process of encoding information so that only the sender and the recipient can read the message. We talked about hash functions which help maintain message integrity. We talked about symmetric encryption or secret key cryptography. That was when we only had one key. We talked about asymmetric encryption when we had the private and the public key two keys. Then we talked about Jots, JWS, JWE, all the JWS and lastly we went through some examples of generating and validating Jots in JavaScript using handy Jose NPM library. Lastly you might not have bargained to learn some of my favorite TV shows right now like Great British, Bake, off and Alias so thank you all for hearing me share about encryption. I'd love to stay in touch so you can find me honor women who code slack. You can email me or find me on LinkedIn.