Changeset 59f404a in Klonkt

Timestamp:

09/04/2026 11:21:16 AM (4 days ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

4425cc2

Parents:

b5a0268c

Message:

De laatste twee scripts uit gewisselde inhoud (shaer-0i6)

shaer-bqr haalde de eigen logica van paid-gate en paid-passkey al uit de
pagina naar een module, maar liet de WebAuthn-bibliotheek als losse tag in
de body staan. Beide pagina's gaan via renderPage, dus bij een navigatie
binnen de site komen ze als fragment binnen -- met de nonce van dat
verzoek, die het al geladen document niet kent. Precies de vorm die Bart
destijds gemeld zag.

Het gevolg was stil: de module laadde wel, vond window.SimpleWebAuthn-
Browser niet, en viel terug op "geen WebAuthn hier". De passkey-knop deed
niets; de ontgrendelknop verdween. Alleen na een harde herlading werkte
het, en dat is precies waarom dit lang onzichtbaar bleef.

De modules halen de bibliotheek nu zelf op met loadWebAuthn() in lib.js.
Een dynamische import vanuit een module die de shell met een geldige nonce
startte is toegestaan -- daar is strict-dynamic voor. De UMD-bundel zet
zichzelf zonder CommonJS of AMD op globalThis, dus de global staat er na
afloop. init() wacht erop voordat hij bedraadt, anders zet de terugval de
knop uit terwijl er niets aan de hand is.

Verder nagelopen wat nog meer een scripttag draagt: vijf views hebben er
een van type application/json (een datablok, dat voert de browser nooit
uit) en twee gaan via res.render in plaats van renderPage -- losse
documenten die htmx nooit inwisselt. Die staan als uitzondering in de
nieuwe toets, met een tweede toets die controleert dat ze nog bestaan,
zodat een hernoeming de uitzondering niet stilletjes uitholt.

MOD_V naar 63: er wijzigde iets in mod/.

Files:

• src/assets/js/mod/lib.js (modified) (1 diff)
• src/assets/js/mod/paid-gate.js (modified) (1 diff)
• src/assets/js/mod/paid-passkey.js (modified) (1 diff)
• src/views/pages/paid-gate.ejs (modified) (1 diff)
• src/views/pages/paid-passkey.ejs (modified) (1 diff)
• src/views/shell.ejs (modified) (1 diff)
• test/csp-no-swapped-scripts.test.js (added)

src/assets/js/mod/lib.js

@@ -64 +64 @@
   });
 }
+
+/**
+ * De WebAuthn-bibliotheek erbij halen, vanuit JavaScript (shaer-0i6).
+ *
+ * Hij stond als `<script src>` in paid-gate.ejs en paid-passkey.ejs, en dat
+ * werkt alleen bij een volledige laadbeurt. Kom je op zo'n pagina via een link
+ * BINNEN de site, dan is het een htmx-fragment met de nonce van een ANDER
+ * verzoek, en weigert de CSP hem. Het gevolg was stil: de module laadde wel,
+ * vond `window.SimpleWebAuthnBrowser` niet, en de knop deed niets -- op het
+ * passkey- en betaalpad.
+ *
+ * Een dynamische import vanuit deze module mag wel: de shell startte hem met
+ * een geldige nonce, en `strict-dynamic` bestaat er juist voor dat vertrouwde
+ * scripts verder mogen laden. Het bestand is een UMD-bundel; zonder CommonJS
+ * of AMD zet die zichzelf op globalThis, dus na afloop staat de global er.
+ *
+ * Faalt het laden, dan geeft dit undefined terug en niet een fout: beide
+ * aanroepers hebben al een nette terugval voor "geen WebAuthn hier".
+ */
+export async function loadWebAuthn() {
+  if (window.SimpleWebAuthnBrowser) return window.SimpleWebAuthnBrowser;
+  try { await import('/assets/vendor/simplewebauthn-browser.umd.min.js'); }
+  catch (e) { console.warn('[paid] WebAuthn-bibliotheek laadt niet:', e && e.message); }
+  return window.SimpleWebAuthnBrowser;
+}

src/assets/js/mod/paid-gate.js

@@ -5 +5 @@
 // interpolatie kan niet in een statisch bestand.
 
-import { pageData } from './lib.js';
+import { pageData, loadWebAuthn } from './lib.js';
 
 // Element-bedrading leeft zo lang als de pagina; de bootstrap roept init()
 // aan bij elke paginawissel waarop deze module actief is (shaer-5s1).
-export function init() { run(); }
+//
+// EERST de bibliotheek, dan pas bedraden (shaer-0i6): die stond als
+// `<script src>` in de pagina en overleefde een htmx-navigatie niet. Wacht
+// run() daar niet op, dan valt hij terug op "geen WebAuthn" en verbergt hij
+// de ontgrendelknop op een pagina waar ontgrendelen gewoon kan.
+export async function init() { await loadWebAuthn(); run(); }
 
 function run() {

src/assets/js/mod/paid-passkey.js

@@ -5 +5 @@
 // interpolatie kan niet in een statisch bestand.
 
-import { pageData } from './lib.js';
+import { pageData, loadWebAuthn } from './lib.js';
 
 // Element-bedrading leeft zo lang als de pagina; de bootstrap roept init()
 // aan bij elke paginawissel waarop deze module actief is (shaer-5s1).
-export function init() { run(); }
+//
+// EERST de bibliotheek, dan pas bedraden (shaer-0i6): die stond als
+// `<script src>` in de pagina en overleefde een htmx-navigatie niet. Wacht
+// run() daar niet op, dan ziet hij de global nog niet staan en zet hij de
+// knop uit terwijl er niets aan de hand is.
+export async function init() { await loadWebAuthn(); run(); }
 
 function run() {

src/views/pages/paid-gate.ejs

@@ -38 +38 @@
 </article>
 
-<script src="/assets/vendor/simplewebauthn-browser.umd.min.js"></script>
-<%# Het script staat in assets/js/mod/paid-gate.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
+<%# Het script staat in assets/js/mod/paid-gate.js; de gegevens via partials/page-data.ejs (shaer-bqr).
+    De WebAuthn-bibliotheek stond hier als `<script src>` en is weg (shaer-0i6):
+    deze pagina komt via een link binnen de site als htmx-fragment binnen, en
+    dan draagt zo'n tag de nonce van een ander verzoek en weigert de CSP hem.
+    De module haalt hem nu zelf op met loadWebAuthn() uit lib.js. %>
 
 <style>

src/views/pages/paid-passkey.ejs

@@ -11 +11 @@
 </section>
 
-<script src="/assets/vendor/simplewebauthn-browser.umd.min.js"></script>
-<%# Het script staat in assets/js/mod/paid-passkey.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
+<%# Het script staat in assets/js/mod/paid-passkey.js; de gegevens via partials/page-data.ejs (shaer-bqr).
+    De WebAuthn-bibliotheek stond hier als `<script src>` en is weg (shaer-0i6):
+    deze pagina komt via een link binnen de site als htmx-fragment binnen, en
+    dan draagt zo'n tag de nonce van een ander verzoek en weigert de CSP hem.
+    De module haalt hem nu zelf op met loadWebAuthn() uit lib.js. %>
 
 <style>

src/views/shell.ejs

@@ -505 +505 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 62;
+  var MOD_V = 63;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module