Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Nov 7, 2024
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c975cfd
Roll back custom head & document; add nonce to head and nextscript.
timcosgrove Nov 6, 2024
fde6480
Removed nonce on webcomponents and vendor scripts because Head passes…
timcosgrove Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 114 additions & 133 deletions src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,129 @@
import Document, { Html, Main, NextScript, Head } from 'next/document'
import { Html, Main, NextScript, Head } from 'next/document'
import { GTM_ID } from '@/lib/analytics'
import Script from 'next/script'
import React from 'react'

class CustomHead extends Head {
getScripts(files) {
const originalScripts = super.getScripts(files)
return originalScripts.map((script) => {
return React.cloneElement(script, {
'data-nb-nonce': '**CSP_NONCE**',
})
})
}
}

class CustomDocument extends Document {
#ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
#nonce = '**CSP_NONCE**'
const Document = () => {
const ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
const nonce = '**CSP_NONCE**'

render() {
return (
<Html lang="en" dir="ltr">
<CustomHead>
<meta charSet="utf-8" />
<link
href={`${this.#ASSETS_URL}static-pages.css`}
data-entry-name="static-pages.css"
rel="stylesheet"
/>
<link rel="stylesheet" href={`${this.#ASSETS_URL}style.css`} />
return (
<Html lang="en" dir="ltr">
<Head nonce={nonce}>
<meta charSet="utf-8" />
<link
href={`${ASSETS_URL}static-pages.css`}
data-entry-name="static-pages.css"
rel="stylesheet"
/>
<link rel="stylesheet" href={`${ASSETS_URL}style.css`} />

<Script
id="web-components"
strategy="beforeInteractive"
src={`${this.#ASSETS_URL}web-components.entry.js`}
data-nb-nonce={this.#nonce}
/>
<Script
id="web-components"
strategy="beforeInteractive"
src={`${ASSETS_URL}web-components.entry.js`}
/>

{/* Add vendor file */}
<Script
id="vendor"
strategy="beforeInteractive"
src={`${this.#ASSETS_URL}vendor.entry.js`}
data-nb-nonce={this.#nonce}
/>
{/* Add vendor file */}
<Script
id="vendor"
strategy="beforeInteractive"
src={`${ASSETS_URL}vendor.entry.js`}
/>

{/* Preconnect to google tag manager domain */}
<link rel="preconnect" href="https://www.googletagmanager.com" />
{/* Preconnect to google tag manager domain */}
<link rel="preconnect" href="https://www.googletagmanager.com" />

{/* Preload main fonts */}
<link
rel="preload"
href={`${this.#ASSETS_URL}sourcesanspro-bold-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${this.#ASSETS_URL}sourcesanspro-regular-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${this.#ASSETS_URL}bitter-bold.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${this.#ASSETS_URL}fa-solid-900.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{/* Preload main fonts */}
<link
rel="preload"
href={`${ASSETS_URL}sourcesanspro-bold-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${ASSETS_URL}sourcesanspro-regular-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${ASSETS_URL}bitter-bold.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${ASSETS_URL}fa-solid-900.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>

{/* Load Icons */}
<link
href="/img/design/icons/apple-touch-icon.png"
rel="apple-touch-icon-precomposed"
/>
<link
href="/img/design/icons/apple-touch-icon-72x72.png"
rel="apple-touch-icon-precomposed"
sizes="72x72"
/>
<link
href="/img/design/icons/apple-touch-icon-114x114.png"
rel="apple-touch-icon-precomposed"
sizes="114x114"
/>
<link
href="/img/design/icons/apple-touch-icon-152x152.png"
rel="apple-touch-icon-precomposed"
sizes="144x144"
/>
<link
rel="shortcut icon"
sizes="any"
href="/img/design/icons/favicon.ico"
/>
{/* Load Icons */}
<link
href="/img/design/icons/apple-touch-icon.png"
rel="apple-touch-icon-precomposed"
/>
<link
href="/img/design/icons/apple-touch-icon-72x72.png"
rel="apple-touch-icon-precomposed"
sizes="72x72"
/>
<link
href="/img/design/icons/apple-touch-icon-114x114.png"
rel="apple-touch-icon-precomposed"
sizes="114x114"
/>
<link
href="/img/design/icons/apple-touch-icon-152x152.png"
rel="apple-touch-icon-precomposed"
sizes="144x144"
/>
<link
rel="shortcut icon"
sizes="any"
href="/img/design/icons/favicon.ico"
/>

{/* Add web components */}
<link
rel="stylesheet"
href={`${this.#ASSETS_URL}web-components.css`}
/>
{/* Add web components */}
<link rel="stylesheet" href={`${ASSETS_URL}web-components.css`} />

{/* Add polyfills */}
<Script
id="polyfills"
noModule
strategy="afterInteractive"
src={`${this.#ASSETS_URL}polyfills.entry.js`}
data-nb-nonce={this.#nonce}
/>
{/* Add polyfills */}
<Script
id="polyfills"
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 */}
<Script
src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=VA"
id="_fed_an_ua_tag"
strategy="afterInteractive"
async
data-nb-nonce={this.#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 */}
<Script
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>
<body className="merger">
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</CustomHead>
<body className="merger">
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
<Main />
<NextScript />
</body>
</Html>
)
}
</noscript>
<Main />
<NextScript nonce={nonce} />
</body>
</Html>
)
}

export default CustomDocument
export default Document
Loading