fix: scrollbar measurement missing CSP nonce when creating <style>

src/getScrollBarSize.tsx

@@ -10,7 +10,7 @@ type ExtendCSSStyleDeclaration = CSSStyleDeclaration & {
 
 let cached: ScrollBarSize;
 
-function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {
+function measureScrollbarSize(ele?: HTMLElement, csp?: { nonce?: string }): ScrollBarSize {
  const randomId = `rc-scrollbar-measure-${Math.random()
  .toString(36)
  .substring(7)}`;
@@ -53,6 +53,7 @@ ${widthStyle}
 ${heightStyle}
 }`,
  randomId,
+ { csp },
  );
  } catch (e) {
  // Can't wrap, just log error
@@ -98,7 +99,7 @@ export default function getScrollBarSize(fresh?: boolean): number {
  return cached.width;
 }
 
-export function getTargetScrollBarSize(target: HTMLElement) {
+export function getTargetScrollBarSize(target: HTMLElement, csp?: { nonce?: string }) {
  if (
  typeof document === 'undefined' ||
  !target ||
@@ -107,5 +108,5 @@ export function getTargetScrollBarSize(target: HTMLElement) {
  return { width: 0, height: 0 };
  }
 
- return measureScrollbarSize(target);
+ return measureScrollbarSize(target, csp);
 }

tests/getScrollBarSize.test.ts

@@ -47,5 +47,29 @@ describe('getScrollBarSize', () => {
  height: 0,
  });
  });
+
+ it('should pass csp nonce to updateCSS', () => {
+ const updateCSSSpy = jest.spyOn(
+ require('../src/Dom/dynamicCSS'),
+ 'updateCSS',
+ );
+
+ const target = document.createElement('div');
+ document.body.appendChild(target);
+
+ try {
+ const nonce = 'test-nonce-123';
+ getTargetScrollBarSize(target, { nonce });
+
+ expect(updateCSSSpy).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.any(String),
+ { csp: { nonce } },
+ );
+ } finally {
+ updateCSSSpy.mockRestore();
+ document.body.removeChild(target);
+ }
+ });
  });
 });