From 393aecb8f16d7c881cf27697111436c324516aa6 Mon Sep 17 00:00:00 2001 From: catborise Date: Mon, 2 Nov 2026 08:47:58 +0300 Subject: [PATCH] refactor(templates): the shared page scripts load from static files A step towards a Content-Security-Policy without inline scripts. The scripts every page or many pages share now load from static files: the error focus of base.html, the please-wait dialog, the sign-in forms' password toggle and busy button, the jobs pages' reload while a job runs, and the start of the job panel and of the VM list's state poll, whose values come as json_script data. Cancel links go back through a data-history-back attribute instead of a javascript: URL. The IE8 html5shiv/respond.js block, X-UA-Compatible and shrink-to-fit are gone: no supported browser reads them. --- .../accounts/change_password_form.html | 2 +- .../templates/accounts/email_otp_form.html | 2 +- accounts/templates/accounts/otp_login.html | 31 ++--------------- accounts/templates/login.html | 31 ++--------------- .../templates/instances/vm_states_poll.html | 2 +- instances/tests/test_page_controls.py | 2 +- instances/tests/test_xss.py | 2 -- operations/static/operations/follow_active.js | 6 ++++ .../static/operations/job_panel_start.js | 9 +++++ .../templates/operations/follow_active.html | 9 ++--- .../operations/job_panel_script.html | 9 ++--- operations/templatetags/operations.py | 12 +++++-- static/js/back_links.js | 7 ++++ static/js/error_focus.js | 20 +++++++++++ static/js/login_form.js | 19 +++++++++++ static/js/please_wait.js | 15 +++++++++ static/js/vm_states_start.js | 2 ++ templates/base.html | 33 ++----------------- templates/common/confirm_delete.html | 2 +- templates/common/form.html | 2 +- templates/error.html | 2 +- templates/pleasewaitdialog.html | 19 ++--------- webvirtcloud/tests/test_error_focus.py | 11 ++----- 23 files changed, 112 insertions(+), 137 deletions(-) create mode 100644 operations/static/operations/follow_active.js create mode 100644 operations/static/operations/job_panel_start.js create mode 100644 static/js/back_links.js create mode 100644 static/js/error_focus.js create mode 100644 static/js/login_form.js create mode 100644 static/js/please_wait.js create mode 100644 static/js/vm_states_start.js diff --git a/accounts/templates/accounts/change_password_form.html b/accounts/templates/accounts/change_password_form.html index 046447e8..406fbab9 100644 --- a/accounts/templates/accounts/change_password_form.html +++ b/accounts/templates/accounts/change_password_form.html @@ -21,7 +21,7 @@
- {% bs_icon 'x' %} + {% bs_icon 'x' %} {% trans "Cancel" %}
- {% bs_icon 'arrow-left' %} {% trans "Cancel" %} + {% bs_icon 'arrow-left' %} {% trans "Cancel" %} diff --git a/accounts/templates/accounts/otp_login.html b/accounts/templates/accounts/otp_login.html index e9d1a67d..28fa5d48 100644 --- a/accounts/templates/accounts/otp_login.html +++ b/accounts/templates/accounts/otp_login.html @@ -1,4 +1,5 @@ {% extends "base.html" %} +{% load static %} {% load i18n %} {% load django_bootstrap5 %} @@ -55,7 +56,7 @@
{% trans "Leave empty if you have not set up two-factor authentication." %}
- @@ -72,31 +73,5 @@ {% endblock %} {% block script %} - + {% endblock script %} diff --git a/accounts/templates/login.html b/accounts/templates/login.html index a0898993..a9261a33 100644 --- a/accounts/templates/login.html +++ b/accounts/templates/login.html @@ -1,4 +1,5 @@ {% extends "base.html" %} +{% load static %} {% load i18n %} {% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In" %}{% endblock title %} @@ -44,7 +45,7 @@ - @@ -61,31 +62,5 @@ {% endblock %} {% block script %} - + {% endblock script %} diff --git a/instances/templates/instances/vm_states_poll.html b/instances/templates/instances/vm_states_poll.html index 68c1b1a6..30987931 100644 --- a/instances/templates/instances/vm_states_poll.html +++ b/instances/templates/instances/vm_states_poll.html @@ -2,4 +2,4 @@ {# the VM list reloads when its VMs change: vm_states.js #} {{ states_url|json_script:"vm-states-url" }} - + diff --git a/instances/tests/test_page_controls.py b/instances/tests/test_page_controls.py index 5add20d5..760f3899 100644 --- a/instances/tests/test_page_controls.py +++ b/instances/tests/test_page_controls.py @@ -116,7 +116,7 @@ class PageControlsTestCase(PageControls, TestCase): viewer = self.user("ctl_js_viewer", perms=("view_instances",)) for user in (superuser, viewer): self.controls(user) - scripts = lxml_html.fromstring(self.last_page).xpath("//script[not(@src)]/text()") + scripts = lxml_html.fromstring(self.last_page).xpath("//script[not(@src) and not(@type='application/json')]/text()") for number, script in enumerate(scripts): with self.subTest(user=user.username, script=number): result = subprocess.run( diff --git a/instances/tests/test_xss.py b/instances/tests/test_xss.py index 1f88c196..67742b9b 100644 --- a/instances/tests/test_xss.py +++ b/instances/tests/test_xss.py @@ -134,8 +134,6 @@ class TemplateHtmlConcatenationTestCase(TestCase): # .val() / DOM APIs for server data instead). HTML_SINK = re.compile(r"""\.html\(|innerHTML\s*=|append\(\s*['"]<""") ALLOWED_HTML_SINKS = { - ("accounts/templates/login.html", "$btn.html("): "static spinner markup", - ("accounts/templates/accounts/otp_login.html", "$btn.html("): "static spinner markup", ("instances/templates/instance.html", "hostDevices.innerHTML = html;"): "the panel's own fragment, host_devices_form.html, escaped by Django", ("instances/templates/instance.html", "migratePlan.innerHTML = html;"): "the panel's own fragment, migrate_plan.html, escaped by Django", } diff --git a/operations/static/operations/follow_active.js b/operations/static/operations/follow_active.js new file mode 100644 index 00000000..1ec5f272 --- /dev/null +++ b/operations/static/operations/follow_active.js @@ -0,0 +1,6 @@ +// Reloads the page while it shows an active job, so the page follows the job to its end. +setInterval(function () { + if (!document.hidden && !document.querySelector("form :focus")) { + window.location.reload(); + } +}, 5000); diff --git a/operations/static/operations/job_panel_start.js b/operations/static/operations/job_panel_start.js new file mode 100644 index 00000000..62d334dd --- /dev/null +++ b/operations/static/operations/job_panel_start.js @@ -0,0 +1,9 @@ +// Starts the job panel of a resource page from its settings (job_panel_script tag). +(function () { + var settings = JSON.parse(document.getElementById("job-panel-settings").textContent); + window.resourceJobPanel = jobPanel(document.getElementById("job-panel"), { + resource: settings.resource, + job: function (id) { return settings.jobs + id + "/"; }, + cancel: function (id) { return settings.jobs + id + "/cancel/"; }, + }, settings.csrf_token, settings.remembered); +})(); diff --git a/operations/templates/operations/follow_active.html b/operations/templates/operations/follow_active.html index 574df4de..94ecd8b3 100644 --- a/operations/templates/operations/follow_active.html +++ b/operations/templates/operations/follow_active.html @@ -1,8 +1,3 @@ +{% load static %} {# Reloads the page while it shows an active job, so the page follows the job to its end. #} - + diff --git a/operations/templates/operations/job_panel_script.html b/operations/templates/operations/job_panel_script.html index ad0258f2..8794a7ee 100644 --- a/operations/templates/operations/job_panel_script.html +++ b/operations/templates/operations/job_panel_script.html @@ -1,9 +1,4 @@ {% load static %} +{{ settings|json_script:"job-panel-settings" }} - + diff --git a/operations/templatetags/operations.py b/operations/templatetags/operations.py index 4ca2daf1..7bbbab01 100644 --- a/operations/templatetags/operations.py +++ b/operations/templatetags/operations.py @@ -1,7 +1,9 @@ -import json import uuid +from urllib.parse import quote from django import template +from django.middleware.csrf import get_token +from django.urls import reverse from django.utils.html import format_html, format_html_join from django.utils.safestring import mark_safe from django.utils.timesince import timesince @@ -71,5 +73,9 @@ def wrap_at_slash(label): @register.inclusion_tag("operations/job_panel_script.html", takes_context=True) def job_panel_script(context, resource): """The job panel's script for the page of resource.""" - return {"resource": resource, "csrf_token": context.get("csrf_token"), - "remembered": json.dumps(take_remembered(context["request"], resource))} + return {"settings": { + "resource": reverse("operation-resource") + "?key=" + quote(resource, safe=""), + "jobs": reverse("operation-list"), + "csrf_token": get_token(context["request"]), + "remembered": take_remembered(context["request"], resource), + }} diff --git a/static/js/back_links.js b/static/js/back_links.js new file mode 100644 index 00000000..00bea52e --- /dev/null +++ b/static/js/back_links.js @@ -0,0 +1,7 @@ +// A link marked data-history-back goes back to the previous page. +document.addEventListener("click", function (event) { + if (event.target.closest("[data-history-back]")) { + event.preventDefault(); + history.back(); + } +}); diff --git a/static/js/error_focus.js b/static/js/error_focus.js new file mode 100644 index 00000000..6b0efc5c --- /dev/null +++ b/static/js/error_focus.js @@ -0,0 +1,20 @@ +// After a refused submission, start at the error. The places an error +// can be, most specific first: a refused field, its form's summary, an +// open dialog's copy of the messages (the page's are behind it), the +// page's messages. A page that sets itself up first has +// data-error-focus="manual" and calls this when it is ready. +const ERROR_PLACES = [".is-invalid", ".form-errors", ".modal.show .modal-messages .alert-danger", + "#messages .alert-danger"]; + +function focusFirstError() { + for (const selector of ERROR_PLACES) { + const target = [...document.querySelectorAll(selector)].find(e => e.offsetParent !== null); + if (target) { + if (!target.matches("input, select, textarea")) target.tabIndex = -1; + target.focus(); + return; + } + } +} +window.focusFirstError = focusFirstError; +if (document.body.dataset.errorFocus !== "manual") focusFirstError(); diff --git a/static/js/login_form.js b/static/js/login_form.js new file mode 100644 index 00000000..f03f9764 --- /dev/null +++ b/static/js/login_form.js @@ -0,0 +1,19 @@ +// The sign-in forms (login, OTP login): the eye button shows or hides the +// password; while the form is sent, its button is disabled and says so. +document.getElementById("btn-toggle-pwd").addEventListener("click", function () { + var password = document.getElementById("id_password"); + var shown = password.type === "password"; + password.type = shown ? "text" : "password"; + var icon = document.getElementById("toggle-icon"); + icon.classList.toggle("bi-eye", !shown); + icon.classList.toggle("bi-eye-slash", shown); +}); + +document.getElementById("form-signin").addEventListener("submit", function () { + var button = document.getElementById("btn-signin"); + button.disabled = true; + var spinner = document.createElement("span"); + spinner.className = "spinner-border spinner-border-sm me-2"; + spinner.setAttribute("aria-hidden", "true"); + button.replaceChildren(spinner, button.dataset.busyText); +}); diff --git a/static/js/please_wait.js b/static/js/please_wait.js new file mode 100644 index 00000000..d19a563f --- /dev/null +++ b/static/js/please_wait.js @@ -0,0 +1,15 @@ +// The please-wait dialog (pleasewaitdialog.html) of a page that submits a long request. +function showPleaseWaitDialog() { + var pleaseModal = new bootstrap.Modal(document.getElementById('pleaseWaitDialog'), { + keyboard: false + }); + pleaseModal.show(); + backgroundJobRunning = true; +} +function hidePleaseWaitDialog() { + var pleaseModal = new bootstrap.Modal(document.getElementById('pleaseWaitDialog'), { + keyboard: false + }) + pleaseModal.hide(); + backgroundJobRunning = false; +} diff --git a/static/js/vm_states_start.js b/static/js/vm_states_start.js new file mode 100644 index 00000000..10a7dbab --- /dev/null +++ b/static/js/vm_states_start.js @@ -0,0 +1,2 @@ +// Starts following the VM list's states (vm_states_poll.html). +followVmStates(JSON.parse(document.getElementById("vm-states-url").textContent)); diff --git a/templates/base.html b/templates/base.html index a8d040f3..105e16be 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,8 +5,7 @@ {% get_current_language as LANGUAGE_CODE %} - - + @@ -25,12 +24,6 @@ - - - @@ -90,28 +83,8 @@ - + + {% block script %}{% endblock %} diff --git a/templates/common/confirm_delete.html b/templates/common/confirm_delete.html index 3656cecf..90316a67 100644 --- a/templates/common/confirm_delete.html +++ b/templates/common/confirm_delete.html @@ -22,7 +22,7 @@
- {% trans "Cancel" %} + {% trans "Cancel" %}
diff --git a/templates/common/form.html b/templates/common/form.html index b08aaadd..1a6112d4 100644 --- a/templates/common/form.html +++ b/templates/common/form.html @@ -19,7 +19,7 @@
{% bootstrap_form form %}
- {% trans "Cancel" %} + {% trans "Cancel" %}
diff --git a/templates/error.html b/templates/error.html index d360274e..1bfb489a 100644 --- a/templates/error.html +++ b/templates/error.html @@ -23,7 +23,7 @@
- + {% trans "Back" %} diff --git a/templates/pleasewaitdialog.html b/templates/pleasewaitdialog.html index 448ab277..1a9a1951 100644 --- a/templates/pleasewaitdialog.html +++ b/templates/pleasewaitdialog.html @@ -1,4 +1,4 @@ -{% load i18n %} +{% load i18n static %}
- + diff --git a/webvirtcloud/tests/test_error_focus.py b/webvirtcloud/tests/test_error_focus.py index 27e847ce..307fefe0 100644 --- a/webvirtcloud/tests/test_error_focus.py +++ b/webvirtcloud/tests/test_error_focus.py @@ -1,9 +1,8 @@ -"""After a refused submission the page starts at the error: base.html's -script focuses the first visible invalid field, else the error message. +"""After a refused submission the page starts at the error: error_focus.js +focuses the first visible invalid field, else the error message. The script runs in Node against a stand-in document.""" import json -import re import shutil import subprocess import unittest @@ -11,11 +10,7 @@ from pathlib import Path from django.conf import settings -SCRIPT = re.search( - r"", - Path(settings.BASE_DIR, "templates/base.html").read_text(), - re.S, -).group(1) +SCRIPT = Path(settings.BASE_DIR, "static/js/error_focus.js").read_text() HARNESS = """ const els = %s;