react-component / react-component/util

rc-util's getScrollBarSize Does Not Respect ConfigProvider's csp.nonce, Causing CSP Violations

Open
#613 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
670
Forks
205
Avg merge
11d 17h
Merged PRs (30d)
4

Description

The getScrollBarSize function in rc-util dynamically injects CSS using updateCSS for measuring scrollbar size. However, it does not respect the nonce value provided via the ConfigProvider's csp property. This leads to CSP violations in environments with strict style-src policies.


Steps to Reproduce
  1. Set up a project using antd with a ConfigProvider configured to include a nonce value:
    <ConfigProvider
      csp={{
        nonce: 'test-nonce',
      }}
    >
    
  2. Use a component that indirectly triggers the getScrollBarSize function (i.e. Table from rc-table)
  3. Observe CSP violations in the browser console, such as:
    Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-test-nonce'".
    

Expected Behavior

The getScrollBarSize function should respect the configured nonce by passing it to the updateCSS function when dynamically injecting styles.


Affected Code

The relevant part of the getScrollBarSize.tsx, line 49:

updateCSS(
  `
#${randomId}::-webkit-scrollbar {
${widthStyle}
${heightStyle}
}`,
randomId,
);

Additional info

This issue was first introduced in the following commit: Commit Hash: e96b0c6

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading src/getScrollBarSize.tsx around line 49 and trace how its updateCSS call is reached when rc-table uses getScrollBarSize. Check how the ConfigProvider csp nonce is made available to this utility. Done means the injected scrollbar-measurement style uses the configured nonce and no longer causes the reported CSP violation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, security
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.