Adds nonce to Checkout and MyAccount pages

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bump other GH actions to fix warnings related to old versions. ([#2495](https://github.com/bigcommerce/cornerstone/pull/2495))
 - Add a section to display the payment promotion widget in the drop-down of the cart preview. ([#2523](https://github.com/bigcommerce/cornerstone/pull/2523))
 - Add support Node 20 ([#2519](https://github.com/bigcommerce/cornerstone/pull/2519))
+- Add nonce to scripts in checkout and account pages ([#2525](https://github.com/bigcommerce/cornerstone/pull/2525))
 
 ## 6.15.0 (10-18-2024)
 - Cornerstone changes to support inc/ex tax price lists on PDP [#2486](https://github.com/bigcommerce/cornerstone/pull/2486)

templates/components/common/breadcrumbs.html

@@ -15,7 +15,7 @@
     </ol>
 </nav>
 
-<script type="application/ld+json">
+<script type="application/ld+json"  nonce="{{nonce}}">
 {
     "@context": "https://schema.org",
     "@type": "BreadcrumbList",

templates/components/common/polyfill-script.html

@@ -1,4 +1,4 @@
-<script>
+<script nonce="{{nonce}}">
     {{!--
         Check for modern browser features, and load polyfills if browser does not appear to support features
         we need.

templates/layout/base.html

@@ -10,25 +10,25 @@
         <link href="{{ head.favicon }}" rel="shortcut icon">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <script>
+        <script nonce="{{nonce}}">
             {{!-- Change document class from no-js to js so we can detect this in css --}}
             document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
         </script>
 
         {{> components/common/polyfill-script }}
-        <script>window.consentManagerTranslations = `{{{langJson 'consent_manager'}}}`;</script>
+        <script nonce="{{nonce}}">window.consentManagerTranslations = `{{{langJson 'consent_manager'}}}`;</script>
 
         {{!-- Load Lazysizes script ASAP so images will appear --}}
-        <script>
+        <script nonce="{{nonce}}">
             {{!-- Only load visible elements until the onload event fires, after which preload nearby elements. --}}
             window.lazySizesConfig = window.lazySizesConfig || {};
             window.lazySizesConfig.loadMode = 1;
         </script>
-        <script async src="{{cdn 'assets/dist/theme-bundle.head_async.js' resourceHint='preload' as='script'}}"></script>
+        <script nonce="{{nonce}}" async src="{{cdn 'assets/dist/theme-bundle.head_async.js' resourceHint='preload' as='script'}}"></script>
 
         {{getFontsCollection font-display='block'}}
 
-        <script async src="{{cdn 'assets/dist/theme-bundle.font.js' resourceHint='preload' as='script'}}"></script>
+        <script nonce="{{nonce}}" async src="{{cdn 'assets/dist/theme-bundle.font.js' resourceHint='preload' as='script'}}"></script>
 
         {{{stylesheet '/assets/css/theme.css'}}}
 
@@ -55,8 +55,8 @@
         {{> components/common/body }}
         {{> components/common/footer }}
 
-        <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
-        <script>
+        <script nonce="{{nonce}}">window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
+        <script nonce="{{nonce}}">
             {{!-- Exported in app.js --}}
             function onThemeBundleMain() {
                 window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
@@ -79,7 +79,7 @@
                 }
             }
         </script>
-        <script async defer src="{{cdn 'assets/dist/theme-bundle.main.js' resourceHint='preload' as='script'}}" onload="onThemeBundleMain()"></script>
+        <script nonce="{{nonce}}" async defer src="{{cdn 'assets/dist/theme-bundle.main.js' resourceHint='preload' as='script'}}" onload="onThemeBundleMain()"></script>
 
         {{{footer.scripts}}}
     </body>

templates/pages/account/add-payment-method.html

@@ -44,7 +44,7 @@ <h2 class="page-heading">{{lang 'forms.payment_methods.add.heading'}}</h2>
 
         {{#if account_payments}}
             {{{ account_payments }}}
-            <script>
+            <script nonce="{{nonce}}">
                 window.BigCommerce = window.BigCommerce || {};
             </script>
         {{else}}

templates/pages/checkout.html

@@ -4,7 +4,7 @@
 {{{ stylesheet '/assets/css/optimized-checkout.css' }}}
 {{ getFontsCollection }}
 
-<script type="text/javascript">
+<script type="text/javascript" nonce="{{nonce}}">
     window.language = {{{langJson 'optimized_checkout'}}};
 </script>