Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Inline event handlers in sub-app HTML survive the build: dead under CSP, and a dark-mode leak without it

Geschlossen
  • Stimmt etwas nicht?
#67 0 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@oto-macenauer-absa arbeitet bereits daran.

Seit 14.8.2026.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
50/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
html, javascript
Bereich
build-system, documentation

Rechercherichtung

Beginnen Sie in src/utils/transform.js, wo die Verarbeitung von Inline-<script> implementiert ist, und fügen Sie Richtlinienlogik für on*-Ereignisattribute in derselben Transformationspipeline hinzu. Prüfen Sie scripts/hoist-inline-scripts.js und das docs-example-onclick-Snippet auf das erwartete Verhalten. Erweitern Sie anschließend tests/build-integrity.spec.js, sodass überprüft wird, dass die Ausgabe keine Inline-Event-Handler-Attribute enthält. Aktualisieren Sie contract/HEADLESS_RULES.md entsprechend; als erledigt gilt die Aufgabe, wenn die Tests bestehen und die neue Invariante in dieser Regeldatei dokumentiert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Summary

The "nothing inline in the output" invariant is enforced for <script> elements only. Inline event-handler attributes are neither hoisted nor stripped, and script-src 'self' blocks them exactly like an inline script.

The vendored docs-example fixture ships one, and it reaches dist/:

<button id="theme-toggle" aria-label="Toggle theme" onclick="
  const r=document.getElementById('docs-root');
  r.classList.toggle('dark');
  localStorage.setItem('theme',r.classList.contains('dark')?'dark':'light');
">

Two problems

  1. It is dead code in production. script-src 'self' with no 'unsafe-inline' blocks inline handlers, so the button is inert and logs a CSP violation when clicked. scripts/hoist-inline-scripts.js exists precisely so that already-published bundles keep working under the policy; it does not cover this case, so any doc app whose interactivity is written as onclick= is quietly broken instead.
  2. It is a light-only leak wherever the CSP is absent. astro dev and astro preview serve no CSP, so there the toggle works and adds dark to the sub-app root — the exact thing transform.js strips the theme bootstrap to prevent (#48).

tests/build-integrity.spec.js asserts every <script> has a src, which is why this got through. Nothing asserts on on* attributes.

Suggested fix

Decide between the two available policies and apply it in src/utils/transform.js, where the document is already parsed:

  • Strip on* attributes. Honest about what production does — the handler cannot run anyway — and closes the dev-mode dark leak. Cost: a doc app's inline interactivity disappears rather than failing loudly.
  • Hoist them, the way <script> bodies are hoisted: turn onclick="…" into a listener registered from a generated file. Preserves behaviour, but needs a stable element handle and is a good deal more machinery.

Either way, add the assertion to tests/build-integrity.spec.js so the invariant covers attributes and not just elements, and say so in contract/HEADLESS_RULES.md — this is a rule onboarding repositories need to know about.

Separately worth deciding whether the docs-example fixture should keep shipping a dark-mode toggle at all, given the marketplace is light-only.

Vorherrschende Sprache
JavaScript
Sterne
0
Forks
0
Ø Merge
20 Min.
Gemergte PRs (30 T.)
8

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus AbsaOSS/knowledge-base

Alle Issues in AbsaOSS/knowledge-base

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.