Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

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

未關閉
  • 哪裡不對？
#3,209 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
3/5
預估耗時
半天
新手友好度
62/100
Issue 類型
缺陷
描述清晰度
描述清楚
活躍度
活躍
技術堆疊
react, typescript
領域
frontend

研究方向

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.

由索引模型根據 Issue 內容生成。

描述

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 💖
主要語言
TypeScript
星號
10.3k
分支
780
平均合併
2 天 20 小時
30 天內合併 PR
44

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

TypeCellOS/BlockNote 的其他 Issue

查看 TypeCellOS/BlockNote 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。