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

オープン
#613 コメント 4 件 リアクション 4 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
48/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
react, typescript
領域
frontend, security

調査の方向性

まず src/getScrollBarSize.tsx の49行目付近を読み、rc-table が getScrollBarSize を使用したときにその updateCSS 呼び出しに到達するまでの流れを追ってください。ConfigProvider の csp nonce がこのユーティリティから利用可能になる仕組みを確認してください。注入されるスクロールバー測定用のスタイルが設定された nonce を使用し、報告されている CSP 違反を引き起こさなくなれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
670
フォーク
205
平均マージ
15日 17時間
マージ済み PR（30日）
6

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react-component/util のほかの issue

react-component/util の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。