react-component / react-component/util

injectCSS method not attaching csp nonce passed to it. it is used in antd components internally

Open Beginner friendly
#671 1 comment 0 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

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch rc-util@5.44.4 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rc-util/es/Dom/dynamicCSS.js b/node_modules/rc-util/es/Dom/dynamicCSS.js
index 8ddec00..9e5efee 100644
--- a/node_modules/rc-util/es/Dom/dynamicCSS.js
+++ b/node_modules/rc-util/es/Dom/dynamicCSS.js
@@ -52,7 +52,8 @@ export function injectCSS(css) {
     styleNode.setAttribute(APPEND_PRIORITY, "".concat(priority));
   }
   if (csp !== null && csp !== void 0 && csp.nonce) {
-    styleNode.nonce = csp === null || csp === void 0 ? void 0 : csp.nonce;
+    styleNode.setAttribute('nonce', csp.nonce);
+   // styleNode.nonce = csp === null || csp === void 0 ? void 0 : csp.nonce;
   }
   styleNode.innerHTML = css;
   var container = getContainer(option);
diff --git a/node_modules/rc-util/lib/Dom/dynamicCSS.js b/node_modules/rc-util/lib/Dom/dynamicCSS.js
index 95a5191..be33605 100644
--- a/node_modules/rc-util/lib/Dom/dynamicCSS.js
+++ b/node_modules/rc-util/lib/Dom/dynamicCSS.js
@@ -62,7 +62,8 @@ function injectCSS(css) {
     styleNode.setAttribute(APPEND_PRIORITY, "".concat(priority));
   }
   if (csp !== null && csp !== void 0 && csp.nonce) {
-    styleNode.nonce = csp === null || csp === void 0 ? void 0 : csp.nonce;
+    styleNode.setAttribute('nonce', csp.nonce);
+    // styleNode.nonce = csp === null || csp === void 0 ? void 0 : csp.nonce;
   }
   styleNode.innerHTML = css;
   var container = getContainer(option);

This issue body was partially generated by patch-package.

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 node_modules/rc-util/es/Dom/dynamicCSS.js and node_modules/rc-util/lib/Dom/dynamicCSS.js, focusing on injectCSS and its CSP handling. Confirm the implementation preserves the nonce passed to injectCSS on the generated style element, then add or update a relevant test if the repository provides one.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.