Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fix CSP Nonce Handling for Venmo QR Code Component
https://paypal.atlassian.net/browse/LI-144483
Problem
When merchants use v5 of the JS SDK with a Content-Security-Policy that includes a [style-src] directive with a nonce, the Venmo QR code modal fails to render correctly in production environments. The issue occurs because:
Merchant provides CSP nonce to JS SDK via [data-csp-nonce] attribute
When buyer clicks Venmo button on desktop, QR code flow is triggered
The QR code component injects inline CSS without the proper nonce
Browser rejects the CSS due to CSP violation
QR code modal renders incorrectly (styling broken)
Root Cause
The QR code component was inconsistently handling CSP nonces:
Component relied on [props.cspNonce] which wasn't always properly propagated
In server-side rendering contexts, nonce values weren't being passed through props correctly
Container and prerender templates weren't getting the nonce needed for inline styles
Solution
Implemented consistent CSP nonce handling across all QR code component files:
Component Configuration
([component.jsx]
Changed [cspNonce] prop to [default: WEB ? getCSPNonce : () => undefined]
Ensures fallback when props don't contain nonce
Container Template
([container.jsx]
Now directly calls [getCSPNonce()] instead of using [props.cspNonce
Prerender Template ([prerender.jsx]
Updated to get CSP nonce directly from SDK client
Applies nonce to both inline styles and SpinnerPage component
Environment Safety
Added [WEB] checks to prevent server-side rendering issues
Returns undefined in non-web environments
Testing
✅ Verified QR code modal renders correctly with CSP nonces
✅ No CSP violations in browser console
Before:
After
