The project I’m working on in Mozilla
Hey, how is everything? Today I want to talk to you about what I’m working on in Mozilla in this internship. The project name is “create a new certificate viewer for Firefox”, but what is a certificate viewer? Why do we need one? How can I see a certificate in Firefox? What happened with the current certificate viewer? Let’s answer these questions and some more!
What is a certificate viewer?
Let’s start with what is an SSL Certificate: imagine you own a web page where you sell clothes, and your clients want to pay you with their credit card, how can they be sure your web page is secure enough? Well, that’s where the Certificates come to play! Your server needs to install an SSL Certificate to have secure connections with browsers (clients), to avoid hackers steal private information. When the site you’re visiting is secure, it will have a green lock and the URL will start with “https://” (the s stands for secure).
So, a certificate viewer is “something” to show an SSL Certificate. The current certificate viewer is a pop-up window that shows all its information. We want to show it now in a new tab, do all what is being done here (this is a Firefox web-extension) into Firefox.
How can I see a certificate in Firefox?
Go for example to https://github.com/ , click on the green lock, click where says “Connection”, click on “More information”, click on “View Certificate”.
Why do we need one?
Follow the above steps to open the certificate viewer, click on the tab that says “Details” and then in the button “Export”; choose where to save your file.
If you now open the file you exported with any text editor you will see a base-64 encoded data. If you have Linux it will open the file in a way you can read it, but … we will save you all this steps! It will be shown directly in Firefox ;).
What happened with the current certificate viewer?
The need of changing the certificate viewer is because it is too old. And the idea is to add more information in the new certificate other than what is being shown now.
How are you creating a new certificate viewer?
When you go for example to Github, and you click on “view certificate”, it opens a pop-up window; now, what we want to do is open a new tab and put an identifier of that tab into the URL of the new one, so we are going to have something like “about:certificate?id=1”. Now, in our about page (let’s call it child), when it finishes loading the DOM, it sends an async message to its parent process (let’s call it parent) asking for the certificate information; the parent (which is always listening), receives the message, extract that id from the child URL, searches for the object of that id, then do some function calls to get the certificate information (the child can’t do that), and finally sends the information back to the child, which is going to parse the information and render it into the page.
You can see here an image explaining the inner communication between those modules.
Currently, to get the security information this code is used, but that function can only be called from a web-extension, and if we wanted to use it, we would need to create a channel; so, to avoid that we need to use this other approach, which is on revision in the time this post was written.
In Certainly-Something (the web-extension we are using as a blueprint) You can see here how the security information is being fetched, and here you can see how the child ask for it. After fetching the information we can access the certificate chain doing response[‘certificates’].
The next step is to use this, but it depends on third party libraries that have lots of files, so we need to figure out an efficient way to import them. We have explored some bundlers, but the discussion is still open.
This is a summary of the state of our project, and what we have to do next. Also, we have to render all the information in a beautiful way like Certainly-Something does, and Danielle (the other intern) is taking care of that (using web components).
As you can see, this is just a small part of what Firefox is, and it is incredible how small parts, when gathering together, can make such big things! This is a very exciting part of contributing to a big project, and I like very much that I can learn all of these new topics here with the guidance of my mentors. The first day of my internship I understood nothing, and I was really scared, all the time I was thinking can I really do it?(and the truth is I still wonder that), but I try to mute those bad thoughts and keep going. I really believe people can reach their goals if they try hard, so I’m looking forward to reach mines :).
All I told you today is super new for me (correct me if I’m wrong in something, please!), and I wanted you to understand it, so you can start getting used to Firefox and start contributing!.
I hope this post was useful! See you in the next one :).
