Get sources to set Tor Browser security slider to High

docs/source.rst

@@ -49,25 +49,49 @@ While using the Tor Browser on your personal computer helps hide your activity o
 Making your First Submission
 ----------------------------
 
-Open the Tor Browser and navigate to the .onion address for the SecureDrop Source Interface you wish to make a submission to. The page should look similar to the screenshot below, although it will probably have a logo specific to the organization you are submitting to.
+Open the Tor Browser and navigate to the .onion address for the SecureDrop
+Source Interface you wish to make a submission to. The page should look similar
+to the screenshot below, although it will probably have a logo specific to the
+organization you are submitting to.
 
 |Source Interface With Javascript Enabled|
 
-If this is the first time you're using the Tor browser, it's likely that you have Javascript enabled. If you do, there will be a red warning banner at the top of the page that encourages you to disable it.
+If this is the first time you're using the Tor browser, it's likely that you
+have Javascript enabled and that the Security Slider that Tor browser provides
+is set to "Low". If you do, there will be a red warning banner at the top of
+the page that encourages you to disable Javascript and turn up the Security
+Slider to "High".
 
-Click the ``Learn how to disable it`` link in the warning banner and a message bubble will pop up explaining how to disable Javascript. Follow the instructions and the page should refresh automatically. Note that this will disable Javascript for every page in your Tor Browser, and this setting will persist across browser sessions.
+|Security Slider|
+
+Click the ``Learn how to disable it`` link in the warning banner and a message
+bubble will pop up explaining how to disable Javascript and turn up the Slider.
+Follow the instructions and the page should refresh automatically. Note that
+this will change the slider and disable Javascript for every page in your Tor
+Browser, and this setting will persist across browser sessions.
 
 |Fix Javascript warning|
 
-The page should now look similar to the screenshot below. If this is the first time you are using SecureDrop, click the ``Submit Documents`` button.
+The page should now look similar to the screenshot below. If this is the first
+time you are using SecureDrop, click the ``Submit Documents`` button.
 
 |Source Interface with Javascript Disabled|
 
-You should now see a screen that shows the unique codename that SecureDrop has generated for you. In the example screenshot below the codename is ``sink los radium bcd nab privy nadir``, but yours will be different. It is extremely important that you both remember this code and keep it secret. After submitting documents, you will need to provide this code to log back in and check for responses.
+You should now see a screen that shows the unique codename that SecureDrop has
+generated for you. In the example screenshot below the codename is
+``sink los radium bcd nab privy nadir``, but yours will be different. It is
+extremely important that you both remember this code and keep it secret. After
+submitting documents, you will need to provide this code to log back in and
+check for responses.
 
-The best way to protect your codename is to memorize it. If you cannot memorize it right away, we recommend writing it down and keeping it in a safe place at first, and gradually working to memorize it over time. Once you have memorized it, you should destroy the written copy.
+The best way to protect your codename is to memorize it. If you cannot memorize
+it right away, we recommend writing it down and keeping it in a safe place at
+first, and gradually working to memorize it over time. Once you have memorized
+it, you should destroy the written copy.
 
-SecureDrop allows you to choose the length of your codename, in case you want to create a longer codename for extra security. Once you have generated a codename and put it somewhere safe, click ``Continue``.
+SecureDrop allows you to choose the length of your codename, in case you want
+to create a longer codename for extra security. Once you have generated a
+codename and put it somewhere safe, click ``Continue``.
 
 |Memorizing your codename|
 
@@ -145,6 +169,7 @@ Repeat these steps to continue communicating with the journalist.
 
 
 .. |Source Interface with Javascript Enabled| image:: images/manual/source-step1.png
+.. |Security Slider| image:: images/manual/security-slider-high.png
 .. |Fix Javascript warning| image:: images/manual/source-step2.png
 .. |Source Interface with Javascript Disabled| image:: images/manual/source-step3-and-step7.png
 .. |Memorizing your codename| image:: images/manual/source-step4.png

securedrop/source_templates/banner_warning_flashed.html

