Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

csp nonce configuration doesn't seem to work

Đang mở
#392 3 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu tại src/Dom/dynamicCSS.ts, xung quanh dòng 64, và tái hiện vấn đề bằng CodeSandbox được liên kết, kiểm tra stylesheet datepicker được inject trong trình duyệt. So sánh hành vi đó với các test case hiện có của thư viện và xác minh rằng nonce đã cấu hình có mặt trên các style được inject khi fix hoàn tất.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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:
image

Ngôn ngữ chính
TypeScript
Star
670
Fork
205
Merge trung bình
15 ngày 17 giờ
Pull request đã merge (30 ngày)
6

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/util

Tất cả issue của react-component/util

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.