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.

Assessment

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

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.

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

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

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.

More from react-component/util

All issues in react-component/util

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.