react-component / react-component/util
rc-util's getScrollBarSize Does Not Respect ConfigProvider's csp.nonce, Causing CSP Violations
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
- Set up a project using
antdwith aConfigProviderconfigured to include anoncevalue:<ConfigProvider csp={{ nonce: 'test-nonce', }} > - Use a component that indirectly triggers the
getScrollBarSizefunction (i.e.Tablefromrc-table) - 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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