Creating a PGP Contact Form

After blogging about setting up PGP on Windows and Android, it's apparent how few people really use it. In an effort to take another step towards making PGP easier to use, I went looking for a way to create a contact form that would utilise PGP encryption in the browser, before even sending the content. As it turned out, it's actually really easy to do.

What is PGP?

PGP, short for Pretty Good Privacy, is a method for encrypting and decrypting data. You generate your own key pair to get your private key and your public key. The public key can be sent to anyone who wishes to send you encrypted communications. They can encrypt the data with the public key and then send it to you. Only your private key can decrypt data that has been encrypted with your public key. So long as you keep the private key safe, any data encrypted with your public key will also be safe.

Why use PGP?

There are a whole host of reasons that you may want to keep your communications private and secure. They could be legally or personally sensitive, you could be a whistleblower reporting to a journalist, you may not want your email provider to read the content of your emails or, like me, purely and simply because the content of your communications has nothing to do with anyone else. If I want to encrypt my prized Yorkshire Pudding recipe when I email it to my friends, then I will!

How do I use PGP in a Contact Form?

After some quick digging around online I came across OpenPGP.js, an open source PGP library written in Javascript. Perfect! Grab the latest release on their GitHub page and extract the openpgp.min.js file. Upload the file to your js directory and we can get ready to make our form.

The Form

I've not actually used a contact form on this particular instance, I'm just going to use a textarea and a submit button to trigger the encryption of the content.

<textarea id="input" style='width: 100%; min-height: 300px'></textarea>
<button id="button" onClick="encrypt()">Encrypt</button>

That's as simple as the HTML needs to be! You can of course use this in a standard form and just tweak it to suit your needs. For the javascript, I've used the following.

<script type="text/javascript">
function encrypt() {  
    if (window.crypto.getRandomValues) {  
        if ($('#button').html() === "Encrypt") {  
            var pub_key = openpgp.key.readArmored($('#pubkey').text());  
            var pgp_message = openpgp.encryptMessage(pub_key.keys, $('#input').val());  
            $('#input').val(pgp_message);  
            $('#button').html("Clear");  
            return true;  
        } else {  
            $('#input').val("");  
            $('#button').html("Encrypt");  
        }  
   } else {  
        $("#button").val("Error");  
        window.alert("This browser isn't supported!");  
        return false;  
    }  
}  
</script>

To keep everything really simple, all I'm doing is calling the encrypt() function when I hit the submit button. This grabs the public key which is on the page, encrypts the message with it, takes the ciphertext and writes it into the message field and then changes the Encrypt button to a Clear button. Now the user can copy the contents of the message field and send that to me via whatever means they like. Email, social media, anything. It doesn't matter now. Even if the transport medium for the encrypted message is not secure, it's protected by the PGP encryption, so even your mail provider can't read the contents if they wanted to. This should make it really easy for people to start using PGP.

You can find my PGP contact form here and feel free to try it out! If you setup your own, drop me a comment and let me know. It would be great to hear about other people setting up a similar encrypted contact form.