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

GenericPopover re-parses innerHTML while closing, which violates a strict CSP (style-src without 'unsafe-inline')

Offen
  • Stimmt etwas nicht?
#3,209 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
Ein halber Tag
Anfängerfreundlichkeit
62/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Start in packages/react/src/components/Popovers/GenericPopover.tsx, where the snapshot is taken from ref.current.innerHTML and rendered back through dangerouslySetInnerHTML while status === "close". Reproduce by serving the editor under a style-src CSP without 'unsafe-inline' and closing the / menu, then check that closing produces no CSP console errors. Done when the snapshot is kept as cloned DOM nodes, appended in a layout effect during close and removed in its cleanup, and the fade-out looks unchanged.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

needs-triage
What’s broken?

I serve a BlockNote editor (@blocknote/react 0.56.0) under a strict CSP: style-src 'self' 'nonce-<per-response>', no 'unsafe-inline'. The nonce is forwarded to Mantine (see #997 / #792), so everything renders correctly while popovers are open.

But every time a popover closes (the / suggestion menu, the formatting toolbar), the console fills with ~100 errors: Applying inline style violates the following Content Security Policy directive 'style-src …', and the popover fades out with broken styling.

Cause

GenericPopover stores ref.current.innerHTML while the popover is open. When floating-ui reports status === "close", it renders that string again with dangerouslySetInnerHTML so the exit animation shows a frozen copy. The children carry inline style attributes (Mantine CSS variables, positioning). Parsing HTML that contains style="…" attributes is checked against style-src, so every one is blocked.

I checked in Chrome what a CSP without 'unsafe-inline' allows:

  • innerHTML, DOMParser and <template> are all blocked.
  • Node.cloneNode(true) keeps the inline styles and is not blocked.
  • CSSOM writes such as el.style.cssText = … are allowed.
What did you expect to happen?

Closing a popover should not trigger CSP violations under a style-src policy without 'unsafe-inline', and the exit animation should show the popover exactly as it looked while open.

Proposal

Keep the snapshot, but store it as cloned DOM nodes instead of an HTML string:

  • snapshot = useRef<Node[]>([]), filled with Array.from(ref.current.childNodes, n => n.cloneNode(true)) in the same effect that currently reads innerHTML.
  • While status === "close", render the wrapper with no React children. A layout effect (deps [status]) appends the cloned nodes before paint, and its cleanup removes them. Reopening during the fade-out therefore doesn't leave the snapshot next to the real children.
  • dangerouslySetInnerHTML goes away. No API change.

Behaviour is the same as before: the closing popover shows the last open DOM and fades out.

Diff (packages/react/src/components/Popovers/GenericPopover.tsx) 
+import { useIsomorphicLayoutEffect } from "../../util/useIsomorphicLayoutEffect.js";
...
-  const innerHTML = useRef<string>("");
+  // Cloned DOM nodes, not an HTML string: re-parsing HTML (`innerHTML`) is
+  // blocked by a Content Security Policy without `'unsafe-inline'` for the
+  // inline `style` attributes the children carry, while `cloneNode` keeps
+  // the inline styles without going through the CSP check.
+  const snapshot = useRef<Node[]>([]);
...
         if (ref.current && hasChildrenBesidesPortalElementAnchor(ref.current)) {
-          innerHTML.current = ref.current.innerHTML;
+          snapshot.current = Array.from(ref.current.childNodes, (node) =>
+            node.cloneNode(true),
+          );
         }
...
+  // While closing, the wrapper is rendered without React children (see below)
+  // and the snapshot is appended to it here, before paint. The nodes are
+  // removed again when the status changes, so a popover that reopens while
+  // closing doesn't keep them next to its real children.
+  useIsomorphicLayoutEffect(() => {
+    if (status !== "close" || !ref.current) {
+      return;
+    }
+
+    const nodes = snapshot.current;
+    ref.current.append(...nodes);
+
+    return () => {
+      for (const node of nodes) {
+        node.parentNode?.removeChild(node);
+      }
+    };
+  }, [status]);
...
     return (
       <FloatingPortal root={portalElement}>
-        <div
-          ref={mergedRefs}
-          {...mergedProps}
-          dangerouslySetInnerHTML={{ __html: innerHTML.current }}
-        />
+        <div ref={mergedRefs} {...mergedProps} />
       </FloatingPortal>
     );

I've run this as a pnpm patch against 0.56.0 in a strict-CSP build. Opening and closing / and the formatting toolbar gives zero new CSP errors. During the fade-out the wrapper has opacity 0 and a 250 ms transition, and the full clone (23 items / 101 styled descendants) is present, then removed.

Happy to open a PR with this change if you're open to it.

Steps to reproduce
  1. Serve the editor with Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'nonce-…' (plus the usual connect/img directives), forwarding the nonce to Mantine.
  2. Type / to open the suggestion menu, then close it (Escape or click away). The formatting toolbar behaves the same way.
  3. Check the console: ~100 errors per close, Applying inline style violates the following Content Security Policy directive 'style-src …'.
BlockNote version

0.56.0 (main still has the same innerHTML snapshot)

Environment

Chrome (macOS), React 19, Vite build served with a per-response CSP nonce

Additional context

No response

Contribution
  • I'd be interested in contributing a fix for this issue
Sponsor
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖
Vorherrschende Sprache
TypeScript
Sterne
10.3k
Forks
777
Ø Merge
2 T. 18 Std.
Gemergte PRs (30 T.)
41

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 TypeCellOS/BlockNote

Alle Issues in TypeCellOS/BlockNote

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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