Django CSP

accounts/forms.py

@@ -65,7 +65,7 @@ def __init__(self, *args, **kwargs):
     def widget_attrs(self, widget):
         """Override - used to update widget attrs in Field initializer."""
         attrs = super().widget_attrs(widget)
-        return {**attrs, "placeholder": "123456", "style": "width: 50%;"}
+        return {**attrs, "placeholder": "123456", "class": "w-50"}
 
 
 class TOTPCheckForm(forms.Form):

project/settings.py

@@ -103,6 +103,7 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "csp.middleware.CSPMiddleware",
 ]
 
 if DEBUG:
@@ -387,3 +388,14 @@
 # https://docs.djangoproject.com/en/4.2/ref/settings/#std:setting-SESSION_COOKIE_HTTPONLY
 # Per the above documentation setting SESSION_COOKIE_HTTPONLY might break JavaScript.
 SESSION_COOKIE_HTTPONLY = True
+
+
+CSP_DEFAULT_SRC = (
+    "'self' data:",
+    "fonts.googleapis.com",
+    "cdnjs.cloudflare.com",
+    "cdn.datatables.net",
+    "cdn.jsdelivr.net",
+    "fonts.gstatic.com",
+    "www.youtube.com",
+)

pyproject.toml

@@ -2,7 +2,7 @@
 name = "lookit-api"
 version = "0.1.0"
 description = ""
-authors = [""]
+authors = ["John Smith <[email protected]>"]
 
 [tool.poetry.dependencies]
 bcrypt = "3.2.0"
@@ -52,6 +52,7 @@ uWSGI = "2.0.19.1"
 pillow = "9.4.0"
 django-bootstrap-icons = "0.8.2"
 js2py = "0.74"
+django-csp = "^3.7"
 
 [tool.poetry.group.dev.dependencies]
 coverage = "^7.2"

web/static/js/study-detail-web.js

@@ -1,9 +1,6 @@
-$('.text-warning').hide();
-$("#child-dropdown").val("none");
-childSelected(document.getElementById('child-dropdown'));
-
-function childSelected(selectElement) {
-    var participateButton = document.getElementById('participate-button');
+function childSelected() {
+    const selectElement = document.getElementById('child-dropdown');
+    const participateButton = document.getElementById('participate-button');
     if (selectElement.value === 'none') {
         participateButton.disabled = true;
         document.getElementById('too-old').classList.add('d-none');
@@ -42,13 +39,13 @@ function calculateAgeInDays(birthday) {
 
 function ageCheck(age) {
     // Adapted from experiment model in exp-addons
-    var minDays;
-    var maxDays;
-    var study_age_criteria = document.getElementById('child-dropdown').dataset;
+    let minDays;
+    let maxDays;
+    const study_age_criteria = document.getElementById('child-dropdown').dataset;
     // These are now hard-coded to avoid unpredictable behavior from moment.duration().asDays()
     // e.g. 1 year = 365 days, 1 month = 30 days, and 1 year + 1 month = 396 days.
-    minDays = parseInt(study_age_criteria.studyMinAgeDays,10) + 30 * parseInt(study_age_criteria.studyMinAgeMonths,10) + 365 * parseInt(study_age_criteria.studyMinAgeYears,10);
-    maxDays = parseInt(study_age_criteria.studyMaxAgeDays,10) + 30 * parseInt(study_age_criteria.studyMaxAgeMonths,10) + 365 * parseInt(study_age_criteria.studyMaxAgeYears,10);
+    minDays = parseInt(study_age_criteria.studyMinAgeDays, 10) + 30 * parseInt(study_age_criteria.studyMinAgeMonths, 10) + 365 * parseInt(study_age_criteria.studyMinAgeYears, 10);
+    maxDays = parseInt(study_age_criteria.studyMaxAgeDays, 10) + 30 * parseInt(study_age_criteria.studyMaxAgeMonths, 10) + 365 * parseInt(study_age_criteria.studyMaxAgeYears, 10);
 
     minDays = minDays || -1;
     maxDays = maxDays || Number.MAX_SAFE_INTEGER;
@@ -61,3 +58,15 @@ function ageCheck(age) {
         return 0;
     }
 }
+
+/**
+ * On Page load
+ */
+$('.text-warning').hide();
+$("#child-dropdown").val("none");
+childSelected();
+
+/**
+ * Event listeners
+ */
+document.querySelector('#child-dropdown')?.addEventListener('change', childSelected)

web/templates/web/scientists/affiliated-universities-and-researchers.html

@@ -4,7 +4,7 @@
 </p>
 {% for section, institutions in institution_sections %}
     <p>{{ section.name }}:</p>
-    <ul style="columns:3">
+    <ul class="three-column-list">
         {% for institution in institutions %}<li>{{ institution.name }}</li>{% endfor %}
     </ul>
 {% endfor %}

web/templates/web/study-detail.html

@@ -109,13 +109,11 @@ <h4 class="mt-4 mb-3">{% trans "Would you like to participate in this study?" %}
                                 data-study-min-age-years="{{ study.min_age_years }}"
                                 data-study-max-age-days="{{ study.max_age_days }}"
                                 data-study-max-age-months="{{ study.max_age_months }}"
-                                data-study-max-age-years="{{ study.max_age_years }}"
-                                onchange="childSelected(this)">
-                            <option value=none>{% trans "None Selected" %}</option>
+                                data-study-max-age-years="{{ study.max_age_years }}">
+                            <option value="none">{% trans "None Selected" %}</option>
                             {% for child in children %}
                                 {% child_is_valid_for_study_criteria child object as child_is_eligible %}
-                                <option onemptied=""
-                                        value="{{ child.uuid }}"
+                                <option value="{{ child.uuid }}"
                                         data-birthdate="{{ child.birthday|date:'c' }}"
                                         data-eligible-participation="{{ child_is_eligible.participation_eligibility }}"
                                         data-eligible-criteria="{{ child_is_eligible.criteria_expression_eligibility }}">