Adds nonce to Checkout and MyAccount pages

bigcommerce · Jan 3, 2025 · 73a0639 · 73a0639
1 parent 858e19d
commit 73a0639
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,17 +5,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Add nonce to scripts in checkout and account pages [#2525](https://github.com/bigcommerce/cornerstone/pull/2525)
 - Remove escaping of "=" symbol for <head> [#2526](https://github.com/bigcommerce/cornerstone/pull/2526)
 - Add Karla 700 font weight to schema.json and remove italic versions [#2522](https://github.com/bigcommerce/cornerstone/pull/2522)
 - Fix product filter display name in Show More modal window [#2510](https://github.com/bigcommerce/cornerstone/pull/2510)
 - Fix colour value for carousel play-pause button [#2509](https://github.com/bigcommerce/cornerstone/pull/2509)
 - Bulk pricing modal on PLP only displays information for the first product [#2501](https://github.com/bigcommerce/cornerstone/pull/2501)
 - Adding missing product reviews form validation [#2475](https://github.com/bigcommerce/cornerstone/pull/2475)
-- Fix GH build action & added package version and short commit hash to artifact names in GitHub Actions workflow for improved traceability and uniqueness [#2494](https://github.com/bigcommerce/cornerstone/pull/2494)
-- Bump stencil-utils to 6.18.0 [#2493](https://github.com/bigcommerce/cornerstone/pull/2493)
-- 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)
+- Fix GH build action & added package version and short commit hash to artifact names in GitHub Actions workflow for improved traceability and uniqueness. ([#2494](https://github.com/bigcommerce/cornerstone/pull/2494))
+- Bump stencil-utils to 6.18.0 ([#2493](https://github.com/bigcommerce/cornerstone/pull/2493))
+- 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))
 - Use fetch when updating variants in cart [#2521](https://github.com/bigcommerce/cornerstone/pull/2521)
 - Add a region to display the payment promotion widget on the category pages. [#2530](https://github.com/bigcommerce/cornerstone/pull/2530)
 

diff --git a/templates/components/common/breadcrumbs.html b/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",

diff --git a/templates/components/common/polyfill-script.html b/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.

diff --git a/templates/layout/base.html b/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>

diff --git a/templates/pages/account/add-payment-method.html b/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}}

diff --git a/templates/pages/checkout.html b/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>