csp nonce configuration doesn't seem to work
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
src/Dom/dynamicCSS.ts の64行目付近から始め、リンクされた CodeSandbox を使って問題を再現し、ブラウザで注入された datepicker スタイルシートを確認します。その動作をライブラリの既存のテストケースと比較し、fix の完了時に、設定された nonce が注入されたスタイルに存在することを確認します。
索引モデルが issue の本文から書いたものです。
説明
Noticed that when using the <ConfigProvider csp={{ nonce: "test" }} > configuration capabilities from Ant Design this isn't being applied properly by rc-util.
While debugging I noticed that the configuration does reach the code (https://github.com/react-component/util/blob/master/src/Dom/dynamicCSS.ts#L64) but somehow doesn't add it when for example a stylesheet is injected for the datepicker component of Ant Design.
Seemingly changing the line in https://github.com/react-component/util/blob/master/src/Dom/dynamicCSS.ts#L64
from:
styleNode.nonce = csp?.nonce;
to
styleNode.setAttribute("nonce", csp.nonce);
does fix this.
Does anyone have any other idea as to why this doesn't work in the browser but seems to work within the testcases of this library?
A reproduction can be found here: https://codesandbox.io/s/antd-reproduction-template-forked-su9wdz
When you check the console you can see the stylesheet is injected without setting a nonce:
- 主要言語
- TypeScript
- スター
- 670
- フォーク
- 206
- 平均マージ
- 14日 12時間
- マージ済み PR（30日）
- 3
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/util のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
react-component/util#816 ·
-
injectCSS method not attaching csp nonce passed to it. it is used in antd components internallyオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
react-component/util#671 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
react-component/util#738 · コメント 1 件 · リアクション 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
react-component/util#710 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
react-component/util#647 · コメント 5 件 ·
react-component/util の issue をすべて見る
似ている issue
-
area/core status/need-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
google-gemini/gemini-cli#29602 ·
メンテナーはふだん 1 日以内に返信
-
area: backend enhancement priority: low
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
snapotter-hq/SnapOtter#1879 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
Tencent/BrowserSkill#390 ·
メンテナーはふだん 1 日以内に返信
-
good first issue status: needs triaging type: bug version: 2.0
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
medusajs/medusa#17094 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
メンテナーはふだん 1 日以内に返信