feat: Enable CSP with nonce for Helix 4

package.json

@@ -60,6 +60,7 @@
     "mdast-util-to-string": "4.0.0",
     "micromark-util-subtokenize": "2.0.4",
     "mime": "4.0.6",
+    "parse5": "7.2.1",
     "rehype-format": "5.0.1",
     "rehype-parse": "9.0.1",
     "remark-parse": "11.0.0",

src/html-pipe.js

@@ -171,6 +171,7 @@ export async function htmlPipe(state, req) {
 
     if (state.content.sourceBus === 'code' || state.info.originalExtension === '.md') {
       state.timer?.update('serialize');
+      await setCustomResponseHeaders(state, req, res);
       await renderCode(state, req, res);
     } else {
       state.timer?.update('parse');
@@ -187,14 +188,14 @@ export async function htmlPipe(state, req) {
       await createPictures(state);
       await extractMetaData(state, req);
       await addHeadingIds(state);
+      await setCustomResponseHeaders(state, req, res);
       await render(state, req, res);
       state.timer?.update('serialize');
       await tohtml(state, req, res);
       await applyMetaLastModified(state, res);
     }
 
     setLastModified(state, res);
-    await setCustomResponseHeaders(state, req, res);
     await setXSurrogateKeyHeader(state, req, res);
   } catch (e) {
     res.error = e.message;

src/steps/csp.js

@@ -0,0 +1,235 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { select } from 'hast-util-select';
+import { Tokenizer } from 'parse5';
+import { remove } from 'unist-util-remove';
+import { visit } from 'unist-util-visit';
+// eslint-disable-next-line import/no-unresolved
+import cryptoImpl from '#crypto';
+
+export const NONCE_AEM = '\'nonce-aem\'';
+
+/**
+ * Parse a CSP string into its directives
+ * @param {string | undefined | null} csp
+ * @returns {Object}
+ */
+function parseCSP(csp) {
+  if (!csp) {
+    return {};
+  }
+
+  const parts = csp.split(';');
+  const result = {};
+  parts.forEach((part) => {
+    const [directive, ...values] = part.trim().split(' ');
+    result[directive] = values.join(' ');
+  });
+  return result;
+}
+
+/**
+ * Computes where nonces should be applied
+ * @param {string | null | undefined} metaCSPText The actual CSP value from the meta tag
+ * @param {string | null | undefined} headersCSPText The actual CSP value from the headers
+ * @returns {scriptNonce: boolean, styleNonce: boolean}
+ */
+function shouldApplyNonce(metaCSPText, headersCSPText) {
+  const metaBased = parseCSP(metaCSPText);
+  const headersBased = parseCSP(headersCSPText);
+  return {
+    scriptNonce: metaBased['script-src']?.includes(NONCE_AEM)
+      || headersBased['script-src']?.includes(NONCE_AEM),
+    styleNonce: metaBased['style-src']?.includes(NONCE_AEM)
+      || headersBased['style-src']?.includes(NONCE_AEM),
+  };
+}
+
+/**
+ * Create a nonce for CSP
+ * @returns {string}
+ */
+function createNonce() {
+  const array = new Uint8Array(18);
+  cryptoImpl.getRandomValues(array);
+  return btoa(String.fromCharCode(...array));
+}
+
+/**
+ * Get the applied CSP header from a response
+ * @param {PipelineResponse} res
+ * @returns {string}
+ */
+export function getHeaderCSP(res) {
+  return res.headers?.get('content-security-policy');
+}
+
+/**
+ * Apply CSP with nonces on an AST
+ * @param {PipelineResponse} res
+ * @param {Object} tree
+ * @param {Object} metaCSP
+ * @param {string} headersCSP
+ */
+function createAndApplyNonceOnAST(res, tree, metaCSP, headersCSP) {
+  const nonce = createNonce();
+  const { scriptNonce, styleNonce } = shouldApplyNonce(metaCSP?.properties.content, headersCSP);
+
+  if (metaCSP) {
+    metaCSP.properties.content = metaCSP.properties.content.replaceAll(NONCE_AEM, `'nonce-${nonce}'`);
+  }
+
+  if (headersCSP) {
+    res.headers.set('content-security-policy', headersCSP.replaceAll(NONCE_AEM, `'nonce-${nonce}'`));
+  }
+
+  visit(tree, (node) => {
+    if (scriptNonce && node.tagName === 'script' && node.properties?.nonce === 'aem') {
+      node.properties.nonce = nonce;
+      return;
+    }
+
+    if (styleNonce
+      && (node.tagName === 'style' || (node.tagName === 'link' && node.properties?.rel?.[0] === 'stylesheet'))
+      && node.properties?.nonce === 'aem'
+    ) {
+      node.properties.nonce = nonce;
+    }
+  });
+}
+
+export function checkResponseBodyForMetaBasedCSP(res) {
+  return res.body?.includes('http-equiv="content-security-policy"')
+    || res.body?.includes('http-equiv="Content-Security-Policy"');
+}
+
+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);
+}
+
+export function getMetaCSP(tree) {
+  return select('meta[http-equiv="content-security-policy"]', tree)
+    || select('meta[http-equiv="Content-Security-Policy"]', tree);
+}
+
+export function contentSecurityPolicyOnAST(res, tree) {
+  const metaCSP = getMetaCSP(tree);
+  const headersCSP = getHeaderCSP(res);
+
+  if (!metaCSP && !headersCSP) {
+    // No CSP defined
+    return;
+  }
+
+  // CSP with nonce
+  if (metaCSP?.properties.content.includes(NONCE_AEM) || headersCSP?.includes(NONCE_AEM)) {
+    createAndApplyNonceOnAST(res, tree, metaCSP, headersCSP);
+  }
+
+  if (metaCSP?.properties['move-as-header'] === 'true') {
+    if (!headersCSP) {
+      // if we have a CSP in meta but no CSP in headers
+      // we can move the CSP from meta to headers, if requested
+      res.headers.set('content-security-policy', metaCSP.properties.content);
+      remove(tree, null, metaCSP);
+    } else {
+      delete metaCSP.properties['move-as-header'];
+    }
+  }
+}
+
+export function contentSecurityPolicyOnCode(state, res) {
+  if (state.type !== 'html') {
+    return;
+  }
+
+  const cspHeader = getHeaderCSP(res);
+  if (!(
+    cspHeader?.includes(NONCE_AEM)
+    || (checkResponseBodyForMetaBasedCSP(res) && checkResponseBodyForAEMNonce(res))
+  )) {
+    return;
+  }
+
+  const nonce = createNonce();
+  let { scriptNonce, styleNonce } = shouldApplyNonce(null, cspHeader);
+
+  const html = res.body;
+  const chunks = [];
+  let lastOffset = 0;
+
+  const getRawHTML = (token) => html.slice(token.location.startOffset, token.location.endOffset);
+
+  const tokenizer = new Tokenizer({
+    sourceCodeLocationInfo: true,
+  }, {
+    onStartTag(tag) {
+      chunks.push(html.slice(lastOffset, tag.location.startOffset));
+      try {
+        if (tag.tagName === 'meta'
+          && tag.attrs.find(
+            (attr) => attr.name.toLowerCase() === 'http-equiv' && attr.value.toLowerCase() === 'content-security-policy',
+          )
+        ) {
+          const contentAttr = tag.attrs.find((attr) => attr.name.toLowerCase() === 'content');
+          if (contentAttr) {
+            ({ scriptNonce, styleNonce } = shouldApplyNonce(contentAttr.value, cspHeader));
+
+            if (!cspHeader && tag.attrs.find((attr) => attr.name === 'move-as-header' && attr.value === 'true')) {
+              res.headers.set('content-security-policy', contentAttr.value.replaceAll(NONCE_AEM, `'nonce-${nonce}'`));
+              return; // don't push the chunk so it gets removed from the response body
+            }
+            chunks.push(getRawHTML(tag).replaceAll(NONCE_AEM, `'nonce-${nonce}'`));
+            return;
+          }
+        }
+
+        if (scriptNonce && tag.tagName === 'script' && tag.attrs.find((attr) => attr.name === 'nonce' && attr.value === 'aem')) {
+          chunks.push(getRawHTML(tag).replace(/nonce="aem"/i, `nonce="${nonce}"`));
+          return;
+        }
+
+        if (styleNonce && (tag.tagName === 'style' || tag.tagName === 'link') && tag.attrs.find((attr) => attr.name === 'nonce' && attr.value === 'aem')) {
+          chunks.push(getRawHTML(tag).replace(/nonce="aem"/i, `nonce="${nonce}"`));
+          return;
+        }
+
+        chunks.push(getRawHTML(tag));
+      } finally {
+        lastOffset = tag.location.endOffset;
+      }
+    },
+    // no-op callbacks. onStartTag will take care of these
+    onComment(_) {},
+    onDoctype(_) {},
+    onEndTag(_) {},
+    onEof(_) {},
+    onCharacter(_) {},
+    onNullCharacter(_) {},
+    onWhitespaceCharacter(_) {},
+    onParseError(_) {},
+  });
+
+  tokenizer.write(html);
+  chunks.push(html.slice(lastOffset));
+
+  res.body = chunks.join('');
+  if (cspHeader) {
+    res.headers.set('content-security-policy', cspHeader.replaceAll(NONCE_AEM, `'nonce-${nonce}'`));
+  }
+}

