Issues 87 - Add CSP Support

Author: srenon

composer.json

@@ -34,17 +34,17 @@
         }
     ],
     "require": {
-        "php": "7.0.2|7.0.4|~7.0.6|~7.1.0|~7.1.3|~7.2.0|~7.3.0|~7.4.0|~8.1.0|~8.2.0|~8.3.0",
-        "magento/module-backend": "100.0.*|100.1.*|100.2.*|101.0.*|102.0.*",
-        "magento/framework": "100.0.*|100.1.*|101.0.*|102.0.*|103.0.*",
+        "php": "~7.3.0|~7.4.0|~8.1.0|~8.2.0|~8.3.0",
+        "magento/module-backend": "102.0.*",
+        "magento/framework": "103.0.*",
         "magepal/magento2-core": ">=1.1.11"
     },
     "suggest" : {
         "magepal/magento2-enhanced-ecommerce": "Get more from Google Tag Manager with Enhanced E-commerce. Learn more at https://www.magepal.com/enhanced-ecommerce-for-google-tag-manager.html",
         "magepal/magento2-google-analytics4": "Prepare for the future with Google Analytics 4. Learn more at https://www.magepal.com/google-analytics-4-for-google-tag-manager.html"
     },
     "type": "magento2-module",
-    "version": "2.7.8",
+    "version": "3.0.0",
     "autoload": {
         "files": [
             "registration.php"

view/frontend/templates/js.phtml

@@ -6,30 +6,35 @@
  */
 
 /** @var $block MagePal\GoogleTagManager\Block\DataLayer **/
+/** @var $secureRenderer \Magento\Framework\View\Helper\SecureHtmlRenderer */
 $dataLayerName = $block->getDataLayerName();
 $accountId = $block->getAccountId();
-$containerCode = $block->getEmbeddedCode();
+$containerCode = $block->getEmbeddedCode() ? "+'{$block->getEmbeddedCode()}'" : '';
 ?>
 
 <!-- Google Tag Manager by MagePal -->
-<script type="text/javascript">
-    window.<?= /* @noEscape */ $dataLayerName ?> = window.<?= /* @noEscape */ $dataLayerName ?> || [];
+<?php $scriptString = <<<script
+window.{$dataLayerName} = window.{$dataLayerName} || [];
+script;
+?>
+<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
 
 <?php if (!$block->isGdprEnabled() && $block->addJsInHead() && !$block->isAdvancedSettingsEnabled()): ?>
-    <?= /* @noEscape */ $block->getDataLayerJs() ?>
+    <?php $scriptString = <<<script
     (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
             new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='<?= /* @noEscape */ $dataLayerName ?>'?'&l='+l:'';j.async=true;j.src=
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl<?= /* @noEscape */ $containerCode ? "+'{$containerCode}'" : '' ?>;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','<?= /* @noEscape */ $dataLayerName ?>','<?= /* @noEscape */ $accountId ?>');
+        j=d.createElement(s),dl=l!='{$dataLayerName}'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtm.js?id='+i+dl{$containerCode};f.parentNode.insertBefore(j,f);
+    })(window,document,'script','{$dataLayerName}','{$accountId}');
+    script;
+    ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $block->getDataLayerJs(), false) ?>
 <?php endif; ?>
-</script>
 
 <?php if ($block->isAdvancedSettingsEnabled()): ?>
-<script type="text/javascript">
-    <?= /* @noEscape */ $block->getDataLayerJs() ?>
-</script>
-    <?= /* @noEscape */ $block->getAdvancedSettingsJsCode() ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $block->getAdvancedSettingsJsCode(), false) ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $block->getDataLayerJs(), false) ?>
 <?php endif; ?>
 
 <?php if (($block->isGdprEnabled() || !$block->addJsInHead()) && !$block->isAdvancedSettingsEnabled()) : ?>

view/frontend/web/js/datalayer.js

@@ -110,8 +110,8 @@ define([
         window[config.dataLayer] = window[config.dataLayer] || [];
 
         if (_.has(config, 'accountId') && isTrackingAllowed(config)) {
-            pushData(config.dataLayer, config.data);
             initTracking(config.dataLayer, config.accountId, config.containerCode);
+            pushData(config.dataLayer, config.data);
         }
 
         var dataObject = customerData.get('magepal-gtm-jsdatalayer');