<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta charset="utf-8">
+
<title>Email Self-Defense</title>
- <meta name="description" content="">
+ <meta name="keywords" content="GnuPG, GPG, privacy" />
+ <meta name="description" content="A guide by the FSF to safe and
+ private email through the use of GnuPG">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/main.css">
<link rel="shortcut icon" href="static/img/favicon.ico" />
</div>
</nav>
-<!-- -------------- FSF Introduction -------------- -->
+<!-- ~~~~~~~~~ FSF Introduction ~~~~~~~~~ -->
<section class="row" id="fsf-intro">
<div>
<h3><a href="http://www.fsf.org/"><img alt="Free Software Foundation" src="static/img/fsf-logo.png"></a></h3>
</div>
</section><!-- End #fsf-intro -->
-<!-- -------------- GnuPG Header and introduction text -------------- -->
-<!-- -------------- Revision as of 18:53, 1 June 2014 by Zakkai -------------- -->
+<!-- ~~~~~~~~~ GnuPG Header and introduction text ~~~~~~~~~ -->
+<!-- ~~~~~~~~~ Revision as of 18:53, 1 June 2014 by Zakkai ~~~~~~~~~ -->
<header class="row" id="header">
<div>
<a href="#">
</div>
</header><!-- End #header -->
-<!-- -------------- Section 1: Get the pieces -------------- -->
+<!-- ~~~~~~~~~ Section 1: Get the pieces ~~~~~~~~~ -->
<section class="row" id="section1">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2><em>#1</em> Get the pieces</h2>
</div><!-- /.sidebar -->
- <!-- -------------- section introduction: interspersed text -------------- -->
+ <!-- ~~~~~~~~~ section introduction: interspersed text ~~~~~~~~~ -->
<div class="main section-intro">
<p>Before starting, you'll need any one of these desktop email programs installed on your computer: <a href="http://www.fossamail.org">FossaMail</a> (for Windows), <a href="http://directory.fsf.org/wiki/Icedove">Icedove</a> (for Debian GNU/Linux), <a href="http://www.mozilla.org/en-US/thunderbird/">Thunderbird</a> (for other GNU/Linux flavors, Apple OS X), or any other program based on one of these. If you are already using one of these, you can skip to <a href="#step-1b">Step 1.b</a>.</p>
<p>An email program lets you read and write mail without using a Web browser, and provides special features that are hard to find in email systems you use in a Web browser. Using an email program doesn't mean that you have to make a new email account — most people just connect an existing email account from a Web email service (like GMail) or their workplace to their email program. You can think of it as another way to access the same email account.</p>
</div><!-- End .section-intro /.main -->
+ </div>
- <div class="sidebar">
- <p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
- </div><!-- /.sidebar -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
- <!-- -------------- a div for each step -------------- -->
- <div class="main step" id="step-1a">
- <h3><em>Step 1.a</em> Set your email program up with your email account (if it isn't already)</h3>
- <p>Open your email program and follow the wizard that sets it up with your email account.</p>
+ <div id="step-1a">
+ <div class="sidebar">
+ <p><img src="static/img/screenshots/step1a-install-wizard.png" alt="Placeholder" /></p>
+ </div><!-- /.sidebar -->
+ <div class="main step">
+ <h3><em>Step 1.a</em> Set your email program up with your email account (if it isn't already)</h3>
+ <p>Open your email program and follow the wizard that sets it up with your email account.</p>
- <!-- -------------- Troubleshooting -------------- -->
- <div class="troubleshooting">
- <h4>Troubleshooting</h4>
- <dl>
- <dt>My email program can't find my account or isn't downloading my mail?</dt>
- <dd>Answer coming soon</dd>
- </dl>
- </div><!-- /.troubleshooting -->
-
+ <!-- ~~~~~~~~~ Troubleshooting ~~~~~~~~~ -->
+ <div class="troubleshooting">
+ <h4>Troubleshooting</h4>
+ <dl>
+ <dt>My email program can't find my account or isn't downloading my mail?</dt>
+ <dd>Answer coming soon</dd>
+ </dl>
+ </div><!-- /.troubleshooting -->
+
+ </div><!-- /.main -->
</div><!-- End #step1-a /.main -->
- <!-- -------------- a div for each step -------------- -->
- <div class="main step"id="step-1b">
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
+ <div class="main step" id="step-1b">
<h3><em>Step 1.b</em> If you are using Windows, download gpg4Win</h3>
<p><a rel="external" href="http://gpg4win.org/">Download it</a>, run the executable and click through the installation wizard with all the default settings. You don't need to run the program once it's installed.</p>
</div><!-- End #step1b /.main -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-1c">
<h3><em>Step 1.c</em> Install the Enigmail plugin for your email program</h3>
<p>In your email program's menu, select Add-ons (it may be in the Tools section). Make sure Extensions is selected on the left. Do you see Enigmail? if so, skip this step.</p>
<p>If not, search "Enigmail" with the search bar in the upper right. You can take it from here. Restart your email program when you're done.</p>
- <!-- -------------- Troubleshooting -------------- -->
+ <!-- ~~~~~~~~~ Troubleshooting ~~~~~~~~~ -->
<div class="troubleshooting">
<h4>Troubleshooting</h4>
<dl>
</div>
</section><!-- End #section1 -->
-<!-- -------------- Section 2: Make your keys -------------- -->
+<!-- ~~~~~~~~~ Section 2: Make your keys ~~~~~~~~~ -->
<section class="row" id="section2">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2><em>#2</em> Make your keys</h2>
</div><!-- /.sidebar -->
- <!-- -------------- section introduction: interspersed text -------------- -->
+ <!-- ~~~~~~~~~ section introduction: interspersed text ~~~~~~~~~ -->
<div class="main section-intro">
<p>To use the GnuPG system, you'll need a public key and a private key (known together as a keypair). Each is a long string of randomly generated numbers that are unique to you. Your public and private keys are linked together by a special mathematical function.</p>
</div><!-- End .section-intro /.main -->
<p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
</div><!-- /.sidebar -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-2a">
<h3><em>Step 2.a</em> Make a keypair</h3>
<p>In your email program's menu, select OpenPGP -> Setup Wizard. You don't need to read the text in the window that pops up unless you'd like to, but it's good to read the text on the later screens of the wizard.</p>
<p class="highlight">After creating your key, the Enigmail set-up wizard automatically uploaded it to a keyserver, an online computer that makes everyone's keys available through the Internet.</p>
- <!-- -------------- Troubleshooting -------------- -->
+ <!-- ~~~~~~~~~ Troubleshooting ~~~~~~~~~ -->
<div class="troubleshooting">
<h4>Troubleshooting</h4>
<dl>
</div>
</section><!-- End #section2 -->
-<!-- -------------- Section 3: Try it out -------------- -->
+<!-- ~~~~~~~~~ Section 3: Try it out ~~~~~~~~~ -->
<section class="row" id="section3">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2><em>#3</em> Try it out!</h2>
</div><!-- /.sidebar -->
- <!-- -------------- section introduction: interspersed text -------------- -->
+ <!-- ~~~~~~~~~ section introduction: interspersed text ~~~~~~~~~ -->
<div class="main section-intro">
<p>Now you'll try a test correspondence with a computer program named Adele, which knows how to use encryption. You'd follow the same steps if communicating with a real person. Then you'll send your first signed email to a real person!</p>
</div><!-- End .section-intro /.main -->
<p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
</div><!-- /.sidebar -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-3a">
<h3><em>Step 3.a</em> Download Adele's public key from a keyserver</h3>
<p>In your email program's menu, go to OpenPGP -> Key Management -> Keyserver -> Search for Keys.</p>
<p>Check the first result (Key ID starting with 9) and hit OK.</p>
</div><!-- End #step-3a /.main -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-3b">
<h3><em>Step 3.b</em> Send a test encrypted email</h3>
<p>Write a new email in your email program, addressed to adele-en@gnupp.de. Make the subject "Encryption test" or something similar and write something in the body.</p>
<p class="highlight">Notice the bar that Enigmail shows you with information about the status of Adele's key.</p>
</div><!-- End #step-3b /.main -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-3c">
<h3><em>Step 3.c</em> Send a test signed email to a friend</h3>
<p>Write a new email in your email program, addressed to a friend. If you want, tell them about this guide!</p>
</div>
</section><!-- End #section3 -->
-<!-- -------------- Section 4: Learn the Web of Trust -------------- -->
+<!-- ~~~~~~~~~ Section 4: Learn the Web of Trust ~~~~~~~~~ -->
<section class="row" id="section4">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2><em>#4</em> Learn the Web of Trust</h2>
</div><!-- /.sidebar -->
- <!-- -------------- section introduction: interspersed text -------------- -->
+ <!-- ~~~~~~~~~ section introduction: interspersed text ~~~~~~~~~ -->
<div class="main section-intro">
<p>Email encryption is a powerful technology, but it has a weakness; it requires a way to verify that a person's keypair is actually theirs. Otherwise, there would be no way to stop an attacker from making an email address with your friends name, creating a keypair to go with it and impersonating your friend. They would then be able to impersonate your friend by signing messages with the private key they'd created, and decrypt messages intended for your friend with the public key.</p>
<p>That's why the programmers that developed email encryption created keysigning and the Web of Trust. Keysigning allows a person to publicly state that they trust that a public key belongs to a specific person. To sign someone's public key, you need to use your private key, so the world will know that it was you.</p>
<p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
</div><!-- /.sidebar -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-4a">
<h3><em>Step 4.a</em> Sign a key</h3>
<p>In your email program's menu, go to OpenPGP -> Key Management.</p>
</div>
</section><!-- End #section4 -->
-<!-- -------------- Section 5: Use it well -------------- -->
+<!-- ~~~~~~~~~ Section 5: Use it well ~~~~~~~~~ -->
<section class="row section5">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2><em>#5</em> Use it well</h2>
<p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
</div><!-- /.sidebar -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-5a">
<h3><em>Step 5a</em> When should I encrypt? When should I sign?</h3>
<p>Everyone uses GnuPG a little differently. Encryption is most important for messages involving finances, personal information, politically sensitive conversations and anything else that you wouldn't want to fall into the wrong hands. Signing is best for when you think there might be concern about your identity, or as a way of demonstrating that you know how to use GnuPG and will be able to decrypt emails. If you're already encrypting, there's no reason not to sign as well, to give the recipient added assurance that the message is from you.</p>
<p>Coming soon</p>
</div><!-- End #step-5b /.main -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step" id="step-5c">
<h3><em>Step 5c</em> Make it part of your online identity</h3>
<p>Start writing your key ID anywhere someone would see your email address. Add it to your email signature, social media profile, blog, Website, or business card.</p>
</div><!-- End #step-5c /.main -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step highlight">
<h3>Important: act swiftly if you lose your key</h3>
<p>If you lose your private key or someone else gets ahold of it (say, by stealing your computer), it's important to revoke it immediately before someone else uses it to steal your identity. This guide doesn't cover how to revoke a key, but it only takes a minute. We recommend you Google it or seek help from a skilled friend. After you're done revoking, send an email to everyone with whom you usually use your key to make sure they know.</p>
</div>
</section><!-- End #section5 -->
-<!-- -------------- Section 6: Next steps -------------- -->
+<!-- ~~~~~~~~~ Section 6: Next steps ~~~~~~~~~ -->
<section class="row" id="section6">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2><em>#6</em> Next steps</h2>
<p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
</div><!-- /.sidebar -->
- <!-- -------------- a div for each step -------------- -->
+ <!-- ~~~~~~~~~ a div for each step ~~~~~~~~~ -->
<div class="main step">
<p>Switch to GNU/Linux</p>
<p>Share this guide and help a friend get started</p>
</div>
</section><!-- End #section6 -->
-<!-- -------------- FAQ -------------- -->
+<!-- ~~~~~~~~~ FAQ ~~~~~~~~~ -->
<section class="row" id="faq">
<div>
- <!-- -------------- section title + graphics -------------- -->
+ <!-- ~~~~~~~~~ section title + graphics ~~~~~~~~~ -->
<div class="sidebar">
<h2>FAQ</h2>
</div><!-- /.sidebar -->
</div>
</section><!-- End #faq -->
-<!-- -------------- Footer -------------- -->
+<!-- ~~~~~~~~~ Footer ~~~~~~~~~ -->
<footer class="row" id="footer">
<div>
<div id="copyright">
</div>
</footer><!-- End #footer -->
- <script src="static/js/vendor/jquery-1.11.0.min.js"></script>
+ <script src="static/js/jquery-1.11.0.min.js"></script>
+ <script src="static/js/scripts.js"></script>
</body>
</html>