From b0ac9bbcd61361b85742fe87f603751c4706b681 Mon Sep 17 00:00:00 2001
From: CJ Green <44074998+okaycj@users.noreply.github.com>
Date: Tue, 7 Nov 2023 09:24:34 -0500
Subject: [PATCH 1/4] Add CSP django package

---
 poetry.lock         | 20 +++++++++++++++++++-
 project/settings.py | 12 ++++++++++++
 pyproject.toml      |  3 ++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 2e017c43d..3a59dc822 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -582,6 +582,24 @@ maintainer = ["django", "transifex-client", "zest.releaser[recommended]"]
 pyuca = ["pyuca"]
 test = ["graphene-django", "pytest", "pytest-cov", "pytest-django"]
 
+[[package]]
+name = "django-csp"
+version = "3.7"
+description = "Django Content Security Policy support."
+optional = false
+python-versions = "*"
+files = [
+    {file = "django_csp-3.7-py2.py3-none-any.whl", hash = "sha256:01443a07723f9a479d498bd7bb63571aaa771e690f64bde515db6cdb76e8041a"},
+    {file = "django_csp-3.7.tar.gz", hash = "sha256:01eda02ad3f10261c74131cdc0b5a6a62b7c7ad4fd017fbefb7a14776e0a9727"},
+]
+
+[package.dependencies]
+Django = ">=1.8"
+
+[package.extras]
+jinja2 = ["jinja2 (>=2.9.6)"]
+tests = ["jinja2 (>=2.9.6)", "mock (==1.0.1)", "pep8 (==1.4.6)", "pytest (<4.0)", "pytest-django", "pytest-flakes (==1.0.1)", "pytest-pep8 (==1.0.6)", "six (==1.12.0)"]
+
 [[package]]
 name = "django-dynamic-fixture"
 version = "3.1.2"
@@ -2599,4 +2617,4 @@ testing = ["coverage (>=5.0.3)", "zope.event", "zope.testing"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9 <3.10"
-content-hash = "7c2a75bd53ccf6a151b9f8973c5663cbe06c15e55fbf32da9e6cdec8fa81f9d8"
+content-hash = "af2659f7e3abec861e9e2d0c8508cdedc19e2abdb6063dbf3fe69f2d251a795c"
diff --git a/project/settings.py b/project/settings.py
index 1f887a842..f52e851a3 100644
--- a/project/settings.py
+++ b/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",
+)
diff --git a/pyproject.toml b/pyproject.toml
index 16fd892d4..6cbb4f985 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -2,7 +2,7 @@
 name = "lookit-api"
 version = "0.1.0"
 description = ""
-authors = [""]
+authors = ["John Smith <john@example.com>"]
 
 [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"

From ab8dd9ecc51c596a2d7563d59ab285c0f646caed Mon Sep 17 00:00:00 2001
From: CJ Green <44074998+okaycj@users.noreply.github.com>
Date: Tue, 7 Nov 2023 09:25:03 -0500
Subject: [PATCH 2/4] Remove inline style for 2fa view

---
 accounts/forms.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/accounts/forms.py b/accounts/forms.py
index 605470d03..52f12d2cb 100644
--- a/accounts/forms.py
+++ b/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):

From b96f43b5e9e1400b3ebb0acb429c82d95446b072 Mon Sep 17 00:00:00 2001
From: CJ Green <44074998+okaycj@users.noreply.github.com>
Date: Tue, 7 Nov 2023 09:27:35 -0500
Subject: [PATCH 3/4] Replace inline style on scientists view

---
 .../web/scientists/affiliated-universities-and-researchers.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/templates/web/scientists/affiliated-universities-and-researchers.html b/web/templates/web/scientists/affiliated-universities-and-researchers.html
index 9109632c1..14da9682c 100644
--- a/web/templates/web/scientists/affiliated-universities-and-researchers.html
+++ b/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 %}

From 6e612ea10ceecf40e702a832532e56ee7aa57cd5 Mon Sep 17 00:00:00 2001
From: CJ Green <44074998+okaycj@users.noreply.github.com>
Date: Tue, 7 Nov 2023 09:31:47 -0500
Subject: [PATCH 4/4] Replace inline onchange event

Also there was a misplaced "onemptied" on the option element.
---
 web/static/js/study-detail-web.js   | 31 +++++++++++++++++++----------
 web/templates/web/study-detail.html |  8 +++-----
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/web/static/js/study-detail-web.js b/web/static/js/study-detail-web.js
index b60057332..71bd29d8c 100644
--- a/web/static/js/study-detail-web.js
+++ b/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)
diff --git a/web/templates/web/study-detail.html b/web/templates/web/study-detail.html
index b1691f366..98e47ad2f 100644
--- a/web/templates/web/study-detail.html
+++ b/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 }}">