perf: bundle frontend libraries locally

sonar/config.py

@@ -233,30 +233,18 @@ def _(x):
             "'self'",
             "'unsafe-inline'",
             "'unsafe-eval'",
-            "https://code.jquery.com",
-            "https://cdnjs.cloudflare.com",
-            "https://stackpath.bootstrapcdn.com",
             "https://www.googletagmanager.com",
             "https://www.google-analytics.com",
-            "https://cdn.jsdelivr.net",
         ],
         "style-src": [
             "'self'",
             "'unsafe-inline'",
-            "https://cdnjs.cloudflare.com",
-            "https://fonts.googleapis.com",
-            "https://maxcdn.bootstrapcdn.com",
-            "https://cdn.jsdelivr.net",
         ],
         "font-src": [
             "'self'",
             "data:",
             "blob:",
             "'unsafe-inline'",
-            "https://cdnjs.cloudflare.com",
-            "https://fonts.gstatic.com",
-            "https://maxcdn.bootstrapcdn.com",
-            "https://cdn.jsdelivr.net",
         ],
         "img-src": [
             "'self'",
@@ -898,8 +886,6 @@ def _(x):
 
 # WIKI
 # ====
-# Serve the Bootstrap assets from the package, the wiki base template loads them.
-BOOTSTRAP_SERVE_LOCAL = True
 WIKI_CONTENT_DIR = "./data/wiki"
 WIKI_INDEX_DIR = "./data/wiki/_index"
 WIKI_URL_PREFIX = "/<org_code:view>/help"

sonar/modules/documents/templates/documents/record.html

@@ -16,7 +16,7 @@
   {{ schema_org_data | safe }}
 </script>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">
+{{ webpack['sonar-katex.css'] }}
 <style>
   .katex-display {
     display: inline-block !important;
@@ -519,19 +519,8 @@ <h5 class="modal-title" id="preview-title">{{ _('Preview') }}</h5>
 {%- endblock %}
 
 {% block javascript %}
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" integrity="sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-      renderMathInElement(document.body);
-  });
-</script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"
-  integrity="sha512-ubuT8Z88WxezgSqf3RLuNi5lmjstiJcyezx34yIU2gAHonIi27Na7atqzUZCOoY4CExaoFumzOsFQ2Ch+I/HCw=="
-  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
-  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+{{ webpack['sonar-katex.js'] }}
+{{ webpack['sonar-bootstrap.js'] }}
 <script>
   $(document).ready(function () {
     var $iframe = $('#preview-iframe');

sonar/modules/pdf_extractor/templates/test.html

@@ -17,6 +17,7 @@ <h1>PDF metadata extraction</h1>
 
 {%- block javascript %}
 {{ super() }}
+{{ webpack['sonar-bootstrap.js'] }}
 <script src="{{ url_for('static', filename='pdf_extractor/test.js') }}"></script>
 {%- endblock javascript %}
 

sonar/theme/assets/js/sonar/bootstrap.js

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: Fondation RERO+
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// jQuery and the Bootstrap plugins, for the few pages relying on them. Bootstrap
+// pulls Popper in, and the build exposes jQuery on the window as `$` and `jQuery`.
+import "jquery";
+import "bootstrap";

sonar/theme/assets/js/sonar/katex.js

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: Fondation RERO+
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// KaTeX, to typeset the mathematical notations a document carries.
+import renderMathInElement from "katex/contrib/auto-render";
+import "katex/dist/katex.min.css";
+
+document.addEventListener("DOMContentLoaded", function () {
+  renderMathInElement(document.body);
+});

sonar/theme/templates/sonar/macros/macro.html

@@ -117,6 +117,6 @@
 {% macro contributor_icon(contribution) %}
 {%- set types = { 'bf:Meeting': 'fa-solid fa-users', 'bf:Organization': 'fa-solid fa-building', 'bf:Person': 'fa-solid fa-user'} -%}
 {% if contribution.agent.type in types %}
-<i class="fa {{ types[contribution.agent.type] }} mr-1"></i>
+<i class="{{ types[contribution.agent.type] }} mr-1"></i>
 {% endif%}
 {% endmacro %}

sonar/theme/templates/sonar/page.html

@@ -97,13 +97,6 @@
   </style>
   <style type="text/css" data-primeng-style-id="layer-order"></style>
   {{ webpack[get_specific_theme()] }}
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&family=Roboto:wght@300;700&display=swap"
-    rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
-    crossorigin="anonymous">
   {%- endblock css %}
 
   {%- endblock head %}

sonar/theme/templates/sonar/page_wiki.html

@@ -30,6 +30,6 @@
 
 {%- block javascript %}
 {{ super() }}
-{{ bootstrap.load_js() }}
+{{ webpack['sonar-bootstrap.js'] }}
 <script type="text/javascript" src="{{ url_for('wiki.static', filename='js/wiki.js') }}"></script>
 {%- endblock javascript %}

sonar/theme/templates/sonar/projects/detail.html

@@ -95,6 +95,7 @@ <h4>{{ _('Linked documents') }}</h4>
 
 {% block javascript %}
 {{super()}}
+{{ webpack['sonar-bootstrap.js'] }}
 <script>
   $(document).ready(function () {
     $('.affiliation-tooltip').tooltip();

sonar/theme/webpack.py

@@ -17,10 +17,16 @@
         "unifr-theme": "./scss/unifr/theme.scss",
         "fernuni-theme": "./scss/fernuni/theme.scss",
         "preview": "./scss/preview.scss",
+        "sonar-bootstrap": "./js/sonar/bootstrap.js",
+        "sonar-katex": "./js/sonar/katex.js",
     },
     dependencies={
+        # jQuery and Popper are pinned by Bootstrap 4: it accepts no jQuery 4, and
+        # popper.js 1.16.1 is the last release before the incompatible @popperjs/core.
         "bootstrap": "^4.3",
-        "popper.js": "^1.12",
+        "popper.js": "^1.16.1",
+        "jquery": "^3.7",
+        "katex": "^0.16.22",
         "@fortawesome/fontawesome-free": "^7.0.0",
     },
 )

tests/ui/test_views.py

@@ -33,6 +33,51 @@ def test_navbar_search_outside_collapsible_menu(client):
     assert search_field < collapsible_menu
 
 
+def test_assets_are_served_by_the_application(client, db, organisation, document_with_file):
+    """Test that the pages load their scripts and stylesheets from no third-party host."""
+    urls = [
+        url_for("documents.search", view="global"),
+        url_for("invenio_records_ui.doc", view="global", pid_value=document_with_file["pid"]),
+        url_for("wiki.index", view="global"),
+    ]
+
+    # The analytics tag is the one third-party script the application loads on
+    # purpose, from the host the CSP allows in `script-src`.
+    analytics = {"www.googletagmanager.com"}
+
+    for url in urls:
+        res = client.get(url, follow_redirects=True)
+        assert res.status_code == 200
+
+        soup = BeautifulSoup(res.data, "html.parser")
+        assets = [tag["src"] for tag in soup.select("script[src]")]
+        assets += [tag["href"] for tag in soup.select('link[rel="stylesheet"][href]')]
+        assert assets
+        # An asset served by the application has no netloc.
+        hosts = {urlsplit(asset).netloc for asset in assets}
+        assert not hosts - {""} - analytics, url
+
+
+def test_pages_calling_jquery_load_it(client, db, organisation, document_with_file, project, user):
+    """Test that the pages whose scripts call jQuery load the bundle providing it."""
+    login_user_via_view(client, email=user["email"], password="123456")
+
+    urls = [
+        url_for("invenio_records_ui.doc", view="global", pid_value=document_with_file["pid"]),
+        url_for("invenio_records_ui.proj", view="global", pid_value=project.id),
+        url_for("wiki.index", view="global"),
+        "/pdf-extractor/test",
+    ]
+
+    for url in urls:
+        res = client.get(url, follow_redirects=True)
+        assert res.status_code == 200
+
+        soup = BeautifulSoup(res.data, "html.parser")
+        scripts = [tag["src"] for tag in soup.select("script[src]")]
+        assert any("sonar-bootstrap" in src for src in scripts), url
+
+
 def test_robots_txt(app):
     """Test le robots.txt file."""
     with app.test_client() as client: