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

Inline scripts are duplicated after hydration when the CSP nonce is sent in a header

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#8,550 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@gabriel-le đang làm issue này rồi.

Từ ngày 28/9/2026.

  • #8551 của @gabriel-le — đang mở

Đánh giá

Độ khó
1/5
Thời gian dự kiến
Dưới một giờ
Mức phù hợp với người mới
90/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu trong packages/react-router/src/Asset.tsx, tại phần tìm kiếm inline script quanh dòng 204. Kiểm tra cách nonce của script hiện có được đọc trong quá trình hydration, sau đó xác minh hành vi bằng reproducer tối giản được liên kết hoặc một ứng dụng Start sử dụng CSP nonce trong response header. Hoàn thành khi script được server render được khớp và không có script trùng lặp nào được thêm vào.

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

Mô tả

Which project does this relate to?

Router

Describe the bug

After hydration, Script looks for an existing inline script with the same text, type and nonce before it creates a new one:

https://github.com/TanStack/router/blob/41ebd288677beacb8eb56953f5f8c26e9d33313e/packages/react-router/src/Asset.tsx#L204

When the CSP arrives in a response header, browsers apply nonce hiding. On a connected element, getAttribute('nonce') returns '', and only the .nonce property keeps the value. So the comparison is '' vs. the real nonce, and the server-rendered script never matches. Script then creates a new <script type="module" nonce>import("/assets/index-….js")</script>, sets its textContent, and appends it to <head>.

Complete minimal reproducer

https://github.com/gabriel-le/tanstack-nonce-inline-scripts-duplication

Steps to Reproduce the Bug

This works in any Start app:

  1. Set ssr.nonce on the router and send Content-Security-Policy: script-src 'nonce-<n>' as a response header.
  2. Load a page. document.head.querySelectorAll('script[type=module]') includes a re-added import("/assets/…") script. Its getAttribute('nonce') is '', and its .nonce has the value.
  3. Control: send the same policy in a <meta http-equiv>, or send no policy. Nonces aren't hidden, the lookup matches, and nothing is added.
  4. Add ; require-trusted-types-for 'script' to the header. Hydration fails with the error above.

I tested this using react-router, but the issue is likely the same in solid and vue

Expected behavior

The lookup matches the server-rendered script, and nothing is created or appended.

Proposed fix
-        const sNonce = el.getAttribute('nonce') ?? undefined
+        const sNonce = el.nonce || undefined

The fix uses || rather than ?? because .nonce is '' when an element has no nonce. With ??, apps that don't use a nonce would start creating duplicates.

Screenshots or Videos

No response

Platform
  • Router / Start Version: 1.170.40
  • OS: macOS
  • Browser: Tested in chrome, safari and firefox
  • Browser Version: Safari Version 27.2 (22625.2.5.11.1)
  • Bundler: vite
  • Bundler Version: 8.0.0
Additional context

No response

Ngôn ngữ chính
TypeScript
Star
15.2k
Fork
1.9k
Merge trung bình
1 ngày 11 giờ
Pull request đã merge (30 ngày)
73

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

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 TanStack/router

Tất cả issue của TanStack/router

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.