src/steps/fetch-404.js

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import { extractLastModified, recordLastModified } from '../utils/last-modified.js';
+import { contentSecurityPolicyOnCode } from './csp.js';
 import { getPathKey } from './set-x-surrogate-key-header.js';
 
 /**
@@ -34,6 +35,7 @@ export default async function fetch404(state, req, res) {
 
     // keep 404 response status
     res.body = ret.body;
+    contentSecurityPolicyOnCode(state, res);
     res.headers.set('last-modified', ret.headers.get('last-modified'));
     res.headers.set('content-type', 'text/html; charset=utf-8');
   }

src/steps/render-code.js

@@ -10,6 +10,9 @@
  * governing permissions and limitations under the License.
  */
 import mime from 'mime';
+import {
+  contentSecurityPolicyOnCode,
+} from './csp.js';
 
 const CHARSET_RE = /charset=([^()<>@,;:"/[\]?.=\s]*)/i;
 
@@ -32,4 +35,6 @@ export default async function renderCode(state, req, res) {
     }
   }
   res.headers.set('content-type', contentType);
+
+  contentSecurityPolicyOnCode(state, res);
 }

src/steps/render.js

@@ -15,6 +15,7 @@ import { h } from 'hastscript';
 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
 import { cleanupHeaderValue } from '@adobe/helix-shared-utils';
