CSP: Enable Content Security Policies (#5186)

Changelog.md

@@ -24,6 +24,7 @@
 - Ensure that browsers cache the correct state of overall comments when marking (#5173)
 - Ensure that graders are shown the correct annotation categories (#5181)
 - Show informative error message if an uploaded criteria yaml file did not contain a "type" key (#5184)
+- Enable content security policies (#5186)
 - Allow for multiple custom validation messages (#5194)
 - Add ability to hold shift to select a range of values in checkbox tables (#5182)
 - Update ssh authorization to be more flexible, secure, and permit a single user to use the same public key for multiple instances (#5199)

app/assets/javascripts/Components/autotest_manager.jsx

@@ -57,7 +57,7 @@ class AutotestManager extends React.Component {
   };
 
   toggleFormChanged = (value) => {
-    this.setState({form_changed: value}, () => set_onbeforeunload(this.state.form_changed));
+    this.setState({form_changed: value});
   };
 
   handleCreateFiles = (files, unzip) => {

app/assets/javascripts/Components/groups_manager.jsx

@@ -64,6 +64,11 @@ class GroupsManager extends React.Component {
     } else {
       modalCreate.open();
       $('#new_group_name').val('');
+      $(function() {
+        $('#modal-create-close').click(function() {
+          modalCreate.close();
+        })
+      })
     }
   };
 

app/assets/javascripts/Components/starter_file_manager.jsx

@@ -30,7 +30,7 @@ class StarterFileManager extends React.Component {
   }
 
   toggleFormChanged = (value) => {
-    this.setState({form_changed: value}, () => set_onbeforeunload(this.state.form_changed));
+    this.setState({form_changed: value});
   };
 
   fetchData = () => {

app/assets/javascripts/SourceCodeGlower/SyntaxHighlighter1p5Adapter.js

@@ -65,6 +65,7 @@ SyntaxHighlighter1p5Adapter.prototype.applyMods = function() {
   // Get rid of some commands and add font size commands
   delete original_commands['CopyToClipboard'];
   delete original_commands['PrintSource'];
+  delete original_commands['ExpandSource'];
 
   original_commands["BoostCode"] = {
     label: '+A',
@@ -93,6 +94,20 @@ SyntaxHighlighter1p5Adapter.prototype.applyMods = function() {
 
   // Attempt to replace tools menu with these new commands
   if (!!document.getElementsByClassName('tools')[0]) {
-    document.getElementsByClassName('tools')[0].innerHTML = dp.sh.Toolbar.Create('code').innerHTML;
+    let tools = document.getElementsByClassName('tools')[0];
+    tools.innerHTML = '';
+    Object.entries(original_commands).forEach(entry => {
+      let [name, {label}] = entry;
+      let tool = document.createElement('a');
+      let href = document.createAttribute('href');
+      href.value = '#';
+      tool.setAttributeNode(href);
+      tool.addEventListener('click', (e) => {
+        dp.sh.Toolbar.Command(name, e.target);
+        e.preventDefault();
+      });
+      tool.innerText = label;
+      tools.appendChild(tool);
+    });
   }
 }

app/assets/javascripts/ajax_events.js

@@ -35,10 +35,14 @@ export function renderFlash(event, request) {
         const messages = flashMessage.split(';');
         const contents = flashDiv.getElementsByClassName('flash-content')[0] || flashDiv;
         contents.innerHTML = '';
-        messages.forEach(message => {
-          contents.insertAdjacentHTML('beforeend', message);
-        });
-        flashDiv.style.display = '';
+        if (messages.length) {
+          messages.forEach(message => {
+            contents.insertAdjacentHTML('beforeend', message);
+          });
+          flashDiv.style.display = 'block';
+        } else {
+          flashDiv.style.display = 'none';
+        }
       }
     }
   });

app/assets/javascripts/modals.js

@@ -46,5 +46,8 @@ $(document).ready(() => {
   $('.dialog').each((_, dialog) => {
     let open_link = dialog.getAttribute('data-open-link') || undefined;
     new ModalMarkus('#' + dialog.id, open_link);
+    $('#' + dialog.id + '-close').click(function() {
+      dialog.close();
+    });
   })
 });

app/assets/javascripts/redirect.js

@@ -1,7 +1,11 @@
 $(document).ready(() => {
   $(document).ajaxError((event, xhr) => {
     if (xhr.status === 403) {
-      session_expired_modal.open()
+      session_expired_modal.open();
+      $('#session-expired-modal-close').click(function() {
+        session_expired_modal.close();
+        window.location.reload();
+      });
     }
   });
 });

app/assets/stylesheets/common/_annotations_dialog.scss

@@ -0,0 +1,3 @@
+.annotation_dialog {
+  width: 600px;
+}

app/assets/stylesheets/common/_markus.scss

@@ -8,6 +8,7 @@
 @import 'mixins';
 @import 'modals';
 @import 'notes_dialog';
+@import 'annotations_dialog';
 @import 'icons';
 @import 'react_json_schema_form';
 @import 'react_tabs';
@@ -37,6 +38,8 @@ body {
 
 .flex-row-expand {
   flex-grow: 1;
+  height: 100%;
+  margin-left: 10px;
 }
 
 
@@ -157,6 +160,14 @@ strong a {
   width: 2em;
 }
 
+.no-display {
+  display: none;
+}
+
+.flex-display {
+  display: flex;
+}
+
 /** Text and number field inputs */
 
 input,
@@ -346,6 +357,10 @@ fieldset {
   grid-template-columns: max-content max-content;
   row-gap: 10px;
 
+  &.required-file-wrapper {
+    padding-bottom: 0.75em;
+  }
+
   label {
     text-align: right;
   }
@@ -522,6 +537,22 @@ kbd {
 .pane-wrapper {
   display: flex;
 
+  .annotation-pane-wrapper {
+    width: 25%;
+  }
+
+  .criteria-pane-wrapper {
+    width: 37%;
+  }
+
+  &.mid-height {
+    height: calc(70vh);
+  }
+
+  &.small-bottom-margin {
+    margin-bottom: 1em;
+  }
+
   .pane {
     border: 1px solid $primary-three;
     border-radius: $radius;
@@ -537,6 +568,20 @@ kbd {
       background-color: $pane-highlight;
     }
 
+    &.assignment-list-wrapper {
+      flex: 0.5;
+      width: 400px;
+    }
+
+    &.scrollable {
+      overflow-y: scroll;
+    }
+
+    &.slim-fixed {
+      flex: 0 auto;
+      width: 29.5%;
+    }
+
     // TODO: decide whether to adopt this style more broadly
     // (currently only used in assignments/show and assignments/peer_review)
     &.block {
@@ -1077,6 +1122,10 @@ nav {
   position: relative;  // For image annotations
 }
 
+#crop-target {
+  border: 1px solid black;
+  max-width: 400px;
+}
 
 // Text editing and previews
 .preview {
@@ -1251,3 +1300,24 @@ nav {
   }
 }
 
+// Styling for grade_entry_forms/_form.html
+
+.grade-entry-items-wrapper {
+  margin-top: 1em;
+}
+
+.add-new-button-wrapper {
+  float: right;
+}
+
+// Styling for graphs
+
+.ta-grade-distribution-graph-wrapper {
+  display: inline-block;
+  width: 400px;
+}
+
+#gef_data_chart {
+  padding-bottom: 0;
+  text-align: center;
+}

app/assets/stylesheets/common/core.scss

@@ -243,6 +243,21 @@ label.required::after, th.required::after {
   clear: both;
 }
 
+// indents
+
+.indent {
+  margin-left: 15px;
+}
+
+.small-indent {
+  margin-left: 10px;
+}
+
+// text boxes
+
+.word-break-all {
+  word-break: break-all;
+}
 
 // Customize react-table styling
 .ReactTable {

app/controllers/annotation_categories_controller.rb

@@ -9,6 +9,12 @@ class AnnotationCategoriesController < ApplicationController
 
   responders :flash
 
+  content_security_policy only: :index do |p|
+    # required because MathJax dynamically changes
+    # style. # TODO: remove this when possible
+    p.style_src :self, "'unsafe-inline'"
+  end
+
   def index
     @assignment = Assignment.find(params[:assignment_id])
     @annotation_categories = AnnotationCategory.visible_categories(@assignment, current_user)

app/controllers/assignments_controller.rb

@@ -3,6 +3,12 @@ class AssignmentsController < ApplicationController
   responders :flash
   before_action { authorize! }
 
+  content_security_policy only: [:edit, :new] do |p|
+    # required because jquery-ui-timepicker-addon inserts style
+    # dynamically. TODO: remove this when possible
+    p.style_src :self, "'unsafe-inline'"
+  end
+
   # Publicly accessible actions ---------------------------------------
 
   def show

app/controllers/automated_tests_controller.rb

@@ -3,6 +3,16 @@ class AutomatedTestsController < ApplicationController
 
   before_action { authorize! }
 
+  content_security_policy only: :manage do |p|
+    # required because jquery-ui-timepicker-addon inserts style
+    # dynamically. TODO: remove this when possible
+    p.style_src :self, "'unsafe-inline'"
+    # required because react-jsonschema-form uses ajv which calls
+    # eval (javascript) and creates an image as a blob.
+    # TODO: remove this when possible
+    p.script_src :self, "'strict-dynamic'", "'unsafe-eval'"
+  end
+
   def update
     assignment = Assignment.find(params[:assignment_id])
     test_specs = params[:schema_form_data]

app/controllers/exam_templates_controller.rb

@@ -7,6 +7,10 @@ class ExamTemplatesController < ApplicationController
 
   layout 'assignment_content'
 
+  content_security_policy only: [:assign_errors] do |p|
+    p.img_src :self, :blob
+  end
+
   def index
     @assignment = Assignment.find(params[:assignment_id])
     @exam_templates = @assignment.exam_templates.includes(:template_divisions)

app/controllers/groups_controller.rb

@@ -6,6 +6,10 @@ class GroupsController < ApplicationController
   before_action { authorize! }
   layout 'assignment_content'
 
+  content_security_policy only: [:assign_scans] do |p|
+    p.img_src :self, :blob
+  end
+
   # Group administration functions -----------------------------------------
   # Verify that all functions below are included in the authorize filter above
 

app/controllers/main_controller.rb

@@ -280,11 +280,7 @@ def clear_role_switch_session
   end
 
   def check_timeout
-    if check_imminent_expiry
-      render js: 'timeout_imminent_modal.open()'
-    else
-      head :ok
-    end
+    head :ok unless check_imminent_expiry
   end
 
   def refresh_session

app/controllers/results_controller.rb

@@ -4,6 +4,17 @@ class ResultsController < ApplicationController
                 only: [:update_remark_request, :cancel_remark_request,
                        :set_released_to_students]
 
+  content_security_policy only: [:edit, :view_marks] do |p|
+    # required because heic2any uses libheif which calls
+    # eval (javascript) and creates an image as a blob.
+    # TODO: remove this when possible
+    p.script_src :self, "'strict-dynamic'", "'unsafe-eval'"
+    p.img_src :self, :blob
+    # required because MathJax dynamically changes
+    # style. # TODO: remove this when possible
+    p.style_src :self, "'unsafe-inline'"
+  end
+
   def show
     respond_to do |format|
       format.json do

app/controllers/submissions_controller.rb

@@ -3,6 +3,14 @@ class SubmissionsController < ApplicationController
   include RepositoryHelper
   before_action { authorize! }
 
+  content_security_policy only: [:repo_browser, :file_manager] do |p|
+    # required because heic2any uses libheif which calls
+    # eval (javascript) and creates an image as a blob.
+    # TODO: remove this when possible
+    p.script_src :self, "'strict-dynamic'", "'unsafe-eval'"
+    p.img_src :self, :blob
+  end
+
   def index
     respond_to do |format|
       format.json do

app/views/admins/index.html.erb

@@ -1,9 +1,9 @@
 <% content_for :head do %>
-  <script>
+  <%= javascript_tag nonce: true do %>
     document.addEventListener('DOMContentLoaded', () => {
       makeAdminTable(document.getElementById('admins_table'));
     })
-  </script>
+  <% end %>
 <% end %>
 
 <% content_for :title do %>