getsentry / getsentry/sentry-javascript

feat(react-router): support request-scoped CSP nonces in createSentryHandleRequest

Đang mở
#23,445 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
Feature post-hackweek React Router Framework
Ngôn ngữ chính
TypeScript
Star
8.7k
Fork
1.8k
Merge trung bình
1 ngày 17 giờ
Pull request đã merge (30 ngày)
523

Mô tả

### Problem

`createSentryHandleRequest()` does not currently support a request-scoped Content Security Policy nonce.

React Router requires the same nonce in both places when rendering a Framework Mode document:

1. The `nonce` prop on ``
2. The `nonce` option passed to `renderToPipeableStream`

https://reactrouter.com/how-to/security

The current helper owns both calls but does not expose a nonce option, and its `loadContext` argument is unused:

https://github.com/getsentry/sentry-javascript/blob/10.70.0/packages/react-router/src/server/createSentryHandleRequest.tsx

A minimal setup generates a unique nonce in server middleware and stores it in React Router's request context:

```ts
const loadContext = new RouterContextProvider();
loadContext.set(cspContext, {
nonce: crypto.randomBytes(16).toString("base64"),
});
```

There is currently no way to pass that value through `createSentryHandleRequest()`. Applications must copy React Router's Node handler and manually compose `getMetaTagTransformer()` and `wrapSentryHandleRequest()`.

A static nonce option would not be sufficient because CSP nonces must be fresh and unpredictable for each rendered response.

### Suggested direction

Could the helper expose a request-aware mechanism for resolving the nonce? For example, without prescribing the final API:

```ts
getNonce({ request, loadContext }): string | undefined
```

The returned value would need to be passed to both:

```tsx

```

and:

```ts
renderToPipeableStream(element, { nonce, ... })
```

The helper should continue to provide Sentry's trace meta-tag injection and request wrapping.

Importing `@sentry/react-router/cloudflare` is not an appropriate workaround for a Node deployment. This application runs on Node 24 in AWS Lambda, uses `renderToPipeableStream` and Node streams, and does not run on Cloudflare. Additionally, the Cloudflare transformer cannot provide the nonce to ``.

### Versions tested

- `@sentry/react-router`: 10.70.0
- `react-router`: 8.3.0
- `@react-router/node`: 8.3.0
- `react`: 19.2.6
- `react-dom`: 19.2.6
- Node.js 24
- AWS Lambda

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

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with packages/react-router/src/server/createSentryHandleRequest.tsx and the React Router security guidance linked in the issue. Trace how loadContext, ServerRouter, renderToPipeableStream, getMetaTagTransformer(), and wrapSentryHandleRequest() are used. Done means a request-scoped nonce can reach both rendering locations while Sentry trace meta-tag injection and request wrapping continue to work.

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

Đánh giá

Công nghệ
node.js, react, typescript
Lĩnh vực
backend, security, web-dev
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

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.