Add nonce prop to Overlay component (#23)

alan-bendjuya · web-flow · commit c313019bbef4 · 2021-05-25T09:19:43.000-05:00
diff --git a/src/overlay/template.jsx b/src/overlay/template.jsx
@@ -22,11 +22,11 @@ export type OverlayProps = {|
         continueMessage? : string
     |},
     autoResize? : boolean,
-    hideCloseButton? : boolean
+    hideCloseButton? : boolean,
+    nonce : string
 |};
 
-export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton } : OverlayProps) : ElementNode {
-
+export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton, nonce } : OverlayProps) : ElementNode {
     const uid = `paypal-overlay-${ uniqueID() }`;
 
     function closeCheckout(e) {
@@ -113,8 +113,7 @@ export function Overlay({ context, close, focus, event, frame, prerenderFrame, c
 
     return (
         <div id={ uid } onRender={ setupAnimations('container') } class="paypal-checkout-sandbox">
-            <style>{ getSandboxStyle({ uid }) }</style>
-
+            <style nonce={ nonce }>{ getSandboxStyle({ uid }) }</style>
             <iframe title="PayPal Checkout Overlay" name={ `__paypal_checkout_sandbox_${ uid }__` } scrolling="no" class="paypal-checkout-sandbox-iframe">
                 <html>
                     <body>
@@ -142,7 +141,7 @@ export function Overlay({ context, close, focus, event, frame, prerenderFrame, c
                                 { outlet }
                             </div>
 
-                            <style>{ getContainerStyle({ uid }) }</style>
+                            <style nonce={ nonce }>{ getContainerStyle({ uid }) }</style>
                         </div>
                     </body>
                 </html>
diff --git a/src/three-domain-secure/component.jsx b/src/three-domain-secure/component.jsx
@@ -5,7 +5,7 @@
 import { node, dom } from 'jsx-pragmatic/src';
 import { create, type ZoidComponent } from 'zoid/src';
 import { inlineMemoize, noop } from 'belter/src';
-import { getSDKMeta, getClientID } from '@paypal/sdk-client/src';
+import { getSDKMeta, getClientID, getCSPNonce } from '@paypal/sdk-client/src';
 import { ZalgoPromise } from 'zalgo-promise/src';
 
 import { Overlay } from '../overlay';
@@ -33,14 +33,15 @@ export type TDSProps = {|
         windowMessage? : string,
         continueMessage? : string
     |},
-    userType : ?$Values<typeof USER_TYPE>
+    userType : ?$Values<typeof USER_TYPE>,
+    nonce : string
 |};
 
 export function getThreeDomainSecureComponent() : ZoidComponent<TDSProps> {
     return inlineMemoize(getThreeDomainSecureComponent, () => {
         const component = create({
-            tag:               'three-domain-secure',
-            url:               getThreeDomainSecureUrl,
+            tag: 'three-domain-secure',
+            url: getThreeDomainSecureUrl,
 
             attributes: {
                 iframe: {
@@ -58,6 +59,7 @@ export function getThreeDomainSecureComponent() : ZoidComponent<TDSProps> {
                         frame={ frame }
                         prerenderFrame={ prerenderFrame }
                         content={ props.content }
+                        nonce={ props.nonce }
                     />
                 ).render(dom({ doc }));
             },
@@ -115,6 +117,11 @@ export function getThreeDomainSecureComponent() : ZoidComponent<TDSProps> {
                 userType: {
                     type:     'string',
                     required: false
+                },
+                nonce: {
+                    type:    'string',
+                    default: getCSPNonce
+
                 }
             }
         });
diff --git a/test/integration/tests/spinner-page/happy.jsx b/test/integration/tests/spinner-page/happy.jsx
@@ -32,4 +32,17 @@ describe(`paypal spinner component happy path`, () => {
             throw new Error(`Expected spinner to have child`);
         }
     });
+
+    it('should render the spinner component with nonce', () => {
+        const nonce = '12345';
+        const spinnerPage = (
+            <SpinnerPage nonce={ nonce } />
+        );
+
+        const domNode = spinnerPage.render(dom());
+
+        if (domNode.ownerDocument !== document) {
+            throw new Error(`Expected spinner component to be rendered to current dom`);
+        }
+    });
 });
diff --git a/test/integration/tests/three-domain-secure/happy.js b/test/integration/tests/three-domain-secure/happy.js
@@ -7,11 +7,13 @@ describe(`paypal 3ds component happy path`, () => {
 
     it('should render the 3ds component', () => {
         return wrapPromise(({ expect, avoid }) => {
+            const nonce = '12345';
             return window.paypal.ThreeDomainSecure({
                 createOrder: () => 'XXXXXXXXXXXXXXXXX',
                 onSuccess:   expect('onSuccess'),
                 onCancel:    avoid('onCancel'),
-                onError:     avoid('onError')
+                onError:     avoid('onError'),
+                nonce
 
             }).render('body');
         });
