Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#3,209 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
Meio dia
Facilidade para iniciantes
62/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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 💖
Linguagem predominante
TypeScript
Estrelas
10.3k
Forks
777
Merge médio
2d 18h
PRs com merge (30d)
41

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TypeCellOS/BlockNote

Todas as issues de TypeCellOS/BlockNote

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.