feat(Splitter): add CSP nonce support (#2038)

Y0me · web-flow · commit afbdeaa594ca · 2025-07-14T20:20:33.000+08:00
* feat(splitter): add CSP nonce support Fixes #2003 * refactor(splitter): remove redundant condition in nonce loop
diff --git a/packages/core/src/Splitter/SplitterResizeHandle.vue b/packages/core/src/Splitter/SplitterResizeHandle.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { ref, toRefs, watch, watchEffect } from 'vue'
+import { useNonce } from '@/shared/useNonce'
 import { useWindowSplitterResizeHandlerBehavior } from './utils/composables/useWindowSplitterBehavior'
 
 export interface SplitterResizeHandleProps extends PrimitiveProps {
@@ -12,6 +13,10 @@ export interface SplitterResizeHandleProps extends PrimitiveProps {
   tabindex?: number
   /** Disable drag handle */
   disabled?: boolean
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.
+   */
+  nonce?: string
 }
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void
@@ -60,6 +65,8 @@ const resizeHandleId = useId(props.id, 'reka-splitter-resize-handle')
 const state = ref<ResizeHandlerState>('inactive')
 const isFocused = ref(false)
 const resizeHandler = ref<ResizeHandler | null>(null)
+const { nonce: propNonce } = toRefs(props)
+const nonce = useNonce(propNonce)
 
 watch(disabled, () => {
   if (!isBrowser)
@@ -125,6 +132,7 @@ watchEffect((onCleanup) => {
       // Fine inputs (e.g. mouse)
       fine: props.hitAreaMargins?.fine ?? 5,
     },
+    nonce,
     setResizeHandlerState,
   ))
 })
diff --git a/packages/core/src/Splitter/utils/registry.ts b/packages/core/src/Splitter/utils/registry.ts
@@ -21,6 +21,7 @@ export type ResizeHandlerData = {
   direction: Ref<Direction>
   element: HTMLElement
   hitAreaMargins: PointerHitAreaMargins
+  nonce: Ref<string | undefined>
   setResizeHandlerState: SetResizeHandlerState
 }
 
@@ -48,6 +49,7 @@ export function registerResizeHandle(
   element: HTMLElement,
   direction: Ref<Direction>,
   hitAreaMargins: PointerHitAreaMargins,
+  nonce: Ref<string | undefined>,
   setResizeHandlerState: SetResizeHandlerState,
 ) {
   const { ownerDocument } = element
@@ -56,6 +58,7 @@ export function registerResizeHandle(
     direction,
     element,
     hitAreaMargins,
+    nonce,
     setResizeHandlerState,
   }
 
@@ -228,14 +231,17 @@ export function reportConstraintsViolation(
 function updateCursor() {
   let intersectsHorizontal = false
   let intersectsVertical = false
+  let nonce: string | undefined
 
   intersectingHandles.forEach((data) => {
-    const { direction } = data
+    const { direction, nonce: _nonce } = data
 
     if (direction.value === 'horizontal')
       intersectsHorizontal = true
     else
       intersectsVertical = true
+
+    nonce = _nonce.value
   })
 
   let constraintFlags = 0
@@ -244,11 +250,11 @@ function updateCursor() {
   })
 
   if (intersectsHorizontal && intersectsVertical)
-    setGlobalCursorStyle('intersection', constraintFlags)
+    setGlobalCursorStyle('intersection', constraintFlags, nonce)
   else if (intersectsHorizontal)
-    setGlobalCursorStyle('horizontal', constraintFlags)
+    setGlobalCursorStyle('horizontal', constraintFlags, nonce)
   else if (intersectsVertical)
-    setGlobalCursorStyle('vertical', constraintFlags)
+    setGlobalCursorStyle('vertical', constraintFlags, nonce)
   else
     resetGlobalCursorStyle()
 }
diff --git a/packages/core/src/Splitter/utils/style.ts b/packages/core/src/Splitter/utils/style.ts
@@ -69,6 +69,7 @@ export function resetGlobalCursorStyle() {
 export function setGlobalCursorStyle(
   state: CursorState,
   constraintFlags: number,
+  nonce?: string,
 ) {
   const style = getCursorStyle(state, constraintFlags)
 
@@ -79,7 +80,8 @@ export function setGlobalCursorStyle(
 
   if (styleElement === null) {
     styleElement = document.createElement('style')
-
+    if (nonce)
+      styleElement.nonce = nonce
     document.head.appendChild(styleElement)
   }
 
