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.
⚠️ 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 email@example.com 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"