fix: use config service for head.html, rewrite its CSP

.github/workflows/deploy.yaml

@@ -41,14 +41,14 @@ jobs:
 
       - name: Deploy to Cloudflare Workers (production)
         if: github.ref_name == 'main'
-        uses: cloudflare/wrangler-action@v3
+        uses: cloudflare/wrangler-action@v4
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
 
       - name: Deploy to Cloudflare Workers (stage)
         if: github.ref_name == 'stage'
-        uses: cloudflare/wrangler-action@v3
+        uses: cloudflare/wrangler-action@v4
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

README.md

@@ -11,17 +11,29 @@ Prerequisites:
 
 This worker performs all content operations via [da-admin](https://github.com/adobe/da-admin). For local development, you will also need to check out and run da-admin locally.
 
+One read of config.aem.page, pipeline scope, answers existence, head.html and `contentSource`. Its url names the store.
+
+The config service needs a shared secret, so local development points at `dev/lookup-shim.js` instead. Add the org and site to its `SITES` table. A site missing from the table is answered 404. A source url on api.aem.live reads as source-bus, and the table ships one site of each kind, `org/site` and `org/sourcebus`, so both branches can be driven locally.
+
 To run da-universal locally:
 
 1. Clone this repo to your computer.
 1. Run `npm install`
 1. Use `npx wrangler login` if not done before. Walk through the steps in browser.
-1. In a terminal, run `npm run dev` this repo's folder.
+1. Put `HLX_CONFIG_SERVICE_TOKEN="local"` in `.dev.vars.dev`, which is gitignored.
+1. In a terminal, run `npm run dev:lookups` to start the stand-in lookups on port 4713.
+1. In a second terminal, run `npm run dev` in this repo's folder.
 1. The da-ue service API is available via https://localhost:4712
 
+The stand-in does not read the token's value, only that there is one. Without it the lookup goes out as the string `undefined` and comes back 401, the way the real service refuses it, and the worker logs that it is the one at fault.
+
+`npm run dev` sets `UE_HOST` to localhost:4712, so https://localhost:4712 serves the UE-instrumented page rather than the composed page as-is, and points `urn:adobe:aue:config:service` at https://localhost:8000. A Universal Editor service has to be running there for that page to open in the editor.
+
+with the shared secret, use `npm run dev` at the real services instead of the stand-in. Put `HLX_CONFIG_SERVICE_TOKEN="<token>"` in `.dev.vars.dev`, which is gitignored, and run `npm run dev -- --var HLX_CONFIG_SERVICE:https://config.aem.page`.
+
 ### Run on stage
 
-You can deploy da-universal on Cloudflare stage via `npm deploy:stage` to test it in a real worker environment.
+You can deploy da-universal on Cloudflare stage via `npm run deploy:stage` to test it in a real worker environment.
 
 ## Customer documentation
 https://docs.da.live/developers/reference/universal-editor

dev/lookup-shim.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2026 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.
+ */
+
+// stands in for config.aem.page, which needs a shared secret. one read of the pipeline scope
+// answers whether the site exists, its head.html and which store holds it. a site in SITES exists,
+// and one with a source url on api.aem.live is source-bus
+const SITES = {
+  'org/site': 'https://content.da.live/org/site/',
+  'org/sourcebus': 'https://api.aem.live/org/sites/sourcebus/source/',
+};
+
+// what the code bus has at {owner}/{repo}/{ref}/head.html, which the pipeline scope answers with.
+// the policy and the placeholders are what applyCsp keys on, so a page served locally exercises
+// the nonce rewrite, the trusted-types strip and the move-to-http-header deletion
+const HEAD_HTML = '<meta http-equiv="Content-Security-Policy" move-to-http-header="true" content="script-src \'nonce-aem\' \'strict-dynamic\'; style-src \'nonce-aem\'; require-trusted-types-for \'script\'">\n<link rel="stylesheet" href="/styles/styles.css" nonce="aem"/>\n<script src="/scripts/scripts.js" type="module" nonce="aem"></script>\n';
+
+export default {
+  async fetch(req) {
+    const url = new URL(req.url);
+
+    // an unset HLX_CONFIG_SERVICE_TOKEN reaches the header as the string "undefined", and the
+    // real service refuses that the same way it refuses no header at all
+    const token = req.headers.get('x-access-token');
+    if (!token || token === 'undefined') {
+      return new Response('', { status: 401, headers: { 'x-error': 'missing x-access-token.' } });
+    }
+
+    const [ref, site, org] = (url.pathname.split('/')[1] ?? '').split('--');
+    if (!org || !site) {
+      return new Response('', { status: 400, headers: { 'x-error': 'invalid rso path parameter.' } });
+    }
+
+    const source = SITES[`${org}/${site}`];
+    if (!source) {
+      return new Response('', { status: 404, headers: { 'x-error': 'config not found.' } });
+    }
+
+    // both stores are `type: markup`, so only the url separates them
+    const body = JSON.stringify({
+      ref,
+      site,
+      org,
+      head: { html: HEAD_HTML },
+      contentSource: { type: 'markup', url: source },
+    });
+    return new Response(body, { status: 200, headers: { 'content-type': 'application/json' } });
+  },
+};

dev/lookup-shim.toml

@@ -0,0 +1,9 @@
+# the stand-in gets its own config, so wrangler dev does not read wrangler.toml: no daadmin
+# binding to connect, and no HLX_CONFIG_SERVICE_TOKEN to warn about
+name = "da-ue-lookup-shim"
+main = "lookup-shim.js"
+compatibility_date = "2023-11-21"
+
+[dev]
+port = 4713
+inspector_port = 9234

eslint.config.js

@@ -14,7 +14,7 @@ import { defineConfig, globalIgnores } from '@eslint/config-helpers';
 import { recommended, source, test } from '@adobe/eslint-config-helix';
 
 export default defineConfig([
-  globalIgnores(['.vscode/*', '.wrangler/*', 'coverage/*']),
+  globalIgnores(['.vscode/*', '**/.wrangler/**', 'coverage/*']),
   {
     languageOptions: {
       ...recommended.languageOptions,

package.json

@@ -7,6 +7,7 @@
     "deploy": "wrangler deploy",
     "deploy:stage": "wrangler deploy --env stage",
     "dev": "wrangler dev --local-protocol https --env dev",
+    "dev:lookups": "wrangler dev -c dev/lookup-shim.toml",
     "start": "wrangler dev --local-protocol https --env dev",
     "test": "c8 mocha --spec=test/**/*.test.js",
     "lint": "eslint ."

src/handlers/get.js

@@ -9,10 +9,11 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { get404, getRobots } from '../responses/index.js';
+import { empty503, get404, getRobots } from '../responses/index.js';
 import { handleAEMProxyRequest } from '../routes/aem-proxy.js';
 import { getCookie } from '../routes/cookie.js';
 import { daSourceGet } from '../routes/da-admin.js';
+import { UpstreamError } from '../utils/upstream.js';
 
 export default async function getHandler({ req, env, daCtx }) {
   const { path } = daCtx;
@@ -21,11 +22,17 @@ export default async function getHandler({ req, env, daCtx }) {
   if (path.startsWith('/favicon.ico')) return get404();
   if (path.startsWith('/robots.txt')) return getRobots();
 
-  if (path.startsWith('/gimme_cookie')) return getCookie({ req, daCtx });
+  if (path.startsWith('/gimme_cookie')) return getCookie({ req, env, daCtx });
 
   const resourceRegex = /\.(css|js|js\.map|json|xml|woff|woff2|otf|ttf|plain\.html|html)$/i;
   if (resourceRegex.test(path)) {
-    return handleAEMProxyRequest({ req, env, daCtx });
+    try {
+      return await handleAEMProxyRequest({ req, env, daCtx });
+    } catch (e) {
+      if (!(e instanceof UpstreamError)) throw e;
+      console.warn(`503 GET ${path}, ${e.message}`);
+      return empty503(e.message);
+    }
   }
 
   const assetRegex = /\.(png|jpg|jpeg|webp|gif|svg|ico|avif)$/i;
@@ -35,8 +42,14 @@ export default async function getHandler({ req, env, daCtx }) {
       handleAEMProxyRequest({ req, env, daCtx }),
     ]);
 
-    const storeRes = daSourceGetRes.status === 'fulfilled' ? daSourceGetRes.value : undefined;
-    const aemRes = aemProxyRes.status === 'fulfilled' ? aemProxyRes.value : undefined;
+    // logs a rejection rather than rethrowing it, since the other read may still answer
+    const settled = (result, read) => {
+      if (result.status === 'fulfilled') return result.value;
+      console.error(`${read} threw on ${path}`, result.reason);
+      return undefined;
+    };
+    const storeRes = settled(daSourceGetRes, 'the store read');
+    const aemRes = settled(aemProxyRes, 'the aem proxy');
 
     let response;
     if (storeRes?.status === 200) {

src/handlers/head.js

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import { getRobots, head404 } from '../responses/index.js';
+import { empty503, getRobots, head404 } from '../responses/index.js';
 import { handleAEMProxyRequest } from '../routes/aem-proxy.js';
 import { daSourceHead } from '../routes/da-admin.js';
+import { UpstreamError } from '../utils/upstream.js';
 
 // for AEM we reuse the handleAEMProxyRequest for now as GETs are cheap here
 // TODO refine and review for later for a full HEAD requests on AEM
@@ -31,7 +32,13 @@ export default async function headHandler({ req, env, daCtx }) {
 
   const resourceRegex = /\.(css|js|js\.map|json|xml|woff|woff2|otf|ttf|plain\.html|html)$/i;
   if (resourceRegex.test(path)) {
-    return aemHead({ req, env, daCtx });
+    try {
+      return await aemHead({ req, env, daCtx });
+    } catch (e) {
+      if (!(e instanceof UpstreamError)) throw e;
+      console.warn(`503 HEAD ${path}, ${e.message}`);
+      return empty503(e.message);
+    }
   }
 
   const assetRegex = /\.(png|jpg|jpeg|webp|gif|svg|ico|avif)$/i;

src/render/compose.js

@@ -20,6 +20,7 @@ import rewriteIcons from './rewrite-icons.js';
 import { makeImagesRelative } from './rewrite-images.js';
 import extractSectionMetadata from './section-metadata.js';
 import { DEFAULT_HTML_TEMPLATE } from '../utils/constants.js';
+import { PREVIEW_HOST, withUpstream } from '../utils/upstream.js';
 
 /**
  * Injects AEM HTML head entries into the head node of an HTML document.
@@ -98,8 +99,9 @@ export async function composeHtml(daCtx, aemCtx, bodyHtmlStr, headHtmlStr) {
   const bodyTree = fromHtml(bodyHtmlStr, { fragment: true });
   bodyNode.children = bodyTree.children;
 
-  // fetch bulk metadata, extract metadata block from the body and merge them
-  const bulkMetadata = await fetchBulkMetadata(aemCtx);
+  // fetch bulk metadata, extract metadata block from the body and merge them. the sheet is the
+  // only thing here that leaves the worker, so it is the only step that names an upstream
+  const bulkMetadata = await withUpstream(PREVIEW_HOST, () => fetchBulkMetadata(aemCtx));
   const localMetaData = extractLocalMetadata(bodyTree);
   const mergedMetaData = {
     ...localMetaData,

src/render/csp.js

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2026 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 { visit } from 'unist-util-visit';
+
+const NONCE_AEM = "'nonce-aem'";
+const TRUSTED_TYPES_REQUIRE = 'require-trusted-types-for';
+
+function directiveHasNonce(content, name) {
+  return content
+    .split(';')
+    .some((directive) => {
+      const [directiveName, ...values] = directive.trim().split(/\s+/);
+      return directiveName === name && values.includes(NONCE_AEM);
+    });
+}
+
+function removeTrustedTypesRequire(content) {
+  const directives = content.split(';');
+  const filtered = directives.filter(
+    (directive) => directive.trim().split(/\s+/, 1)[0].toLowerCase() !== TRUSTED_TYPES_REQUIRE,
+  );
+  if (filtered.length !== directives.length) {
+    console.warn(`Removed ${TRUSTED_TYPES_REQUIRE} from the composed CSP meta.`);
+  }
+  return filtered.join(';');
+}
+
+function createNonce() {
+  const array = new Uint8Array(18);
+  crypto.getRandomValues(array);
+  return btoa(String.fromCharCode(...array));
+}
+
+/**
+ * @param {import('hast').Root} documentTree the composed document, mutated in place
+ * @returns {string|undefined} the nonce to stamp on injected scripts, or undefined when the
+ *   page carries no policy that asks for one
+ */
+export default function applyCsp(documentTree) {
+  // head.html owns the policy and placeholders; the body is author content that round-trips
+  // rewriting here is what lets the config service answer head.html for UE too. reading it from
+  // the preview host for the pipeline's own rewrite was the alternative, at a round trip per page
+  const scope = select('head', documentTree) ?? documentTree;
+  const meta = select('meta[http-equiv="content-security-policy" i]', scope);
+  const content = meta?.properties.content;
+  if (typeof content !== 'string' || !content.includes(NONCE_AEM)) {
+    return undefined;
+  }
+
+  const scriptNonce = directiveHasNonce(content, 'script-src');
+  const styleNonce = directiveHasNonce(content, 'style-src');
+  const nonce = createNonce();
+
+  meta.properties.content = removeTrustedTypesRequire(
+    content.replaceAll(NONCE_AEM, `'nonce-${nonce}'`),
+  );
+  // the pipeline moves this policy to a response header; we keep it in the document because
+  // frame-ancestors sent as a header stops the editor framing the page, and a meta ignores it
+  delete meta.properties['move-to-http-header'];
+  delete meta.properties['move-as-header'];
+
+  visit(scope, (node) => {
+    if (node.properties?.nonce !== 'aem') return;
+
+    if (scriptNonce
+      && (node.tagName === 'script'
+        || (node.tagName === 'link' && node.properties.as === 'script'))) {
+      node.properties.nonce = nonce;
+      return;
+    }
+
+    if (styleNonce
+      && (node.tagName === 'style'
+        || (node.tagName === 'link' && node.properties.rel?.includes('stylesheet')))) {
+      node.properties.nonce = nonce;
+    }
+  });
+
+  return scriptNonce ? nonce : undefined;
+}

src/render/metadata.js

@@ -14,6 +14,8 @@ import { select } from 'hast-util-select';
 import { readBlockConfig } from '../utils/hast.js';
 import { withAemAuth } from '../utils/aemCtx.js';
 
+const TIMEOUT_MS = 5 * 1000;
+
 export function extractLocalMetadata(bodyTree) {
   const metaBlock = select('div.metadata', bodyTree);
   let metaConfig = {};
@@ -157,7 +159,9 @@ export class Modifiers {
 
 export async function fetchBulkMetadata(aemCtx) {
   const url = new URL('/metadata.json', aemCtx.previewUrl);
-  const response = await fetch(url, withAemAuth(aemCtx));
+  const response = await fetch(url, withAemAuth(aemCtx, {
+    signal: AbortSignal.timeout(TIMEOUT_MS),
+  }));
 
   if (response.ok) {
     const json = await response.json();

src/responses/index.js

@@ -77,6 +77,10 @@ export function post503(message = '', error = '') {
   });
 }
 
+export function post404(message = '') {
+  return daResp({ body: message, status: 404, contentType: 'text/plain; charset=utf-8' });
+}
+
 // RFC 9110 requires an Allow header on a 405, and reads are what is left once the write is gone.
 export function post405(message = '') {
   return daResp({
@@ -91,7 +95,7 @@ export function head401() {
   return new Response(null, { status: 401 });
 }
 
-export function head503(error = '') {
+export function empty503(error = '') {
   return new Response(null, { status: 503, headers: retryHeaders(error) });
 }
 

src/routes/aem-proxy.js

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import { getAemCtx } from '../utils/aemCtx.js';
+import { PREVIEW_HOST, withUpstream } from '../utils/upstream.js';
 import {
   applyQuickEditToScript,
   getQuickEditCookiePath,
@@ -47,7 +48,7 @@ export async function handleAEMProxyRequest({ req, env, daCtx }) {
   }
 
   console.log(`-> ${aemUrl.toString()}`);
-  let response = await fetch(req, { cf: { cacheTtl: 0 } });
+  let response = await withUpstream(PREVIEW_HOST, () => fetch(req, { cf: { cacheTtl: 0 } }));
   console.log(`<- ${aemUrl.toString()}. ${response.status} ${response.statusText}`, { status: response.status, statusText: response.statusText });
 
   const contentType = (response.headers.get('Content-Type') || '').toLowerCase();