@@ -1,6 +1,7 @@
 {# these are flash messages that appear at the top and are really scary, like if you're using tor2web #}
 {% with messages = get_flashed_messages(with_categories=True, category_filter=["banner-warning"]) %}
   {% for category, message in messages %}
-  <p class="flash {{ category }}"><i class="fa fa-exclamation-triangle pull-left"></i> {{ message|safe }}</p>
+  <p class="flash {{ category }}"><img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/black/exclamation-triangle.svg') }}" width="17px" height="17px">
+ {{ message|safe }}</p>
   {% endfor %}
 {% endwith %}

securedrop/source_templates/flashed.html

@@ -4,9 +4,9 @@
     {% if category != 'banner-warning' %}
       <p class="flash {{ category }}">
         {% if category == 'notification' %}
-        <i class="fa fa-info-circle pull-left"></i>
+        <img src="{{ url_for('static', filename='i/font-awesome/black/info.svg') }}" width="17px" height="17px">
         {% elif category == 'error' %}
-        <i class="fa fa-exclamation-triangle pull-left"></i>
+        <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/black/exclamation-triangle.svg') }}" width="17px" height="17px">
         {% endif %}
         {{ message }}
       </p>

securedrop/source_templates/generate.html

@@ -7,7 +7,8 @@ <h2>Remember this codename and keep it secret</h2>
 <hr class="no-line" />
 
 <div class="code">
-  <i class="fa fa-lock pull-left"></i><p id="codename">{{ codename }}</p>
+  <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/black/lock.svg') }}" width="20px" height="20px">
+  <p id="codename">{{ codename }}</p>
   <div class="pull-right">
     <form id="regenerate-form" method="post">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
@@ -17,7 +18,7 @@ <h2>Remember this codename and keep it secret</h2>
         {% endfor %}
       </select>
       <button type="submit" id="regenerate-submit" class="small">
-        <i class="fa fa-refresh"></i>
+        <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/white/refresh.svg') }}" width="15px" height="15px">
       </button>
     </form>
   </div>
@@ -35,7 +36,9 @@ <h2>Remember this codename and keep it secret</h2>
 
 <form id="create-form" method="post" action="/create" autocomplete="off">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <button type="submit" class="btn block pull-right" id="continue-button"><i class="fa fa-arrow-circle-o-right"></i> Continue</button>
+  <button type="submit" class="btn block pull-right" id="continue-button">
+    <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/white/arrow-circle-o-right.svg') }}" width="20px" height="20px">
+    Continue</button>
   <a id="already-have-codename" href="/login">Already have a codename?</a>
 </form>
 {% endblock %}

securedrop/source_templates/howto-disable-js.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block body %}
 
-<h1>Disable JavaScript to Protect Your Anonymity</h1>
+<h1>Turn the Security Slider to High to Protect Your Anonymity</h1>
 
 <p>JavaScript is a widely used programming language for creating interactive web
 pages. Unfortunately, JavaScript is also the most common source of security
@@ -10,8 +10,8 @@ <h1>Disable JavaScript to Protect Your Anonymity</h1>
 
 <p>We encourage SecureDrop users to disable JavaScript to protect themselves from malware that would use it to attack their browser and potentially de-anonymize them. There are other ways to get hacked, but given the use of JavaScript-based attacks recently, we believe it is prudent to disable it at this time.</p>
 
-<p>The Tor Browser comes with an add-on called NoScript that can be used to completely disable JavaScript by default, and to only enable it for sites that you trust.</p>
+<p>The Tor Browser comes with a security slider that will disable Javascript as well as protect against other methods that can be used to reveal your true identity.</p> 
 
-<p><strong>To disable JavaScript in Tor Browser, click the NoScript icon <img src="/static/i/no16.png"/> to the left of the address bar above and choose "Forbid Scripts Globally (advised)".</strong></p>
+<p><strong>To turn up the security settings, click the Tor icon <img src="static/i/toronion.png" alt="Tor icon" /> to the left of the address bar, select <strong>Privacy and Security Settings</strong>, and turn the slider to <i>High</i>.</p>
 
 {% endblock %}

securedrop/source_templates/index.html

@@ -13,7 +13,7 @@
     {% endassets %}
   </head>
   <body>
-    <div class="warning"><strong>We recommend disabling JavaScript to protect your anonymity:</strong> <a id="disable-js" href="/howto-disable-js">Learn how to disable it</a>, or ignore this warning to continue. <i id="warning-close" class="fa fa-times"></i></div>
+    <div class="warning"><strong>We recommend disabling JavaScript and turning the Security Slider to High to protect your anonymity:</strong> <a id="disable-js" href="/howto-disable-js">Learn how to disable it</a>, or ignore this warning to continue. <img id="warning-close" src="{{ url_for('static', filename='i/font-awesome/white/times.svg') }}" width="12px" height="12px"></div>
 
     {% include 'banner_warning_flashed.html' %}
 
@@ -36,15 +36,15 @@ <h2>
           </h2>
           <hr class="cut-out" />
           <p>If this is your first time submitting documents to journalists, start here.</p>
-          <a href="/generate" class="btn alt block" id="submit-documents-button"><i class="fa fa-cloud-upload"></i> Submit Documents</a>
+          <a href="/generate" class="btn alt block" id="submit-documents-button"><img id="warning-close" src="{{ url_for('static', filename='i/font-awesome/white/cloud-upload.svg') }}" width="17px" height="17px"> Submit Documents</a>
         </div>
         <div class="grid-item option">
           <h2>
             Already submitted something?
           </h2>
           <hr class="cut-out" />
           <p>If you have already submitted documents in the past, log in here to check for responses.</p>
-          <a href="/login" class="btn block"><i class="fa fa-comments"></i> Check for a response</a>
+          <a href="/login" class="btn block"><img id="warning-close" src="{{ url_for('static', filename='i/font-awesome/white/comments.svg') }}" width="17px" height="17px"> Check for a response</a>
         </div>
       </div>
 
@@ -61,12 +61,14 @@ <h2>
     Included here so the images can preload while the user is first
     reading the page. Hidden by default. -->
     <div class="bubble">