+import { contentSecurityPolicyOnAST } from './csp.js';
 
 function appendElement($parent, $el) {
   if ($el) {
@@ -102,6 +103,8 @@ export default async function render(state, req, res) {
     const $headHtml = await unified()
       .use(rehypeParse, { fragment: true })
       .parse(headHtml);
+
+    contentSecurityPolicyOnAST(res, $headHtml);
     $head.children.push(...$headHtml.children);
   } else {
     appendElement($head, createElement('meta', 'name', 'viewport', 'content', 'width=device-width, initial-scale=1'));

test/FileS3Loader.js

@@ -24,6 +24,7 @@ export class FileS3Loader {
       },
       statusCodeOverrides: {},
       rewrites: [],
+      bodyRewrites: {},
       headerOverride: {},
     });
   }
@@ -33,6 +34,11 @@ export class FileS3Loader {
     return this;
   }
 
+  rewriteBody(fileName, body) {
+    this.bodyRewrites[fileName] = body;
+    return this;
+  }
+
   status(fileName, status) {
     this.statusCodeOverrides[fileName] = status;
     return this;
@@ -68,11 +74,21 @@ export class FileS3Loader {
       };
     }
 
-    const file = path.resolve(dir, fileName);
+    const bodyRewrite = this.bodyRewrites[fileName];
+
     try {
-      const body = await readFile(file, 'utf-8');
-      // eslint-disable-next-line no-console
-      console.log(`FileS3Loader: loading ${bucketId}/${fileName} -> 200`);
+      let body;
+      if (bodyRewrite) {
+        body = bodyRewrite;
+        // eslint-disable-next-line no-console
+        console.log(`FileS3Loader: loading ${bucketId}/${fileName} with re-written body -> 200`);
+      } else {
+        const file = path.resolve(dir, fileName);
+        body = await readFile(file, 'utf-8');
+        // eslint-disable-next-line no-console
+        console.log(`FileS3Loader: loading ${bucketId}/${fileName} -> 200`);
+      }
+
       return {
         status: 200,
         body,