Merge pull request #69 from BlueFinchCommerce/feature/csp-update

Fixed CSP issue with Braintree PayPal Express button

Author: maxparkergene

view/frontend/templates/bluefinch-checkout.phtml

@@ -5,6 +5,10 @@
  * @var \BlueFinch\Checkout\ViewModel\Assets $assetViewModel
  *  @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer
  */
+use BlueFinch\Checkout\Helper\CspHelper;
+
+$cspHelper = $this->helper(CspHelper::class);
+$cspNonce = $cspHelper->getCspNonce();
 $assetViewModel = $block->getAssetViewModel();
 $jsAssets = $assetViewModel->getAssetsByType('js');
 $cssAssets = $assetViewModel->getAssetsByType('css');
@@ -18,7 +22,7 @@ $fontFamily = $assetViewModel->getFontFamily();
 ?>
 
 <?php $scriptString = <<<script
-
+    window.cspNonce = '$cspNonce';
     window.bluefinchCheckout = window.bluefinchCheckout || {};
     window.bluefinchCheckout.magentoEdition = "{$escaper->escapeJs($assetViewModel->getMagentoEdition())}";
 

view/frontend/templates/gtag_ga.phtml

@@ -24,13 +24,12 @@ switch ($accountType) {
             ?>
             <!-- GOOGLE TAG MANAGER -->
             <script defer nonce="<?= $cspNonce ?>" src="<?= $escaper->escapeHtmlAttr($block->getViewFileUrl('BlueFinch_Checkout::js/google-tag-manager.js')) ?>"></script>
-          
+
             <?php $scriptString = <<<SCRIPT
                 /**
                  * @param {Object} config
                  */
-                 window.cspNonce = '$cspNonce';
-                 
+
                 (function (config) {
                     // If the init is available call it otherwise wait until it's available.
                     window.bluefinchInitGtm
@@ -44,7 +43,7 @@ switch ($accountType) {
                         window.bluefinchInitGtm(config);
                     });
                 })($jsonConfig)
-                    
+
                 SCRIPT;
 
             ?>
@@ -76,7 +75,7 @@ switch ($accountType) {
                         window.bluefinchInitGtm(config);
                     });
                 })($analyticsData)
-                    
+
                 SCRIPT;
 
             ?>

view/frontend/web/js/checkout/dist/main.css

@@ -138,6 +138,10 @@ export default {
         sdkConfig['buyer-country'] = this.paypal.merchantCountry;
       }
 
+      if (window.cspNonce) {
+        sdkConfig.dataAttributes['csp-nonce'] = window.cspNonce;
+      }
+
       paypalInstance.loadPayPalSDK(sdkConfig, () => {
         const renderData = {
           env: this.environment,