-      <p>You appear to be using the Tor Browser. You can disable Javascript in 3 easy steps!</p> 
+      <p>You appear to be using the Tor Browser. You can disable Javascript and turn the Security Slider to High in 4 easy steps!</p> 
       <ol>
-        <li>Click the <img src="static/i/no16.png" alt="NoScript icon" /> NoScript icon in the toolbar above</li>
-        <li>Click <strong><img src="static/i/no16-global.png" alt="Forbid Scripts Globally" /> Forbid Scripts Globally (advised)</strong></li>
+        <li>Click the <img src="static/i/toronion.png" alt="Tor icon" />Tor icon in the toolbar above</li>
+        <li>Click <strong>Privacy and Security Settings</strong></li>
+        <li>Turn the Slider to <strong>High</strong></li>
         <li>If the page does not refresh automatically, <a href="/">click here</a> to refresh the page</li> 
       </ol>
+
       <p><a href="/howto-disable-js">Not using the Tor Browser Bundle?</a></p>
     </div>
 

securedrop/source_templates/login.html

@@ -8,6 +8,6 @@ <h2>Login to check for responses</h2>
 <form method="post" action="/login" autocomplete="off">
 <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
 <p class="center"><input type="password" name="codename" class="codename" autocomplete="off" placeholder="Enter your codename" autofocus /></p>
-<p class="center"><button type="submit" class="btn block"><i class="fa fa-arrow-circle-o-right"></i> Continue</button></p>
+<p class="center"><button type="submit" class="btn block"><img src="{{ url_for('static', filename='i/font-awesome/white/arrow-circle-o-right.svg') }}" width="20px" height="20px">Continue</button></p>
 </form>
 {% endblock %}

securedrop/source_templates/lookup.html

@@ -5,7 +5,7 @@
   {% include 'flashed.html' %}
 
   {% if flagged and not haskey %}
-  <p class="notification"> <i class="fa fa-info-circle pull-left"></i> A journalist has been waiting for you to log in again so SecureDrop can generate a crypto key for you. Now that you have logged in, they are able to write you a reply. Check back later for replies.</p>
+  <p class="notification"> <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/black/info-circle.svg') }}" width="20px" height="20px">A journalist has been waiting for you to log in again so SecureDrop can generate a crypto key for you. Now that you have logged in, they are able to write you a reply. Check back later for replies.</p>
   {% endif %}
 
   <h2 class="headline">Submit documents and messages</h2>
@@ -17,8 +17,9 @@ <h2 class="headline">Submit documents and messages</h2>
 <form id="upload" method="post" action="/submit" enctype="multipart/form-data" autocomplete="off">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <div class="snippet">
-    <div class="attachment grid-item">
-      <i class="fa fa-cloud-upload upload-icon"></i> <input type="file" name="fh" autocomplete="off">
+    <div class="attachment grid-item center">
+      <img class="center" src="{{ url_for('static', filename='i/font-awesome/upload.png') }}">
+      <input type="file" name="fh" autocomplete="off">
       <p class="center" id="max-file-size">Maximum upload size: 500 MB</p>
     </div>
     <div class="message grid-item">
@@ -28,7 +29,9 @@ <h2 class="headline">Submit documents and messages</h2>
 
   <hr class="no-line">
 
-  <button type="submit" class="btn primary"><i class="fa fa-cloud-upload"></i> Submit</button>
+  <button type="submit" class="btn primary">
+  <img src="{{ url_for('static', filename='i/font-awesome/white/cloud-upload.svg') }}" width="17px" height="17px">
+  Submit</button>
 </form>
 
 <p><strong>Tip:</strong> If you are already familiar with GPG, you can optionally encrypt your files and messages with our <a href="/journalist-key" class="text-link">public key</a> before submission. Files are encrypted as they are received by SecureDrop; encrypting before submission provides an extra layer of security before your data reaches SecureDrop. <a href="/why-journalist-key" class="text-link">Learn more</a>.</p>
@@ -47,7 +50,8 @@ <h2 class="headline">Replies</h2>
         <form id="delete" class="message" method="post" action="/delete" autocomplete="off">
           <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
           <input type="hidden" name="reply_filename" value="{{ reply.filename }}" autocomplete="off"/>
-          <a href="#confirm-delete-{{ reply.filename }}" class="delete"><i class="fa fa-trash-o"></i> Delete</a>
+          <a href="#confirm-delete-{{ reply.filename }}" class="delete">
+          <img src="{{ url_for('static', filename='i/font-awesome/black/trash.svg') }}" width="20px" height="20px">
           <div id="confirm-delete-{{ reply.filename }}" class="confirm-prompt">
             <p>Delete this reply?
               <a href="#delete">Cancel</a>
@@ -77,7 +81,8 @@ <h2 class="headline">Replies</h2>
 
 
 <div class="code-reminder">
-  <i class="fa fa-lock pull-left"></i> Remember your codename is:
+
+  <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/black/lock.svg') }}" width="20px" height="20px"> Remember your codename is:
   <div id="show" class="show pull-right"></div>
   <span id="content"><p class="alert"><strong>{{ codename }}</strong></p></span>
 </div>