From c7d0210261251e85cf2feebbb405a1ac6385a69b Mon Sep 17 00:00:00 2001
From: "crawlproof[bot]" <286981042+crawlproof[bot]@users.noreply.github.com>
Date: Sat, 29 Aug 2026 06:00:07 +0000
Subject: [PATCH 1/2] Add CrawlProof ad units

---
 apps/web/src/components/Layout.jsx | 6 ++++++
 1 file changed, 6 insertions(+)
diff --git a/apps/web/src/components/Layout.jsx b/apps/web/src/components/Layout.jsx
index 1386afe..c3317fa 100644
--- a/apps/web/src/components/Layout.jsx
+++ b/apps/web/src/components/Layout.jsx
@@ -2,6 +2,7 @@ import { buildDate, config, siteName } from '@d3vices/config';
 import { GROUPS, TESTS, testsInGroup } from '@d3vices/tests/registry';
 import { THEME_SCRIPT } from '../inline-scripts.js';
 import { RackNav } from './RackNav.jsx';
+import Script from "next/script";
 
 const ASSET_VERSION = process.env.RAILWAY_GIT_COMMIT_SHA?.slice(0, 8) || String(Date.now());
 
@@ -115,6 +116,11 @@ export function Layout({
           <span class="status-bar-note">NOTHING LEAVES THIS MACHINE</span>
         </div>
         <script type="module" src={`/static/js/app.js?v=${ASSET_VERSION}`} />
+              <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="banner_300x250" />
+        <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="banner_728x90" />
+        <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="banner_320x50" />
+        <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="text_link" />
+        <Script src="https://crawlproof.com/ad.js" strategy="afterInteractive" />
       </body>
     </html>
   );

From 8b63db8cd7bdfd2eeb2955b41d545307cd46f36d Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Sat, 29 Aug 2026 06:11:41 +0000
Subject: [PATCH 2/2] Sell one ad, without spending the security policy on it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The generated embed did not belong to this codebase. It imported
`next/script` into a Bun/Hono app that has no Next in it, which is what
CI was failing on, and it stacked all four ad sizes at the bottom of
`<body>` on every page, where three of them would have been laid out at a
fixed pixel width in a column that is not that width.

The deeper problem was quieter. `ad.js` injects each creative as a
`srcdoc` iframe, and a srcdoc document inherits the embedder's
Content-Security-Policy — so the creative's own `<style>` block and its
remote images would only have rendered if this site added
`'unsafe-inline'` to `style-src` and opened `img-src` to the web, on
every page, for an ad. The policy is a large part of what this site is.

`/api/ads/frame` serves the same creative as a real cross-origin
document, which carries its own policy. So the whole of advertising here
is one iframe and one `frame-src` entry: no third-party script runs, no
cookie is set, and nothing is written to local storage — the ad tag would
have minted a permanent `crawlproof.visitor` id there, which is exactly
what the privacy page promises does not happen.

Two placements, both `text_link`, the one format built to fill its
container: below the instrument and its FAQ on a test page, and in the
seam after the rack on the home page. Never above a test — someone who
came to find out whether their microphone works should reach it without
passing an ad. An unsold slot answers with a blank document, and nothing
on this side can see that across an origin, so the unit is a strip of
whitespace with no border and no ground of its own: empty, it reads as
the gap between two sections, which is where it was put.

The static export switches advertising off before it renders anything.
The desktop app ships that output and makes no network request unless you
run the network test, and an ad frame is a network request.

The privacy page now says all of this, and while it was open: it claimed
no scripts or fonts were loaded from anyone else's server, which has not
been true since the page started loading two typefaces from Google.
---
 apps/web/public/static/css/style.css | 41 ++++++++++++++++++
 apps/web/src/app.js                  | 17 +++++++-
 apps/web/src/components/AdUnit.jsx   | 62 ++++++++++++++++++++++++++++
 apps/web/src/components/Layout.jsx   |  6 ---
 apps/web/src/export.js               | 17 +++++++-
 apps/web/src/pages/Home.jsx          |  7 ++++
 apps/web/src/pages/Privacy.jsx       | 26 ++++++++++--
 apps/web/src/pages/TestPage.jsx      |  8 ++++
 packages/config/src/index.js         | 13 ++++++
 9 files changed, 185 insertions(+), 12 deletions(-)
 create mode 100644 apps/web/src/components/AdUnit.jsx

diff --git a/apps/web/public/static/css/style.css b/apps/web/public/static/css/style.css
index d3485eb..8b00818 100644
--- a/apps/web/public/static/css/style.css
+++ b/apps/web/public/static/css/style.css
@@ -776,6 +776,47 @@ a:hover {
   margin-top: 2.2rem;
 }
 
+/* ------------------------------------------------------------------- ads */
+
+/* One sponsored line, sold through CrawlProof. Sized here rather than by an ad
+   script, so it occupies the same space before and after it loads and moves
+   nothing underneath it.
+
+   An unsold slot answers with a blank document, and nothing on this side can
+   see that across an origin — so the unit is styled as a strip of whitespace
+   with no border, no ground and no label of its own. Empty, it reads as the gap
+   between two sections, which is where it was put. */
+.ad-unit {
+  display: block;
+  margin: 2.6rem 0;
+}
+.ad-unit iframe {
+  display: block;
+  border: 0;
+  max-width: 100%;
+}
+/* The fluid format: the creative lays itself out at whatever width it is given
+   and drops its second line on a narrow one. */
+.ad-unit[data-ad-format="text_link"] iframe {
+  width: 100%;
+  height: 40px;
+}
+/* The banner creatives are laid out at a fixed pixel width inside the frame, so
+   a narrowed frame would crop one rather than reflow it. They keep their own
+   width and centre instead. */
+.ad-unit:not([data-ad-format="text_link"]) iframe {
+  margin-inline: auto;
+}
+.ad-label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.17em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
 /* --------------------------------------------------------------- test page */
 
 /* Test pages run as a rack: the instrument list stays put, the bench changes. */
diff --git a/apps/web/src/app.js b/apps/web/src/app.js
index f0ebfba..503f006 100644
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -35,7 +35,8 @@ app.use('*', async (c, next) => {
 
 /**
  * The analytics script, when one is configured, is the only third-party origin
- * the policy below has to make room for.
+ * the policy below has to make room for in `script-src`. The ad frame is the
+ * other third party, and it needs no script source at all.
  */
 const analyticsOrigin = (() => {
   if (!config.analytics.src) return null;
@@ -71,6 +72,20 @@ const CSP = [
   `connect-src 'self'${analyticsOrigin ? ` ${analyticsOrigin}` : ''}`,
   "worker-src 'self'",
   "manifest-src 'self'",
+  /**
+   * Advertising costs exactly one directive, and deliberately so. The ad is a
+   * plain cross-origin document in an iframe, which carries its own policy, so
+   * nothing else here has to move. The vendor's own snippet would have needed
+   * `script-src` for its tag, `connect-src` for the fetch behind it, and then —
+   * because it injects the creative as `srcdoc`, and a srcdoc document inherits
+   * the embedder's policy — `'unsafe-inline'` in `style-src` plus a wide-open
+   * `img-src` for every page on the site. See AdUnit.jsx.
+   *
+   * Omitted rather than set to 'none' when there is no slot: `default-src`
+   * already keeps frames to this origin, and a bare 'none' would be a rule
+   * about something nothing on the site does.
+   */
+  ...(config.ads.slot ? [`frame-src ${config.ads.origin}`] : []),
 ].join('; ');
 
 /**
diff --git a/apps/web/src/components/AdUnit.jsx b/apps/web/src/components/AdUnit.jsx
new file mode 100644
index 0000000..2573614
--- /dev/null
+++ b/apps/web/src/components/AdUnit.jsx
@@ -0,0 +1,62 @@
+import { config } from '@d3vices/config';
+
+/**
+ * One CrawlProof ad unit, embedded as a script-free cross-origin iframe.
+ *
+ * The generated install snippet loads `crawlproof.com/ad.js`, which fills each
+ * placeholder with a `srcdoc` iframe. A srcdoc document inherits the embedding
+ * page's Content-Security-Policy, so the creative's own `<style>` block and its
+ * remote images would render only if this site added `'unsafe-inline'` to
+ * `style-src` and opened `img-src` to the web — on every page, for an ad. The
+ * policy in app.js is a large part of what this site is; it is not worth that.
+ *
+ * `/api/ads/frame` returns the same creative as a real cross-origin document,
+ * which carries its own policy. This end needs one `frame-src` entry, runs no
+ * third-party JavaScript, sets no cookie, and — unlike the script tag, which
+ * mints a `crawlproof.visitor` id — writes nothing into this origin's local
+ * storage. The privacy page can go on saying what it says.
+ *
+ * The cost of having no script is that nothing here can measure the viewport,
+ * and every banner creative is laid out at a fixed pixel width inside the frame
+ * (a narrowed iframe clips it rather than reflowing it). `text_link` is the one
+ * format built to fill its container, so it is the default and the only one
+ * that belongs in a column whose width is not known in advance.
+ */
+const SIZES = {
+  banner_300x250: [300, 250],
+  banner_728x90: [728, 90],
+  banner_320x50: [320, 50],
+  // Fluid: the creative fills whatever width the frame is given.
+  text_link: [null, 40],
+};
+
+export function AdUnit({ format = 'text_link' }) {
+  const { origin, slot } = config.ads;
+  // No slot configured — the desktop export, and any checkout that has not set
+  // one — renders nothing at all rather than an empty box.
+  if (!slot) return null;
+  const size = SIZES[format];
+  if (!size) return null;
+  const [width, height] = size;
+  const src = `${origin}/api/ads/frame?slot=${encodeURIComponent(slot)}&format=${encodeURIComponent(format)}`;
+
+  return (
+    <aside class="ad-unit" data-ad-format={format}>
+      {/* The text link carries its own "Sponsored" mark inside the frame. The
+          banner creatives do not, so those get a label out here. */}
+      {format === 'text_link' ? null : <span class="ad-label">Advertisement</span>}
+      {/* No allow-scripts and no allow-same-origin: the creative is static
+          HTML. The popup permissions are what let its click-through open a new
+          tab, which is the only thing it is allowed to do. */}
+      <iframe
+        src={src}
+        title="Advertisement"
+        width={width ?? undefined}
+        height={height}
+        loading="lazy"
+        scrolling="no"
+        sandbox="allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
+      />
+    </aside>
+  );
+}
diff --git a/apps/web/src/components/Layout.jsx b/apps/web/src/components/Layout.jsx
index c3317fa..1386afe 100644
--- a/apps/web/src/components/Layout.jsx
+++ b/apps/web/src/components/Layout.jsx
@@ -2,7 +2,6 @@ import { buildDate, config, siteName } from '@d3vices/config';
 import { GROUPS, TESTS, testsInGroup } from '@d3vices/tests/registry';
 import { THEME_SCRIPT } from '../inline-scripts.js';
 import { RackNav } from './RackNav.jsx';
-import Script from "next/script";
 
 const ASSET_VERSION = process.env.RAILWAY_GIT_COMMIT_SHA?.slice(0, 8) || String(Date.now());
 
@@ -116,11 +115,6 @@ export function Layout({
           <span class="status-bar-note">NOTHING LEAVES THIS MACHINE</span>
         </div>
         <script type="module" src={`/static/js/app.js?v=${ASSET_VERSION}`} />
-              <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="banner_300x250" />
-        <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="banner_728x90" />
-        <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="banner_320x50" />
-        <div data-cp-ad="" data-slot="f54a21ad-3db6-4a62-a9f4-93d505c221c9" data-format="text_link" />
-        <Script src="https://crawlproof.com/ad.js" strategy="afterInteractive" />
       </body>
     </html>
   );
diff --git a/apps/web/src/export.js b/apps/web/src/export.js
index d2cec0b..35468f8 100644
--- a/apps/web/src/export.js
+++ b/apps/web/src/export.js
@@ -6,8 +6,21 @@
  */
 import { cp, mkdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
-import { TESTS } from '@d3vices/tests/registry';
-import app from './app.js';
+
+// The desktop app ships this output and makes no network request unless you run
+// the network test — a promise the privacy page makes on its behalf. An ad frame
+// is a network request, so advertising is switched off here rather than left to
+// whoever runs the build.
+//
+// Everything that could reach the config is imported after the assignment, and
+// dynamically: a static import is evaluated before the first statement in this
+// file, so the config would have read the variable as it was and the desktop
+// build would have quietly shipped ads.
+process.env.ADS_SLOT = '';
+const [{ TESTS }, { default: app }] = await Promise.all([
+  import('@d3vices/tests/registry'),
+  import('./app.js'),
+]);
 
 const outDir = process.argv[2] || join(import.meta.dir, '../../../dist/site');
 
diff --git a/apps/web/src/pages/Home.jsx b/apps/web/src/pages/Home.jsx
index 88dd249..26361df 100644
--- a/apps/web/src/pages/Home.jsx
+++ b/apps/web/src/pages/Home.jsx
@@ -1,5 +1,6 @@
 import { buildDate, config } from '@d3vices/config';
 import { GROUPS, TESTS, testsInGroup } from '@d3vices/tests/registry';
+import { AdUnit } from '../components/AdUnit.jsx';
 import { Layout } from '../components/Layout.jsx';
 
 /** Questions about the site rather than about one instrument. */
@@ -179,6 +180,12 @@ export function Home() {
         ))}
       </section>
 
+      {/* After the rack, not before it. Whoever came here to test something has
+          already been handed the whole list; this sits in the seam between the
+          instruments and the copy about them, where a section break was going
+          to be anyway. */}
+      <AdUnit />
+
       <section class="section section-split">
         <div>
           <h2>Why another device tester?</h2>
diff --git a/apps/web/src/pages/Privacy.jsx b/apps/web/src/pages/Privacy.jsx
index d46436e..51ca9c0 100644
--- a/apps/web/src/pages/Privacy.jsx
+++ b/apps/web/src/pages/Privacy.jsx
@@ -40,10 +40,30 @@ export function Privacy() {
 
         <h2>Third parties</h2>
         <p>
-          {config.analytics.src
-            ? 'A privacy-preserving, cookie-free analytics endpoint records page views in aggregate. It sets no cookie and does not fingerprint you.'
-            : 'None. No analytics, no advertising, no fonts or scripts loaded from anyone else’s server.'}
+          The two typefaces are loaded from Google Fonts, so fetching them tells Google that a browser at your
+          address asked for a font file. Nothing else about you goes with it.
         </p>
+        {config.analytics.src ? (
+          <p>
+            A privacy-preserving, cookie-free analytics endpoint records page views in aggregate. It sets no
+            cookie and does not fingerprint you.
+          </p>
+        ) : null}
+        {config.ads.slot ? (
+          <p>
+            There is one advertisement on some pages, sold through CrawlProof, and it is what pays for the
+            site. It is embedded the quiet way: a plain frame containing a page from their server, rather than
+            the usual advertising script. No third-party code runs on this page, no cookie is set, and nothing
+            is written to the local storage described above — an ad script would have put a permanent visitor
+            id there, and that is precisely why there is no ad script. Loading the frame tells CrawlProof what
+            any request tells a server: your IP address, your browser’s user agent, and which page the ad
+            appeared on. Which ad you get is chosen from that and nothing else. No reading any test takes is
+            available to it, or to anyone.
+          </p>
+        ) : null}
+        {!config.analytics.src && !config.ads.slot ? (
+          <p>Nothing further. No analytics and no advertising.</p>
+        ) : null}
 
         <h2>The desktop app</h2>
         <p>
diff --git a/apps/web/src/pages/TestPage.jsx b/apps/web/src/pages/TestPage.jsx
index b5e401a..9309171 100644
--- a/apps/web/src/pages/TestPage.jsx
+++ b/apps/web/src/pages/TestPage.jsx
@@ -1,6 +1,7 @@
 import { config } from '@d3vices/config';
 import { API_DOCS } from '@d3vices/tests/api-docs';
 import { TESTS, testsInGroup } from '@d3vices/tests/registry';
+import { AdUnit } from '../components/AdUnit.jsx';
 import { Layout } from '../components/Layout.jsx';
 import { RackNav, rackCode } from '../components/RackNav.jsx';
 
@@ -123,6 +124,13 @@ export function TestPage({ test }) {
             </section>
           ) : null}
 
+          {/* Below the instrument, its permissions and its FAQ: the reading is
+              done and the next thing on the page is a list of links away, so a
+              sponsored line here interrupts nothing. Never above the test — a
+              reader who came to find out whether their microphone works should
+              reach it without passing an ad. */}
+          <AdUnit />
+
           <section class="related">
             <h2>Nearby instruments</h2>
             <div class="card-grid">
diff --git a/packages/config/src/index.js b/packages/config/src/index.js
index 5de78e7..e1c7b9e 100644
--- a/packages/config/src/index.js
+++ b/packages/config/src/index.js
@@ -13,6 +13,19 @@ export const config = {
     src: env('ANALYTICS_SRC', ''),
     siteId: env('ANALYTICS_SITE_ID', ''),
   },
+  /**
+   * The CrawlProof slot this site sells its ad inventory through. It is a
+   * public identifier, not a secret — it ships in the markup — so it is written
+   * down here rather than left to a variable somebody has to remember to set,
+   * which would make merging this a silent no-op.
+   *
+   * Set `ADS_SLOT=` (empty) to turn advertising off. The static export does
+   * exactly that, because the desktop app must make no network request.
+   */
+  ads: {
+    origin: 'https://crawlproof.com',
+    slot: env('ADS_SLOT', 'f54a21ad-3db6-4a62-a9f4-93d505c221c9'),
+  },
 };
 
 export const siteName = 'd3vices';
