Roll back custom head & document; add nonce to head and nextscript. #805

timcosgrove · 2024-11-06T01:25:23Z

Description

The corrects the missing i18n text for web components.

Ticket

department-of-veterans-affairs/va.gov-cms#19670

Developer Task

Tasks

Give feedback

PR submitted against the main branch of next-build.
Link to the issue that this PR addresses (if applicable).
Define all changes in your PR and note any changes that could potentially be breaking changes.
PR includes steps to test your changes and links to these changes in the Tugboat preview (if applicable).
Provided before and after screenshots of your changes (if applicable).
Alerted the #accelerated-publishing Slack channel to request a PR review.
You understand that once approved, you are responsible for merging your changes into main. (Note that changes to main will move automatically into production.)
Options

Code diff

The effective code different between the last working version of the file and the new version is as follows:

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index c070a36f..728ac917 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -4,10 +4,11 @@ import Script from 'next/script'
 
 const Document = () => {
   const ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
+  const nonce = '**CSP_NONCE**'
 
   return (
     <Html lang="en" dir="ltr">
-      <Head>
+      <Head nonce={nonce}>
         <meta charSet="utf-8" />
         <link
           href={`${ASSETS_URL}static-pages.css`}
@@ -20,6 +21,7 @@ const Document = () => {
           id="web-components"
           strategy="beforeInteractive"
           src={`${ASSETS_URL}web-components.entry.js`}
+          data-nb-nonce={nonce}
         />
 
         {/* Add vendor file */}
@@ -27,6 +29,7 @@ const Document = () => {
           id="vendor"
           strategy="beforeInteractive"
           src={`${ASSETS_URL}vendor.entry.js`}
+          data-nb-nonce={nonce}
         />
 
         {/* Preconnect to google tag manager domain */}
@@ -97,6 +100,7 @@ const Document = () => {
           noModule
           strategy="afterInteractive"
           src={`${ASSETS_URL}polyfills.entry.js`}
+          data-nb-nonce={nonce}
         />
 
         {/* We participate in the US government’s analytics program. See the data at analytics.usa.gov. https://github.com/digital-analytics-program/gov-wide-code */}
@@ -104,6 +108,7 @@ const Document = () => {
           src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=VA"
           id="_fed_an_ua_tag"
           strategy="afterInteractive"
+          data-nb-nonce={nonce}
           async
         />
       </Head>
@@ -117,7 +122,7 @@ const Document = () => {
           />
         </noscript>
         <Main />
-        <NextScript />
+        <NextScript nonce={nonce} />
       </body>
     </Html>
   )

QA steps

Viewing elements via web inspector

On https://pr805-3h8lqxrf8pgmvcaf2snm8gywogeeyblk.tugboat.vfs.va.gov/pittsburgh-health-care/stories/, any <script> tag with a url like /_next/static/chunks should have nonce="**CSP_NONCE**" on it
On https://pr805-3h8lqxrf8pgmvcaf2snm8gywogeeyblk.tugboat.vfs.va.gov/pittsburgh-health-care/stories/, web-components.entry.js scripts should be present and have should have nonce="**CSP_NONCE**" on them
At the bottom of this page, the pagination should show the word 'Next' with the right arrow: https://pr805-3h8lqxrf8pgmvcaf2snm8gywogeeyblk.tugboat.vfs.va.gov/pittsburgh-health-care/stories/
https://staging.va.gov/outreach-and-events/events/ loads without any CSP errors reported in the console
https://staging.va.gov/outreach-and-events/events/ loads with 'Next' visible in the pagination at the bottom of the page

Reviewer

Reviewing a PR

This section lists items that need to be checked or updated when making changes to this repository.

Standard Checks

Tasks

Give feedback

Code Quality: Readabilty, Naming Conventions, Consistency, Reusability
Test Coverage: 80% coverage
Functionality: Change functions as expected with no additional bugs
Performance: Code does not introduce performance issues
Documentation: Changes are documented in their respective README.md files
Security: Packages have been approved in the TRM
Options

Merging an Approved Layout

When merging a layout, you must ensure that the content type has been turned on for next-build inside the CMS. This CMS flag must be turned on for editors to preview their work using the next build preview server.

Resource types (layouts) that have not been approved by design should NOT be pushed to production. Ensure that slug.tsx does not include your resource type if it is not approved.

The status of layouts should be kept up to date inside templates.md. This includes QA progress, development progress, etc. A link should be provided for where testing can occur.

Merging a Non-Approved Layout

Your new resource type should not be included inside slug.tsx. Items added here will go into production once merged into the main branch. It is imperative that we do not push anything live that has not been approved.

Ensure that this layout has been added to the templates.md file with the current status of the work.

… them through.

edmund-dunn

Everything works as expected. Nice work!

Roll back custom head & document; add nonce to head and nextscript.

c975cfd

va-cms-bot temporarily deployed to Tugboat November 6, 2024 01:25 Destroyed

Removed nonce on webcomponents and vendor scripts because Head passes…

fde6480

… them through.

edmund-dunn approved these changes Nov 7, 2024

View reviewed changes

timcosgrove merged commit bb2cbe1 into main Nov 7, 2024
19 checks passed

timcosgrove deleted the nonce-refinement branch November 7, 2024 19:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Roll back custom head & document; add nonce to head and nextscript. #805

Roll back custom head & document; add nonce to head and nextscript. #805

timcosgrove commented Nov 6, 2024 •

edited by edmund-dunn

Loading

Tasks

Tasks

edmund-dunn left a comment

Roll back custom head & document; add nonce to head and nextscript. #805

Roll back custom head & document; add nonce to head and nextscript. #805

Conversation

timcosgrove commented Nov 6, 2024 • edited by edmund-dunn Loading

Description

Ticket

Developer Task

Tasks

Code diff

QA steps

Reviewer

Reviewing a PR

Standard Checks

Tasks

Merging an Approved Layout

Merging a Non-Approved Layout

edmund-dunn left a comment

Choose a reason for hiding this comment

timcosgrove commented Nov 6, 2024 •

edited by edmund-dunn

Loading