Thank you for thinking about adding a new translation for our comic! We'll be excited to add it to our site. This text is lengthy, but we hope it provides all the information that you need.
Translations are provided in YAML. At the end of this introduction, you'll find the complete YAML file in English. You can use it as a template for your translation.
⚠️ Things you must know:
- Not all text can be translated.
- Some frame have more than one speech bubble.
- Front page, navigation, episodes page and footer can be translated.
- The about page cannot be translated.
Text that cannot be translated
If the text is not inside a speech bubble or enclosed in a black or red rectangle, we won't be able to translated at the moment.
For example, the following text cannot be translated in episode 1:
- The avocado toast recipe.
- The names of the characters when they first appear.
- The email with the signature.
Multiple speech bubbles on a frame
Some frames have more than one speech bubble or black/red rectangle. For example, in episode 2, on frame 4.
Here's is how you'll be able to translate those frames:
# This frame has 1 speech bubble. 1: "And that mechanism is called 'encryption'." # And this one 2 speech bubbles. 2-1: "Let's talk about the two types of encryption algorithms." 2-2: "Now, where did I put those keys?"
Sending the translation
You can send us the translation however you like. See the complete YAML file template at the end of these instructions.
- Send an email to firstname.lastname@example.org an attachment containing your translation.
- Creating a GitHub/GitLab repository.
- Other method that is more convenient for you.
You'll be able to preview your work before we officially release it.
We'll ask you to provide us with a link to your website or social media account so we can attribute this work to you. See https://howhttps.works/fr/ for an example.
I hope this helps! Please let us know if you get stuck or have any further questions.
Looking forward to see your work!
Template YAML file
# Author translation: source: "Name and link to social media" text_direction: "ltr" # Set to "rtl" for right-to-left languages # Navigation nav: episodes: "Episodes" about: "About" ep1: "Why do we need HTTPS?" ep2: "The keys" ep3: "The handshake" ep4: "HTTPS, SSL, TLS differences" ep5: "Certificate Authorities" social: "Be a social cat" more_comics: "Read more comics" continue_reading: "Continue reading" # Home page home: title: "How HTTPS Works" certificat_cta: "Start reading" subtitle: "How HTTPS works ...in a comic!" p1: "Have you ever wondered why a green lock icon appears on your browser URL bar? And why is it important? We did too, and this comic is for you!" p2: "Follow the adventures of Certificat, Browserbird, and Compugter as they explain why HTTPS is crucial for the future of the web and how it all works together." p3: "Don't let the bad crabs get you (you'll know what we mean in the comic). Get to know HTTPS and why it is essential to your privacy." small_cta: "Start reading now" # Episode fragments for /episodes fragment: ep1: "Start reading here. If there is only one thing that you take away from this comic, let it be this one." ep2: "To understand how HTTPS works, you have to know how symmetric and asymmetric key encryption works. It sounds like big words, but really it's not." ep3: "When you browse to a HTTP secure site, your browser and the server where it connects to have a secret handshake. We break this down and bring it into the real world so you can greet your friends with the secret handshake." ep4: "It's easy to confuse HTTPS, SSL, and TLS. We often use these terms interchangeably. Let's talk about each of them with a bit of hiss-tory." ep5: "What do they do? Why do we need them? How do they validate certificates? So many questions to answer in this last chapter of the comic!" # Episodes ep1: 1: "Why do we need HTTPS?" 2: "We need HTTPS for 3 reasons." 3: "Privacy, integrity, and identification." 4: "Let's talk about privacy first." 5: "I'll use my friends as an example." 6: "no text" 7: "I am sending a message to Browserbird." 8: "Oh no! The message is not encrypted!" 9: "Crab is listening on the communication capturing the message." 10: "Potentially using it for evil." 11: "Privacy means that no one can eavesdrop on your messages." 12: "Bad crab. Bad." 13: "When you browse to a website without HTTPS, I could be eavesdropping on your password." 14: "The green padlock on the URL bar of your browser tells you that there are no crabs watching over your shoulder." 15: "Reason number 2: integrity." 16: "Example coming up!" 17: "I am sending another message to Browserbird unencrypted." 18: "But before it reaches Browserbird, I intercept the message." 19: "I update the message to say bad things about Browserbird and forward it to him." 20: "Why would Compugter say such things about me?" 21: "no text" 22: "This is often called a man-in-the-middle attack." 23: "And crab-in-the-middle attacks are the worst." 24: "Bad Crab. Bad." 25: "Integrity means that the message is not manipulated on the way to its destination." 26: "I make sure that your communication is not being tampered with." 27: "Reason number 3: identification." 28: "Example time!" 29: "Identification means that I can check that this message is coming from Compugter." 30: "A digital signature attached to a message can identify the sender." 31: "The digital signature is not the closing text on your emails. Anyone could copy that ;)" 32: "And when you are browsing the web, identification means that the site that you are visiting is indeed the one you think it is." 33: "HTTPS, via SSL certificates, ensures you are connected exactly with the receiver you would expect." 34: "This SSL certificate is valid and has been issued by a legitimate Certificate Authority. You are good to go." 35: "We'll be talking more about SSL certificates and Certificate Authorities soon, so stay tuned." 36: "In summary, privacy, integrity and identification are the main reasons why HTTPS is important." next: "Next on HowHTTPS.works..." next_teaser: "Now that we know the why, the next step is to understand symmetric and asymmetric encryption. Big words, but easy concepts." ep2: 1: "The Keys" 2: "HTTPS needs a way to provide privacy, integrity, and identification on the web." 3: "And that mechanism is called 'encryption'." 4-1: "Let's talk about the two types of encryption algorithms." 4-2: "Now, where did I put those keys?" 5-1: "Finally!" 5-2: "Let's start with the symmetric key algorithm." 6: "In this scenario, there is only one key to encrypt and decrypt a message." 7: "Before sending a message to BrowserBird, I encrypt the message with a key." 8: "You can think of the encryption process like putting the message in a box and locking the box with a key." 9: "Only the person that has a copy of the key can open the box and read the message." 10: "This guarantees that the box cannot be opened until it reaches the person with the right key." 11: "When Browserbird gets the box, they use their key to open it and read the message." 12: "It's important that the key is kept private. You should not share the key in plain text, or send it with the box. Or keep it in your pocket." 13: "Remember, anyone with the key can open the box." 14-1: "Using the box is a nice visual to understand encryption, but it's really oversimplifying it." 14-2: "Let's fix that!" 15: "In reality, anyone looking at the message without the key only sees nonsense text." 16: "This text was generated by an encryption algorithm." 17: "Which is a fancy way to say that the text was scrambled through a series of steps." 18: "It was transformed and spread out multiple times. Each time obfuscating the message further." 19: "To decrypt a message, we just need to apply the same steps, but in reverse order." 20: "The encryption key is mixed in with the message, so even if you know the encryption algorithm, without the key, the message is still nonsense." 21: "Here is what a key might look like." 22: "One main issue with symmetric keys is that they are hard to share." 23: "You have to be super careful with how you distribute the key." 24: "This brings us to asymmetric keys." 25: "The main difference with symmetric keys, is that you have 2 keys." 26: "One key is public, the other one is private. They are paired and work together." 27-1: "Share your public key with anyone. Send it in plain text, make stickers, tattoos. Anything you want! It's public!" 27-2: "I like tattoos." 28: "Compugter is sending their public key to BrowserBird." 29: "And now I am sending a message back to them encrypting it with their public key." 30: "In other words, BrowserBird puts the message in a box and locks it with Compugter's public key." 31: "I can now use my private key to read the message." 32: "That's the main idea. Only the private key can open a box locked with the public key pair." 33: "I use Browserbird public key to send them another message." 34: "This is great not only for privacy, but also for identification since we know for sure that only the owner of the 2 keys can open the message." 35: "Next, we'll be looking at how symmetric and asymmetric keys play a role when we connect to a site with SSL." next: "Next on HowHTTPS.works..." next_teaser: "Hurray for encryption! What's next? Learn the secret handshake between your browser and the internet that makes your information safe and secured." ep3: 1: "The Handshake" 2: "When you started reading this comic, your browser displayed a green lock on the address bar." 3: "How did that happen?" 4: "Your browser communicated with our server, where this comic is hosted, and they both established a secure connection to transmit messages." 5: "But first, they needed to agree on how to communicate securely." 6: "If the negotiation is not successful, your browser lets you know by showing an error or warning." 7: "If an agreement is reached, your browser is happy to display a green padlock on the address bar." 8: "This process, the negotiation between a browser and a server, is called 'the handshake'." 9: "It happens very fast. We are going to show you how it works." 10: "Browserbird will be your browser." 11: "Compugter will be our server." 12: "Take it away guys!" 13: "Ready? Here is what the 'handshake' in slow-motion looks like." 14: "Left clap" 15: "Right clap" 16: "Vertical shaka" 17: "Shaka horizontal rotation" 18: "Tickles" 19: "Done!" 20: "Let's do it again, but faster." 21: "Left clap - Right clap - Shaka - Shaka rotation - Tickles." 22: "A-G-A-I-N !" 23: "Stop!" 24: "Let's break it down. Step by step." 25: "Step One: Left clap. AKA Client Hello." 26: "I send a list of SSL/TLS versions and encryption algorithms that I can work with to Compugter." 27: "A fancy word for the encryption algorithm list is 'cipher suite'." 28: "So you can sound like a pro at the dinner table." 29: "The SSL and TLS protocols have evolved over time, we'll talk more about that soonish." 30: "And then I wait for an answer from Compugter." 31: "Step two: Right clap. AKA Server Hello." 32: "I choose the best SSL/TLS version and encryption algorithm among the ones browserbird sent me, and based on my preferences." 33: "I reply with my certificate, which includes my public key, so they can verify who I am." 34: "Step three: Vertical shaka. AKA Client Key Exchange." 35: "I check Compugter's certificate to make sure they are legit." 36: "I generate a 'pre-master key' so we can both use it later when we generate a unique key." 37: "I encrypt that pre-master key with Compugter's public key and then send it to him." 38: "Step four: Shaka horizontal rotation. AKA Change Cipher spec." 39: "I use my private key to decrypt the pre-master key." 40: "So far all the communication between them has been in the open. They haven't secured any messages." 41: "They used asymmetric keys (public and private keys) to encrypt the pre-master key so nobody could spy on it." 42: "Now they both generate the same 'shared secret' that they are going to use as a symmetric key." 43: "And browserbird sends a test." 44: "Compugter responds." 45: "Step five: Tickles. AKA Everything is now secured." 46: "Now all data going back and forth between Browserbird and Compugter is now secured for the rest of the session." 47: "Passwords, credit card details, everything." 48: "Simple, right?" 49: "Next time you connect to a website securely via HTTPS, give your browser the shaka because you know their secret handshake." next: "Next on HowHTTPS.works..." next_teaser: "HTTPS, SSL, TLS, oh my! I just had an acronym soup for lunch. What do they mean? Are they the same thing?" ep4: 1: "The differences between HTTPS, SSL, and TLS" 2: "It's easy to confuse these terms and use them interchangeably." 3: "Let's look into each one and see how they differ." 4: "What's HTTPS?" 5: "HTTPS is the secured version of HTTP: HyperText Transfer Protocol." 6: "HTTP is the protocol used by your browser and web servers to communicate and exchange information." 7: "When that exchange of data is encrypted with SSL/TLS, then we call it HTTPS. The 'S' stands for Secure." 8: "OMG! Wait! Did I say SSL/TLS! Why?" 9: "Because it's the precise way to talk about SSL and TLS." 10: "SSL stands for 'Secure Sockets Layer'. A protocol created by Netscape." 11: "SSL is a dinosaur by Internet standards. The first version was never released and version 2 launched with the browser Netscape 1.1 in 1995." 12: "Later that year Netscape released version 3 because version 2 had some major security problems." 13: "We were all happy cats until 1999. Browser wars between Netscape and Microsoft, the need for standards, and Britney Spears - '...Baby One More Time' changed the world as we know it. Fur-ever." 14: "Oops, I did it again." 15: "Netscape gave control of SSL protocol to the IETF: Internet Engineering Task Force." 16: "Before 1999 ended, IETF released TLS version 1.0 (Which was really SSL 3.1)." 17: "SSL was renamed to TLS: Transport Layer Security. Creating confusion and chaos still to this day." 18: "Thanks 1999." 19: "TLS 1.0 took off and version 1.1 was released in 2006." 20: "A couple of years later, in 2008, TLS 1.2 was released to address a few flaws and exploits." 21: "However, it's not until 2013 that browsers start to catch up and add support for TLS 1.2." 22: "To add to the confusion, SSL 3.0 was officially deprecated in 2015." 23-1: "TLS 1.3 was approved in march 2018 and your browser might already support it." 23-2: "Click here to check the current TLS version for your browser." 23-3: "But come back to finish the story." 24: "TLS 1.3 brings great security improvements and removes old weaker features." 25: "No worries if your browser doesn't support it yet. TLS 1.2 is still the recommended version if you are reading this in Spring/Summer 2020." 26: "Let's recap." 27: "HTTPS is just the HTTP protocol but with data encryption using SSL/TLS." 28: "SSL is the original and now deprecated protocol created at Netscape in the mid 90s." 29: "TLS is the new protocol for secured encryption on the web maintained by IETF." 30: "And now you know the hiss-tory." next: "Next on HowHTTPS.works..." next_teaser: "Certificates and Certificate authorities: What Do They Know? Do They Know Things?? Let's Find Out!" ep5: 1: "Certificate Authorities" 2: "A certificate authority (CA) is a third-party organization with 3 main objectives:" 3: "1. Issuing certificates." 4: "2. Confirming the identity of the certificate owner." 5: "3. Providing proof that the certificate is valid." 6: "You might have heard of Symantec, Comodo, or Let's Encrypt, among others." 7: "Becoming a CA is an intense task of security requirements and audits." 8: "You need to be trusted to be accepted into a root store." 9: "A root store is basically a database of trusted CAs." 10: "Apple, Windows, and Mozilla run their own root stores that they pre-install in your computer or device." 11: "Which certificate should you buy? You have basically 3 flavors." 12: "Domain validated. The certificate just verifies the domain name, and nothing else. You probably need this one." 13: "Organization validated. The certificate requires the validation and manual verification of the organization behind the certificate." 14: "Extended validation. The certificate requires an exhaustive verification of the business." 15: "All valid certificates result in the browser displaying a secure badge in the browser bar. EV certificates generally display the company name as well." 16: "But how do certificates get validated?" 17: "When a CA issues a certificate, they sign the certificate with their root certificate pre-installed in the root store." 18: "Most of the time it's an intermediate certificate signed with a root certificate." 19: "If a cat-astrophy would occur and the root certificate is compromised, it's easier to revoke the intermediate certificates, since the root certificates are installed on each device." 20: "Let's walk through how a certificate is validated. The process is based on a 'chain of trust'." 21: "Your browser connects to a site via HTTPS and downloads the certificate." 22: "The certificate is not a root certificate." 23: "Your browser downloads the certificate that was used to sign the certificate on the site." 24: "But this certificate is still not the root certificate." 25: "Your browser once more looks up the certificate that signed the intermediate certificate." 26: "It's the root certificate! Yay!" 27: "The entire certificate chain is trusted, and thus the site certificate is trusted as well." 28: "In the event that the last certificate is not a root certificate, and there are no more certificates to download, the chain is untrusted." 29: "But why use a certificate authority when you can self-sign your certificates?" 30: "A self-signed certificate provides the same level of encryption as one generated by an authority." 31: "No crabs can spy on your data." 32: "And there is no charge to self-sign your certificates!" 33: "Yes, but almost every browser checks that the certificate is issued by a trusted authority." 34: "As such visitors are warned that the certificate cannot be trusted." 35: "Self-signed certificates can be useful for testing, and intranets, but you should avoid using them on public sites." 36: "Self-signed certificates can be forged. Basically, they say 'Trust me, it's me, I promise!'." 37: "A trusted certificate says: 'Trust me, an authority verified me'." 38: "Talking about trust. Thank you for trusting us through this story." 39: "Unfortunately, it is coming to an end." 40: "We hope you enjoyed this comic!" 41: "See you soon!" end-title: "Hey, you did it!" end-p1: "You finished the comic! Thanks from the bottom of of our cat paws for spending some of your day reading about HTTPS." end-p2: "We propose three activities to distract you from the fact that there is not another episode to read." option-1: "Take the quiz" option-1-p: "To make it up to you, you can test your brand hot knowledge of HTTPS in a quiz. Yes, that's right. We even send you a certificate of completion if you score high enough." option-2: "Vent on social networks" option-2-p: "The human thing to do. If you want to put more pressure on us to make more comics, here are a few examples to get us to the edge of our seats." option-3: "Visit DNSimple" option-3-p: "If you enjoyed the comic, and need an SSL certificate to secure your site, or a rock solid and easy-to-use DNS (not our words), or a brand new fancy domain, have a look at us." post-data: "P.S. If you want to suggest a new episode (please no, because we'll have to update this page) or give us feedback about the existing ones," post-data-link: "we are all cat hears"