feat: Enable CSP with nonce

adobe · Dec 19, 2024 · 2489e05 · 2489e05
1 parent de852c9
commit 2489e05
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 77 deletions.
diff --git a/src/steps/csp.js b/src/steps/csp.js
@@ -34,7 +34,7 @@ function shouldApplyNonce(csp) {
 }
 
 function createAndApplyNonce(res, tree, metaCSP, headersCSP) {
-  const nonce = crypto.randomBytes(16).toString('base64');
+  const nonce = crypto.randomBytes(18).toString('base64');
   let scriptNonceResult = false;
   let styleNonceResult = false;
 
@@ -74,6 +74,12 @@ export function checkResponseBodyForMetaBasedCSP(res) {
 }
 
 export function checkResponseBodyForAEMNonce(res) {
+  /*
+    we only look for 'nonce-aem' (single quote) to see if there is a meta CSP with nonce
+    we don't want to generate nonces if they appear just on script/style tags,
+    as those have no effect without the actual CSP meta (or header).
+    this means it is ok to not check for the "nonce-aem" (double quotes)
+   */
   return res.body?.includes(NONCE_AEM);
 }
 

diff --git a/test/fixtures/code/super-test/static-nonce-header.ref.html b/test/fixtures/code/super-test/static-nonce-header.ref.html
@@ -14,22 +14,22 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css"/>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css"/>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>
 <main>
     <div>
       <h1 id="nonce-test">Nonce Test</h1>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem2.js" type="module"></script>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts2.js" type="module"></script>
-      <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles2.css"/>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 2 </script>
-      <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style2">body {opacity: 1}</style>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem2.js" type="module"></script>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts2.js" type="module"></script>
+      <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles2.css"/>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 2 </script>
+      <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style2">body {opacity: 1}</style>
     </div>
 </main>
 <footer></footer>

diff --git a/test/fixtures/code/super-test/static-nonce-meta-move-as-header.ref.html b/test/fixtures/code/super-test/static-nonce-meta-move-as-header.ref.html
@@ -14,22 +14,22 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css"/>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css"/>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>
 <main>
     <div>
       <h1 id="nonce-test">Nonce Test</h1>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem2.js" type="module"></script>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts2.js" type="module"></script>
-      <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles2.css"/>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 2 </script>
-      <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style2">body {opacity: 1}</style>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem2.js" type="module"></script>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts2.js" type="module"></script>
+      <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles2.css"/>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 2 </script>
+      <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style2">body {opacity: 1}</style>
     </div>
 </main>
 <footer></footer>

diff --git a/test/fixtures/code/super-test/static-nonce-meta.ref.html b/test/fixtures/code/super-test/static-nonce-meta.ref.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-    <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-ckFuZDBtbW1yQW5kMG1tbQ==' 'strict-dynamic'; style-src 'nonce-ckFuZDBtbW1yQW5kMG1tbQ=='; base-uri 'self'; object-src 'none';">
+    <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-ckE0bmQwbW1tckE0bmQwbW1t' 'strict-dynamic'; style-src 'nonce-ckE0bmQwbW1tckE0bmQwbW1t'; base-uri 'self'; object-src 'none';">
     <title>ACME CORP</title>
     <link rel="canonical" href="https://www.adobe.com/nonce-headers-meta">
     <meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tempor congue, nisi erat condimentum nunc, eget tincidunt nisl nunc euismod.">
@@ -15,22 +15,22 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css"/>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css"/>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>
 <main>
     <div>
       <h1 id="nonce-test">Nonce Test</h1>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem2.js" type="module"></script>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts2.js" type="module"></script>
-      <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles2.css"/>
-      <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 2 </script>
-      <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style2">body {opacity: 1}</style>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem2.js" type="module"></script>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts2.js" type="module"></script>
+      <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles2.css"/>
+      <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 2 </script>
+      <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style2">body {opacity: 1}</style>
     </div>
 </main>
 <footer></footer>

diff --git a/test/fixtures/content/nonce-headers-meta.html b/test/fixtures/content/nonce-headers-meta.html
@@ -14,12 +14,12 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <meta http-equiv="content-security-policy" content="script-src 'nonce-ckFuZDBtbW1yQW5kMG1tbQ==' 'strict-dynamic'; style-src 'nonce-ckFuZDBtbW1yQW5kMG1tbQ=='; base-uri 'self'; object-src 'none';">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css"/>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <meta http-equiv="content-security-policy" content="script-src 'nonce-ckE0bmQwbW1tckE0bmQwbW1t' 'strict-dynamic'; style-src 'nonce-ckE0bmQwbW1tckE0bmQwbW1t'; base-uri 'self'; object-src 'none';">
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css"/>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>

diff --git a/test/fixtures/content/nonce-headers.html b/test/fixtures/content/nonce-headers.html
@@ -14,11 +14,11 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css"/>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css"/>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>

diff --git a/test/fixtures/content/nonce-meta-move-as-header.html b/test/fixtures/content/nonce-meta-move-as-header.html
@@ -14,11 +14,11 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css" />
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css" />
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>

diff --git a/test/fixtures/content/nonce-meta.html b/test/fixtures/content/nonce-meta.html
@@ -14,12 +14,12 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <meta http-equiv="content-security-policy" content="script-src 'nonce-ckFuZDBtbW1yQW5kMG1tbQ==' 'strict-dynamic'; style-src 'nonce-ckFuZDBtbW1yQW5kMG1tbQ=='; base-uri 'self'; object-src 'none';">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css"/>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <meta http-equiv="content-security-policy" content="script-src 'nonce-ckE0bmQwbW1tckE0bmQwbW1t' 'strict-dynamic'; style-src 'nonce-ckE0bmQwbW1tckE0bmQwbW1t'; base-uri 'self'; object-src 'none';">
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css"/>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>

diff --git a/test/fixtures/content/nonce-script-only.html b/test/fixtures/content/nonce-script-only.html
@@ -14,10 +14,10 @@
     <meta name="twitter:image" content="https://www.adobe.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
     <meta name="locale" content="en-US">
     <meta name="zero-cell" content="0">
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/aem.js" type="module"></script>
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ==" src="/scripts/scripts.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/aem.js" type="module"></script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t" src="/scripts/scripts.js" type="module"></script>
     <link rel="stylesheet" href="/styles/styles.css" />
-    <script nonce="ckFuZDBtbW1yQW5kMG1tbQ=="> const a = 1 </script>
+    <script nonce="ckE0bmQwbW1tckE0bmQwbW1t"> const a = 1 </script>
     <style id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>

diff --git a/test/fixtures/content/nonce-style-only.html b/test/fixtures/content/nonce-style-only.html
@@ -16,9 +16,9 @@
     <meta name="zero-cell" content="0">
     <script src="/scripts/aem.js" type="module"></script>
     <script src="/scripts/scripts.js" type="module"></script>
-    <link nonce="ckFuZDBtbW1yQW5kMG1tbQ==" rel="stylesheet" href="/styles/styles.css" />
+    <link nonce="ckE0bmQwbW1tckE0bmQwbW1t" rel="stylesheet" href="/styles/styles.css" />
     <script> const a = 1 </script>
-    <style nonce="ckFuZDBtbW1yQW5kMG1tbQ==" id="at-body-style">body {opacity: 1}</style>
+    <style nonce="ckE0bmQwbW1tckE0bmQwbW1t" id="at-body-style">body {opacity: 1}</style>
 </head>
 <body>
 <header></header>