tech: Remove inline CSS usage (#600)

* chore: Add CSP headers for dev environment
* tech: Remove inline CSS
* fix: Prevent ajax call if handle is empty

Pipfile

@@ -24,4 +24,5 @@ whitenoise = "~=6.2.0"
 
 [dev-packages]
 autopep8 = "~=1.6"
+django-csp = "~=3.7"
 flake8 = "~=4.0"

docker/Dockerfile

@@ -25,7 +25,7 @@ COPY --from=apkeep-download /tmp/apkeep /usr/local/bin/apkeep
 WORKDIR /opt
 
 COPY ./Pipfile* /opt/
-RUN pipenv install --ignore-pipfile --system
+RUN pipenv install --ignore-pipfile --system --dev
 
 WORKDIR /exodus/exodus
 

exodus/analysis_query/templates/query_submit.html

@@ -59,7 +59,7 @@ <h1 class="main-title">
           read our <a target="_blank" rel="noreferrer" href='https://exodus-privacy.eu.org/en/post/covid/'>blog post</a>
         </div>
 
-        <div id="reports" style="display: none" class="alert alert-info">
+        <div id="reports" class="alert alert-info d-none">
         </div>
 
         <div class="row justify-content-center mb-5">
@@ -74,8 +74,8 @@ <h1 class="main-title">
           </p>
         {% endif %}
 
-        <div id="loading" class="text-center" style="display:none;">
-          <img style="width:200px;" src="/static/img/loading.gif" alt="">
+        <div id="loading" class="text-center d-none">
+          <img class="w-200px" src="/static/img/loading.gif" alt="">
           <div class="alert alert-light" role="alert">
             {% trans "The analysis could take a long time, you will be automatically redirected to the report." %}
           </div>
@@ -122,7 +122,7 @@ <h1 class="main-title">
       jQuery.get("/api/search/" + handle + "/latest", function (rq) {
         if (rq.id) {
           jQuery("#reports").html('')
-          jQuery("#reports").show()
+          jQuery("#reports").removeClass('d-none')
 
           var p = document.createElement('p')
           var name = handle
@@ -157,7 +157,7 @@ <h1 class="main-title">
     const gplay_regex = /id=((?:\w+\.)+\w+)/gmi;
     const fdroid_regex = /packages\/((?:\w+\.)+\w+)/gmi;
     const handle = jQuery.trim(jQuery(this).val())
-    jQuery("#reports").hide()
+    jQuery("#reports").addClass('d-none')
     if (handle.startsWith("https://play.google.com")) {
       var match = gplay_regex.exec(handle)
       while (match != null) {

exodus/analysis_query/templates/query_upload.html

@@ -32,17 +32,17 @@ <h1 class="main-title">
         <label for="apk_file_name"><b>{% trans "Upload an application" %}</b></label>
         <div class="input-group">
           <label class="input-group-btn">
-              <span class="btn btn-primary">
-                  {% trans "Browse file" %}<input type="file" required name="apk" id="id_apk" style="display: none;">
-              </span>
+            <span class="btn btn-primary">
+              {% trans "Browse file" %}<input type="file" required name="apk" id="id_apk" class="d-none">
+            </span>
           </label>
           <input id="apk_file_name" type="text" class="form-control" readonly>
         </div>
         <p class="form-text text-muted mb-4">
           {% trans "Only works with APK files." %}
         </p>
 
-        <div id="reports" style="display: none" class="alert alert-info">
+        <div id="reports" class="alert alert-info d-none">
         </div>
 
         <div class="row justify-content-center mb-5">
@@ -51,8 +51,8 @@ <h1 class="main-title">
           </div>
         </div>
 
-        <div id="loading" class="text-center" style="display:none;">
-          <img style="width:200px;" src="/static/img/loading.gif" alt="">
+        <div id="loading" class="text-center d-none">
+          <img class="w-200px" src="/static/img/loading.gif" alt="">
           <div class="alert alert-light" role="alert">
             {% trans "The analysis could take a long time, you will be automatically redirected to the report." %}
           </div>
@@ -77,29 +77,28 @@ <h1 class="main-title">
 
 {% block scripts %}
 <script>
-// Spinner
-var show_spinner=function(){
-  if( $("#apk_file_name").val() ) {
-    var s = document.getElementById("loading")
-    if(s != undefined){
-      s.style.display = "block"
+  // Spinner
+  var show_spinner = function () {
+    if ($("#apk_file_name").val()) {
+      var s = document.getElementById("loading")
+      if (s != undefined) {
+        s.style.display = "block"
+      }
     }
   }
-}
-$(function() {
-  $(document).on('change', ':file', function() {
-    var input = $(this),
+  $(function () {
+    $(document).on('change', ':file', function () {
+      var input = $(this),
         label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
-    input.trigger('fileselect', label);
-    $("#handle")[0].value = ""
-  });
+      input.trigger('fileselect', label);
+    });
 
-  $(document).ready( function() {
-      $(':file').on('fileselect', function(event, label) {
-          var input = $(this).parents('.input-group').find(':text')
-          input.val(label)
+    $(document).ready(function () {
+      $(':file').on('fileselect', function (event, label) {
+        var input = $(this).parents('.input-group').find(':text')
+        input.val(label)
       });
+    });
   });
-});
 </script>
 {% endblock %}

exodus/analysis_query/templates/query_wait.html

@@ -13,17 +13,17 @@ <h1 id="main-title" class="main-title">
 
 <div class="row justify-content-sm-center">
   <div class="col-md-8 col-12 col-centered mb-4">
-    <div id="loading" class="text-center" style="">
+    <div id="loading" class="text-center">
       <div id="description" class="alert alert-info" role="alert">
         {% trans analysis.description %}
       </div>
-      <p id="completed" style="display:none" class="text-center mt-5">
+      <p id="completed" class="text-center mt-5 d-none">
         <img src="{% static 'img/analysis_completed.png' %}" width="120">
       </p>
-      <p id="report" style="display:none" class="mt-4">
+      <p id="report" class="mt-4 d-none">
         <a href="#" class="btn btn-primary">{% trans "See the report" %}</a>
       </p>
-      <img id="snake" style="display:none" style="width:200px;" src="/static/img/loading.gif" alt="">
+      <img id="snake" class="d-none w-200px" src="/static/img/loading.gif" alt="">
       <div id="refresh" class="text-muted small">
         {% trans "Will refresh automatically every 10 seconds." %}
       </div>
@@ -47,29 +47,27 @@ <h1 id="main-title" class="main-title">
 
 {% block scripts %}
 <script>
-  const refresh = function(){
-    console.log("Refresh")
-
-    jQuery.get("/analysis/{{analysis.id}}/json", function(rq){
+  const refresh = function () {
+    jQuery.get("/analysis/{{analysis.id}}/json", function (rq) {
       jQuery("#description").removeClass("alert-danger alert-info")
       jQuery("#description").html(rq.description)
-      if(rq.in_error){
+      if (rq.in_error) {
         jQuery("#description").addClass("alert-danger")
       } else {
         jQuery("#description").addClass("alert-info")
       }
-      if(rq.processed){
-        jQuery("#snake").hide()
-        jQuery("#refresh").hide()
+      if (rq.processed) {
+        jQuery("#snake").addClass('d-none')
+        jQuery("#refresh").addClass('d-none')
         jQuery("#main-title").text("{% trans 'Analysis done!' %}")
-        jQuery("#completed").show()
-        if(!rq.in_error){
-          jQuery("#report").children(":first").attr("href", "/reports/"+rq.report_id+"/")
-          jQuery("#report").show()
+        jQuery("#completed").removeClass('d-none')
+        if (!rq.in_error) {
+          jQuery("#report").children(":first").attr("href", "/reports/" + rq.report_id + "/")
+          jQuery("#report").removeClass('d-none')
         }
       } else {
-        jQuery("#snake").show()
-        jQuery("#report").hide()
+        jQuery("#snake").removeClass('d-none')
+        jQuery("#report").addClass('d-none')
         setTimeout(function () {
           refresh()
         }, 10 * 1000);

exodus/exodus/settings/common_dev.py

@@ -23,3 +23,17 @@
     INSTALLED_APPS = [customization] + INSTALLED_APPS
 
 CSRF_COOKIE_SECURE = env.bool('EXODUS_CSRF_COOKIE_SECURE', default=True)
+
+MIDDLEWARE += ['csp.middleware.CSPMiddleware']
+
+CSP_DEFAULT_SRC = ("'none'")
+CSP_BASE_URI = ("'self'")
+CSP_CONNECT_SRC = ("'self'")
+CSP_FORM_ACTION = ("'self'")
+CSP_FRAME_ANCESTORS = ("'self'")
+CSP_FRAME_SRC = ("'none'")
+CSP_IMG_SRC = ("'self'", "data:")
+CSP_MEDIA_SRC = ("'self'")
+CSP_OBJECT_SRC = ("'self'")
+CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'", "'unsafe-eval'")
+CSP_STYLE_SRC = ("'self'")

exodus/reports/templates/report_details.html

@@ -150,14 +150,14 @@ <h3>
             {% if perm.group_icon %}
               {% autoescape off %}{{ perm.group_icon }}{% endautoescape %}
             {% else %}
-              <span style="padding-left:28px"</span>
+              <span class="p-l-28px" </span>
             {% endif %}
             {% if perm.severity == 'Special' or perm.severity == 'Dangerous' %}
               &nbsp;<img  data-toggle="tooltip" data-placement="top" title="Protection level: {{ perm.protection_level }}" src="/static/img/danger.svg">&nbsp;
             {% endif %}
             <span data-toggle="tooltip" data-placement="top" title="{{ perm.prefix }}.{{ perm.short_name }}">{{ perm.short_name }}</span>
             {% if perm.label %}
-              <small style="display:block; padding-left:28px"><i>{{ perm.label }}</i></small>
+              <small class="d-block p-l-28px"><i>{{ perm.label }}</i></small>
             {% endif %}
           </p>
         {% endfor %}

exodus/reports/templates/reports_home.html

@@ -5,7 +5,7 @@
 {% load static %}
 <div class="row justify-content-md-center">
   <div class="col-lg-8 col-centered">
-    <div style="text-align:center">
+    <div class="text-center">
       <h1 class="main-title">
         {% trans "Reports" %}
       </h1>

exodus/reports/templates/reports_list.html

@@ -6,7 +6,7 @@
 <div class="row justify-content-md-center">
   <div class="col-lg-8 col-centered">
     {% if reports %}
-    <div style="text-align:center">
+    <div class="text-center">
       <h1 class="main-title">
         {% trans "Reports" %}
       </h1>