Moving synchronous inline JS into JSON with an external script load.

jonathanKingston · jonathanKingston · commit 18039b9d82e5 · 2018-04-17T17:15:37.000+01:00
This aids adoption of CSP by preventing inline JavaScript. However this shouldn't be used elsewhere and should be considered deprecated by default.
diff --git a/app/code/Magento/Checkout/Block/Cart/Shipping.php b/app/code/Magento/Checkout/Block/Cart/Shipping.php
@@ -92,6 +92,7 @@ public function getBaseUrl()
     /**
      * @return bool|string
      * @since 100.2.0
+     * @deprecated
      */
     public function getSerializedCheckoutConfig()
     {
diff --git a/app/code/Magento/Checkout/Block/Cart/Sidebar.php b/app/code/Magento/Checkout/Block/Cart/Sidebar.php
@@ -89,6 +89,7 @@ public function getConfig()
     /**
      * @return string
      * @since 100.2.0
+     * @deprecated
      */
     public function getSerializedConfig()
     {
diff --git a/app/code/Magento/Checkout/Block/Onepage.php b/app/code/Magento/Checkout/Block/Onepage.php
@@ -117,6 +117,7 @@ public function getBaseUrl()
     /**
      * @return bool|string
      * @since 100.2.0
+     * @deprecated
      */
     public function getSerializedCheckoutConfig()
     {
diff --git a/app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml b/app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml
@@ -42,9 +42,7 @@
             <?= $block->getChildHtml('minicart.addons') ?>
         </div>
     <?php endif ?>
-    <script>
-        window.checkout = <?= /* @escapeNotVerified */ $block->getSerializedConfig() ?>;
-    </script>
+    <?= $block->outputLegacyJavaScript('checkout', $block->getConfig()); ?>
     <script type="text/x-magento-init">
     {
         "[data-block='minicart']": {
diff --git a/app/code/Magento/Checkout/view/frontend/templates/cart/shipping.phtml b/app/code/Magento/Checkout/view/frontend/templates/cart/shipping.phtml
@@ -24,10 +24,8 @@
                 }
             }
         </script>
+        <?= $block->outputLegacyJavaScript('checkoutConfig', $block->getCheckoutConfig()); ?>
         <script>
-            window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;
-            window.customerData = window.checkoutConfig.customerData;
-            window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
             require([
                 'mage/url',
                 'Magento_Ui/js/block-loader'
diff --git a/app/code/Magento/Checkout/view/frontend/templates/onepage.phtml b/app/code/Magento/Checkout/view/frontend/templates/onepage.phtml
@@ -22,12 +22,7 @@
             }
         }
     </script>
-    <script>
-        window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;
-        // Create aliases for customer.js model from customer module
-        window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
-        window.customerData = window.checkoutConfig.customerData;
-    </script>
+    <?= $block->outputLegacyJavaScript('checkoutConfig', $block->getCheckoutConfig()); ?>
     <script>
         require([
             'mage/url',
diff --git a/app/code/Magento/Customer/Block/Account/AuthenticationPopup.php b/app/code/Magento/Customer/Block/Account/AuthenticationPopup.php
@@ -70,6 +70,7 @@ public function getConfig()
      * Added in scope of https://github.com/magento/magento2/pull/8617
      *
      * @return bool|string
+     * @deprecated
      * @since 100.2.0
      */
     public function getSerializedConfig()
diff --git a/app/code/Magento/Customer/view/frontend/templates/account/authentication-popup.phtml b/app/code/Magento/Customer/view/frontend/templates/account/authentication-popup.phtml
@@ -9,9 +9,7 @@
 /** @var \Magento\Customer\Block\Account\AuthenticationPopup $block */
 ?>
 <div id="authenticationPopup" data-bind="scope:'authenticationPopup'" style="display: none;">
-    <script>
-        window.authenticationPopup = <?= /* @noEscape */ $block->getSerializedConfig() ?>;
-    </script>
+    <?= $block->outputLegacyJavaScript('authentication', $block->getConfig()); ?>
     <!-- ko template: getTemplate() --><!-- /ko -->
     <script type="text/x-magento-init">
         {
diff --git a/app/code/Magento/GiftMessage/Block/Cart/GiftOptions.php b/app/code/Magento/GiftMessage/Block/Cart/GiftOptions.php
@@ -78,8 +78,8 @@ public function getJsLayout()
      *
      * @return array
      */
-    public function getGiftOptionsConfigJson()
+    public function getGiftOptionsConfig()
     {
-        return $this->jsonEncoder->encode($this->configProvider->getConfig());
+        return $this->configProvider->getConfig();
     }
 }
diff --git a/app/code/Magento/GiftMessage/view/frontend/templates/cart/.gift_options.phtml.swp b/app/code/Magento/GiftMessage/view/frontend/templates/cart/.gift_options.phtml.swp
diff --git a/app/code/Magento/GiftMessage/view/frontend/templates/cart/gift_options.phtml b/app/code/Magento/GiftMessage/view/frontend/templates/cart/gift_options.phtml
@@ -13,7 +13,5 @@
             }
         }
     </script>
-    <script>
-        window.giftOptionsConfig = <?= /* @escapeNotVerified */ $block->getGiftOptionsConfigJson() ?>;
-    </script>
+    <?= $block->outputLegacyJavaScript('giftOptions', $block->getGiftOptionsConfig()); ?>
 </div>
diff --git a/app/code/Magento/Theme/view/frontend/templates/page/js/require_js.phtml b/app/code/Magento/Theme/view/frontend/templates/page/js/require_js.phtml
@@ -4,8 +4,4 @@
  * See COPYING.txt for license details.
  */
 ?>
-<script>
-    var require = {
-        "baseUrl": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('/') ?>"
-    };
-</script>
+<?= $block->outputLegacyJavaScript('require', $block->getViewFileUrl('/')); ?>
diff --git a/lib/internal/Magento/Framework/View/Element/Template.php b/lib/internal/Magento/Framework/View/Element/Template.php
@@ -341,6 +341,21 @@ public function getCacheKeyInfo()
         ];
     }
 
+    /**
+     * Output a legacy syncronous JavaScript global
+     *
+     * @param string $key
+     * @param string|object|array $value
+     * @return string
+     * @deprecated since version 2.3.0
+     */
+    public function outputLegacyJavaScript($key, $value) {
+        $includePath = $this->escapeUrl($this->getViewFileUrl('/mage/legacyinit/' . $key . '.js'));
+        return '<script type="application/json" id="legacyJS_' . $this->escapeHtml($key) . '">' .
+               json_encode([$key => $value]) .
+               '</script>' . PHP_EOL . '<script src="' . $includePath . '"></script>';
+    }
+
     /**
      * Instantiates filesystem directory
      *
diff --git a/lib/web/mage/legacyinit/authentication.js b/lib/web/mage/legacyinit/authentication.js
@@ -0,0 +1,6 @@
+(function () {
+    'use strict';
+
+    window.authenticationPopup =
+       JSON.parse(document.getElementById('legacyJS_authentication').textContent).authentication;
+}());
diff --git a/lib/web/mage/legacyinit/checkout.js b/lib/web/mage/legacyinit/checkout.js
@@ -0,0 +1,5 @@
+(function () {
+    'use strict';
+
+    window.checkout = JSON.parse(document.getElementById('legacyJS_checkout').textContent).checkout;
+}());
diff --git a/lib/web/mage/legacyinit/checkoutConfig.js b/lib/web/mage/legacyinit/checkoutConfig.js
@@ -0,0 +1,8 @@
+(function () {
+    'use strict';
+
+    window.checkoutConfig = JSON.parse(document.getElementById('legacyJS_checkoutConfig').textContent).checkoutConfig;
+    // Create aliases for customer.js model from customer module
+    window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
+    window.customerData = window.checkoutConfig.customerData;
+}());
diff --git a/lib/web/mage/legacyinit/giftOptions.js b/lib/web/mage/legacyinit/giftOptions.js
@@ -0,0 +1,5 @@
+(function () {
+    'use strict';
+
+    window.giftOptionsConfig = JSON.parse(document.getElementById('legacyJS_giftOptions').textContent).giftOptions;
+}());
diff --git a/lib/web/mage/legacyinit/require.js b/lib/web/mage/legacyinit/require.js
@@ -0,0 +1,7 @@
+(function () {
+    'use strict';
+
+    window.require = {
+        baseUrl: JSON.parse(document.getElementById('legacyJS_require').textContent).require
+    };
+}());

Original file line number	Diff line number	Diff line change
`@@ -92,6 +92,7 @@ public function getBaseUrl()`
`92`	`92`	`/**`
`93`	`93`	`* @return bool\|string`
`94`	`94`	`* @since 100.2.0`
	`95`	`+ * @deprecated`
`95`	`96`	`*/`
`96`	`97`	`public function getSerializedCheckoutConfig()`
`97`	`98`	`{`
Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,7 @@ public function getConfig()`
`89`	`89`	`/**`
`90`	`90`	`* @return string`
`91`	`91`	`* @since 100.2.0`
	`92`	`+ * @deprecated`
`92`	`93`	`*/`
`93`	`94`	`public function getSerializedConfig()`
`94`	`95`	`{`
Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,7 @@ public function getBaseUrl()`
`117`	`117`	`/**`
`118`	`118`	`* @return bool\|string`
`119`	`119`	`* @since 100.2.0`
	`120`	`+ * @deprecated`
`120`	`121`	`*/`
`121`	`122`	`public function getSerializedCheckoutConfig()`
`122`	`123`	`{`
Original file line number	Diff line number	Diff line change
`@@ -24,10 +24,8 @@`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`</script>`
	`27`	`+ <?= $block->outputLegacyJavaScript('checkoutConfig', $block->getCheckoutConfig()); ?>`
`27`	`28`	`<script>`
`28`		`- window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;`
`29`		`- window.customerData = window.checkoutConfig.customerData;`
`30`		`- window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;`
`31`	`29`	`require([`
`32`	`30`	`'mage/url',`
`33`	`31`	`'Magento_Ui/js/block-loader'`
Original file line number	Diff line number	Diff line change
`@@ -22,12 +22,7 @@`
`22`	`22`	`}`
`23`	`23`	`}`
`24`	`24`	`</script>`
`25`		`- <script>`
`26`		`- window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;`
`27`		`- // Create aliases for customer.js model from customer module`
`28`		`- window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;`
`29`		`- window.customerData = window.checkoutConfig.customerData;`
`30`		`- </script>`
	`25`	`+ <?= $block->outputLegacyJavaScript('checkoutConfig', $block->getCheckoutConfig()); ?>`
`31`	`26`	`<script>`
`32`	`27`	`require([`
`33`	`28`	`'mage/url',`
Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,7 @@ public function getConfig()`
`70`	`70`	`* Added in scope of https://github.com/magento/magento2/pull/8617`
`71`	`71`	`*`
`72`	`72`	`* @return bool\|string`
	`73`	`+ * @deprecated`
`73`	`74`	`* @since 100.2.0`
`74`	`75`	`*/`
`75`	`76`	`public function getSerializedConfig()`
Original file line number	Diff line number	Diff line change
`@@ -78,8 +78,8 @@ public function getJsLayout()`
`78`	`78`	`*`
`79`	`79`	`* @return array`
`80`	`80`	`*/`
`81`		`- public function getGiftOptionsConfigJson()`
	`81`	`+ public function getGiftOptionsConfig()`
`82`	`82`	`{`
`83`		`- return $this->jsonEncoder->encode($this->configProvider->getConfig());`
	`83`	`+ return $this->configProvider->getConfig();`
`84`	`84`	`}`
`85`	`85`	`}`