Skip to content

feat: add CSP nonce support to GustoProvider#2191

Draft
jeffredodd wants to merge 5 commits into
mainfrom
worktree-scalable-noodling-zephyr
Draft

feat: add CSP nonce support to GustoProvider#2191
jeffredodd wants to merge 5 commits into
mainfrom
worktree-scalable-noodling-zephyr

Conversation

@jeffredodd

Copy link
Copy Markdown
Contributor

Summary

  • Adds an optional nonce prop to GustoProvider / GustoProviderCustomUIAdapter. The nonce flows through a new NonceContext and is applied to both runtime <style> elements the SDK creates: the theme-variables element in ThemeProvider, and the loading-spinner element injected into the paystub PDF download window.
  • Exposes a new public useNonce hook so partners using custom UI can plumb the same nonce into any <style> or <script> they inject themselves.
  • Extracts three SDK-authored static inline style={{…}} attributes (Card, Toast, DocumentSigner/List) to CSS modules, so they no longer require style-src-attr 'unsafe-inline'.
  • Documents the resulting minimum CSP and the inline-style surface that remains (Flex/Grid/ProgressBar/ReorderableList runtime CSS custom properties, plus react-aria-components overlay positioning) under docs/getting-started/proxy-security-partner-guidance.md.

Why

Partners running a strict nonce-based CSP can't use the SDK today — the theme <style> and paystub-popup <style> tags are dropped by the browser without 'unsafe-inline'. After this change, the only style-src relaxation a partner needs is style-src-attr 'unsafe-inline', which is forced by the CSP spec (no per-attribute nonces) and by react-aria-components.

Test plan

  • npm run test -- --run — 3110 pass, 1 expected fail (pre-existing).
  • npm run build — clean build, types emit.
  • New unit coverage: useNonce returns the value / undefined; ThemeProvider sets .nonce on the injected <style>; PaystubsCard sets .nonce on the popup <style> when one is provided.
  • Manual smoke under a nonce-only style-src in the SDK dev app (reviewer please verify locally if you can).

🤖 Generated with Claude Code

Adds an optional `nonce` prop to `GustoProvider` and
`GustoProviderCustomUIAdapter` so partners with a strict
`style-src 'nonce-…'` Content Security Policy can run the SDK without
relaxing to `unsafe-inline`. The nonce is applied to both runtime
`<style>` injection sites (the ThemeProvider variables element and the
paystub PDF download window's loading-spinner element), and exposed to
custom UI components via a new `useNonce` hook.

Also extracts three static inline `style={{…}}` attributes (Card,
Toast, DocumentSigner List) to CSS modules so they no longer require
`style-src-attr 'unsafe-inline'`. The remaining inline-style surface
(`Flex`/`Grid`/`ProgressBar`/`ReorderableList` runtime CSS custom
properties, plus `react-aria-components` overlay positioning) is
documented in the partner CSP guide.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- prettier: collapse multi-line querySelector in ThemeProvider test
- tsdoc-coverage: reorder useNonce tags so @example is the final group
- markdownlint: add language tag to CSP example fenced block

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@jeffredodd

Copy link
Copy Markdown
Contributor Author

@cursoragent Can you resolve conflicts?

@cursor

cursor Bot commented Jun 25, 2026

Copy link
Copy Markdown

Done! I've successfully resolved all merge conflicts and pushed the changes. Here's what I fixed:

Conflicts resolved:

  1. docs/api/index.md - Accepted deletion from main (file was removed upstream)

  2. Card.module.scss - Resolved .cardBody styling conflict by accepting main's version:

    • Used the more concise flex: 1 1 auto shorthand
    • Kept the min-width: 0 property which prevents flexbox overflow issues
  3. Card.tsx - Resolved Flex component props conflict by accepting main's version:

    • Added alignItems="stretch" for better layout consistency
    • Used consistent double-quote style

The merge commit has been pushed to the worktree-scalable-noodling-zephyr branch and the PR is now up to date with main.

Open in Web Open in Cursor 

cursoragent and others added 2 commits June 25, 2026 15:56
Co-authored-by: Jeffrey D Johnson <jeffredodd@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants