From 874f44b3fa2079f1f1e6c25499e1acee63f1321a Mon Sep 17 00:00:00 2001
From: thierryvm <thierryvm@gmail.com>
Date: Sat, 25 Jul 2026 15:44:16 +0200
Subject: [PATCH 1/3] fix(csp): restore toast styling and silence sonner's
 style-src violations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

sonner injects its stylesheet at module evaluation time, and does it in the
worst possible order: it appends an EMPTY <style> element, then fills it. That
is one element and two CSP evaluations, hence exactly the two `inline-style`
violations reported on every page — <Toaster /> is mounted unconditionally in
the locale layout. Both hashes were confirmed by re-hashing the literal
extracted from the installed package.

The console noise was the visible half. The real defect: with the stylesheet
blocked, `[data-sonner-toaster]{position:fixed}` never applied, so toasts were
unpositioned in production. Measured against the live site: 2 violations and
`position: static`. After this change, on a production build: 0 violations and
`position: fixed`.

sonner exposes no nonce API, so the fix has two distinct halves:
- `@import 'sonner/dist/styles.css' layer(sonner)` serves the CSS from a 'self'
  stylesheet. This is what makes the UI correct, and keeps it correct if the
  hash ever drifts.
- the two hashes in `style-src` silence the runtime injection.

The import is layered on purpose. sonner ships its stylesheet UNLAYERED, and
unlayered CSS beats layered CSS whatever the specificity, so a naive import
would have overridden the Tailwind utilities styling our toasts (bg-card,
border-border, border-danger) in both themes. Declaring the layer order before
the imports puts sonner between base and components, so our utilities keep the
last word while sonner keeps its positioning rules.

The hashes are emitted in every environment, not just production: CSP3 makes a
directive ignore 'unsafe-inline' as soon as a nonce is present, so the dev
relaxation is a no-op for style-src and the violation reproduces in dev too.

The constants live in a module with zero imports because proxy.ts cannot be
imported from Vitest — it pulls in env.ts, which throws at module load without
the env vars. The unit test proves the constant is RIGHT by re-extracting and
re-hashing sonner's literal on every run, and refuses to go green if that
extraction breaks. The e2e assertion proves the constant is WIRED into the
emitted directive, which a unit test alone cannot show.

No 'unsafe-hashes': these are <style> elements, not inline style attributes.
package.json is untouched — sonner was already a dependency.
---
 docs/prs/PR-csp-sonner-report.md     | 131 +++++++++++++++++++++++++++
 e2e/security-headers.spec.ts         |  18 ++++
 public/llms-full.txt                 |   2 +-
 src/app/globals.css                  |  18 ++++
 src/lib/security/csp-style-hashes.ts |  60 ++++++++++++
 src/proxy.ts                         |   9 +-
 tests/csp-style-hashes.test.ts       | 102 +++++++++++++++++++++
 7 files changed, 338 insertions(+), 2 deletions(-)
 create mode 100644 docs/prs/PR-csp-sonner-report.md
 create mode 100644 src/lib/security/csp-style-hashes.ts
 create mode 100644 tests/csp-style-hashes.test.ts

diff --git a/docs/prs/PR-csp-sonner-report.md b/docs/prs/PR-csp-sonner-report.md
new file mode 100644
index 0000000..d5292a0
--- /dev/null
+++ b/docs/prs/PR-csp-sonner-report.md
@@ -0,0 +1,131 @@
+# PR — CSP `style-src` : violations `inline-style` de sonner
+
+**Date** : 25 juillet 2026
+**Auteur** : @cc-ankora
+**Branche** : `fix/csp-sonner-inline-style`
+**Revue de plan** : `plan-reviewer` — 🔴 REJECTED puis 🟡 APPROVED WITH CHANGES (7 corrections, toutes appliquées)
+
+---
+
+## 1. Symptôme
+
+Console de production (relevé @thierry) : deux violations CSP `inline-style` par page,
+émises depuis notre propre bundle.
+
+```
+sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=
+sha256-CIxDM5jnsGiKqXs2v7NKCY5MzdR9gu6TtiMJrDw29AY=
+```
+
+## 2. Diagnostic — première hypothèse réfutée
+
+Ma première analyse désignait `@radix-ui/react-dialog` → `react-remove-scroll` →
+`react-style-singleton` → `get-nonce`, ce dernier retournant `undefined` faute de
+`setNonce()`.
+
+`plan-reviewer` l'a **rejetée**, preuve à l'appui : `react-style-singleton` remplit son
+`<style>` **avant** de l'insérer, il ne peut donc jamais produire un hash de chaîne vide.
+Il a désigné `sonner`, qui fait exactement l'inverse.
+
+## 3. Cause racine (mesurée)
+
+`node_modules/sonner/dist/index.mjs` :
+
+```js
+head.appendChild(style); // inséré VIDE           → check CSP #1
+style.appendChild(document.createTextNode(code)); // rempli APRÈS → check CSP #2
+```
+
+Un seul élément, deux évaluations CSP, donc exactement deux violations. `__insertCSS(...)`
+est appelé au **scope module**, à l'évaluation du chunk — aucun rendu n'a encore eu lieu.
+`<Toaster />` étant monté sans condition dans `src/app/[locale]/layout.tsx`, les violations
+tombent sur **chaque page**.
+
+Confirmation par re-calcul des hashes depuis le paquet installé :
+
+```
+littéral __insertCSS  (14 859 car.) → sha256-CIxDM5jnsGiKqXs2v7NKCY5MzdR9gu6TtiMJrDw29AY=   ← MATCH
+chaîne vide                          → sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=   ← MATCH
+```
+
+`sonner` n'expose aucune API de nonce (zéro occurrence de « nonce » dans le paquet).
+
+### Conséquence non anticipée : un bug utilisateur réel
+
+Le CSS de sonner étant bloqué, `[data-sonner-toaster]{position:fixed}` ne s'appliquait pas.
+**Les toasts étaient mal positionnés en production**, pas seulement bruyants en console.
+Les `classNames` Tailwind de `src/components/ui/toast.tsx` ne stylent que la surface du
+toast, jamais son conteneur.
+
+## 4. Correctif
+
+| Fichier                                | Changement                                                                     |
+| -------------------------------------- | ------------------------------------------------------------------------------ |
+| `src/app/globals.css`                  | `@import 'sonner/dist/styles.css' layer(sonner);` + ordre de couches explicite |
+| `src/lib/security/csp-style-hashes.ts` | nouveau — les deux hashes, sans aucun import                                   |
+| `src/proxy.ts`                         | hashes interpolés dans `style-src`, dans **tous** les environnements           |
+| `tests/csp-style-hashes.test.ts`       | nouveau — garde anti-dérive                                                    |
+| `e2e/security-headers.spec.ts`         | assertion de câblage sur la directive émise                                    |
+
+**Ceinture + bretelles, deux rôles distincts** : la feuille `'self'` est ce qui rend l'UI
+correcte (et le reste le jour où le hash dérive) ; les hashes ne font que rendre la console
+propre.
+
+### Points de vigilance traités
+
+- **Couche cascade** — `sonner/dist/styles.css` est livré _non-layered_, et du CSS
+  non-layered l'emporte **toujours** sur du CSS layered, quelle que soit la spécificité. Un
+  import naïf aurait écrasé `bg-card`, `border-border`, `border-danger`… de
+  `toast.tsx`, en clair comme en sombre. D'où `@layer theme, base, sonner, components,
+utilities;` déclaré **avant** les imports : sonner garde son positionnement, nos
+  utilitaires gardent le dernier mot.
+- **Pas de gating production** — mesuré : la violation se reproduit aussi en dev, car CSP3
+  fait ignorer `'unsafe-inline'` dès qu'un nonce est présent, et `'nonce-…'` est toujours
+  émis. Le `devStyleExtras` est un no-op pour cette directive.
+- **Module de constantes sans import** — importer `src/proxy.ts` depuis Vitest est
+  impossible : il tire `src/lib/supabase/middleware.ts` → `src/lib/env.ts`, qui _throw_ au
+  chargement sans les variables d'environnement.
+- **Pas de `'unsafe-hashes'`** — ce sont des éléments `<style>`, pas des attributs `style=`.
+- **`package.json` inchangé** — `sonner` est déjà une dépendance.
+
+## 5. Preuve avant / après
+
+Sonde Playwright : écoute de `securitypolicyviolation` posée via `addInitScript` (donc
+active dès l'évaluation du chunk), puis mesure de la `position` calculée d'un
+`[data-sonner-toaster]`.
+
+|                                                           | violations `style-src` | `[data-sonner-toaster]` |
+| --------------------------------------------------------- | ---------------------- | ----------------------- |
+| **Avant** — production actuelle (`ankora-chi.vercel.app`) | **2**                  | `static` ✗ CSS absent   |
+| **Après** — build de production local                     | **0**                  | `fixed` ✓ CSS appliqué  |
+
+## 6. Garde anti-dérive
+
+Une montée de version de `sonner` change le littéral CSS et ferait silencieusement
+réapparaître la violation. `tests/csp-style-hashes.test.ts` ré-extrait le littéral depuis
+`node_modules` à chaque run et échoue bruyamment. Il refuse aussi de passer au vert si
+l'extraction casse : nombre d'appels `__insertCSS(` attendu, et longueur extraite
+
+> 1 000 caractères — une regex qui ne matche plus rien ne peut pas produire un test vert.
+
+Le test unitaire prouve que la constante est **juste** ; le spec E2E prouve qu'elle est
+**branchée**. Une constante définie mais jamais interpolée passerait le premier et laisserait
+la violation vivante.
+
+## 7. Hors scope, à replanifier
+
+`react-style-singleton` (Radix Dialog/Sheet) n'a toujours pas de nonce : c'est un bug réel
+mais **non mesuré**, distinct de celui-ci. Il nécessite `get-nonce` en dépendance explicite
+(donc `package.json`, voie lourde) et un `setNonce()` appelé en corps de render — jamais
+dans un `useEffect`, les effects remontant des enfants vers les parents. À planifier après
+mesure, pas avant.
+
+## 8. Definition of DONE
+
+| #   | Critère                             | Preuve                                 |
+| --- | ----------------------------------- | -------------------------------------- |
+| 1   | CI verte                            | cf. checks de la PR                    |
+| 2   | Sourcery muet sur le dernier commit | `gh api …/comments` → sortie vide      |
+| 3   | Threads de review résolus           | GraphQL `reviewThreads` → 0 non résolu |
+| 4   | Pas de conflit avec `main`          | `mergeStateStatus: CLEAN`              |
+| 5   | Rapport livré                       | ce fichier                             |
diff --git a/e2e/security-headers.spec.ts b/e2e/security-headers.spec.ts
index f283346..e45d4fa 100644
--- a/e2e/security-headers.spec.ts
+++ b/e2e/security-headers.spec.ts
@@ -12,6 +12,24 @@ test.describe('Security headers', () => {
     expect(csp).toContain("object-src 'none'");
   });
 
+  test('style-src carries the sonner hashes and no unsafe-inline escape', async ({ page }) => {
+    // Wiring assertion. `tests/csp-style-hashes.test.ts` proves the constants
+    // still match sonner's stylesheet; this proves they actually reach the
+    // emitted directive. A constant that is defined but never interpolated
+    // would otherwise pass the unit test while the violation stays live.
+    const response = await page.goto('/');
+    const csp = response?.headers()['content-security-policy'] ?? '';
+    const styleSrc = csp.split(';').find((d) => d.trim().startsWith('style-src')) ?? '';
+
+    expect(styleSrc, 'style-src directive present').toBeTruthy();
+    // The <style> sonner inserts empty, then the CSS it writes into it.
+    expect(styleSrc).toContain("'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='");
+    expect(styleSrc).toContain("'sha256-CIxDM5jnsGiKqXs2v7NKCY5MzdR9gu6TtiMJrDw29AY='");
+    // Element hashes only — `'unsafe-hashes'` concerns inline `style=`
+    // attributes and must never be needed here.
+    expect(styleSrc).not.toContain("'unsafe-hashes'");
+  });
+
   test('baseline security headers applied', async ({ page }) => {
     const response = await page.goto('/');
     const h = response?.headers() ?? {};
diff --git a/public/llms-full.txt b/public/llms-full.txt
index 3fde584..5e566f0 100644
--- a/public/llms-full.txt
+++ b/public/llms-full.txt
@@ -1,6 +1,6 @@
 # ankora.be — Full content export for LLMs
 
-Last generated: 2026-05-28
+Last generated: 2026-07-25
 Canonical URL: https://ankora.be
 License: content available for citation with attribution. Code is proprietary.
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 8428dee..8c4c5f5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,23 @@
+/* Cascade layer order — MUST precede the imports below.
+   `sonner` sits between `base` and `components` on purpose. Its stylesheet
+   ships UNLAYERED, and unlayered CSS beats layered CSS whatever the
+   specificity, so importing it as-is would override the Tailwind utilities in
+   `@layer utilities` that style our toasts (`bg-card`, `border-border`,
+   `border-danger`… in `src/components/ui/toast.tsx`) — in both themes.
+   Pulling it into a named layer declared BEFORE `utilities` gives our
+   utilities the last word while keeping sonner's positioning rules
+   (`[data-sonner-toaster]{position:fixed}`) intact. */
+@layer theme, base, sonner, components, utilities;
+
 @import 'tailwindcss';
 
+/* Toast styling served as a `'self'` stylesheet instead of relying on the
+   runtime `<style>` sonner injects at module evaluation — that injection is
+   blocked by our strict CSP (cf. src/lib/security/csp-style-hashes.ts), which
+   left the toasts unpositioned in production. This import is what keeps the UI
+   correct; the CSP hashes only silence the console. */
+@import 'sonner/dist/styles.css' layer(sonner);
+
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
 /* ---------- Variable fonts — self-hosted (WOFF2 only) ----------
diff --git a/src/lib/security/csp-style-hashes.ts b/src/lib/security/csp-style-hashes.ts
new file mode 100644
index 0000000..1e2c20e
--- /dev/null
+++ b/src/lib/security/csp-style-hashes.ts
@@ -0,0 +1,60 @@
+/**
+ * SHA-256 hashes allow-listed in the `style-src` CSP directive.
+ *
+ * ⚠️ This module MUST stay free of imports. It is consumed both by
+ * `src/proxy.ts` (Edge middleware) and by `tests/csp-style-hashes.test.ts`.
+ * Importing `src/proxy.ts` from Vitest is impossible — it pulls in
+ * `src/lib/supabase/middleware.ts` → `src/lib/env.ts`, which throws at module
+ * load when the env vars are absent, and `tests/setup.ts` stubs none of them.
+ *
+ * ── Why these hashes exist ────────────────────────────────────────────────
+ * `sonner` (toast library) injects its stylesheet at module evaluation time,
+ * and does it in the worst possible order (`node_modules/sonner/dist/index.mjs`):
+ *
+ *     head.appendChild(style)                       // inserted EMPTY  → check #1
+ *     style.appendChild(document.createTextNode(css)) // filled AFTER  → check #2
+ *
+ * One element, two CSP evaluations, hence exactly two violations on every page
+ * — `<Toaster />` is mounted unconditionally in `src/app/[locale]/layout.tsx`.
+ * Both hashes below were confirmed against production violations on 2026-07-25
+ * by re-hashing the literal extracted from the installed package.
+ *
+ * `sonner` exposes no nonce API (zero occurrences of "nonce" in the package),
+ * so allow-listing the two hashes is the only way to silence it short of
+ * replacing the library.
+ *
+ * ── Security rationale ────────────────────────────────────────────────────
+ * Both are element hashes for `<style>` tags, so no `'unsafe-hashes'` is
+ * needed (that keyword only concerns inline `style=` ATTRIBUTES) and
+ * `'unsafe-inline'` stays absent.
+ *
+ * Allow-listing the empty-string hash is safe: it permits a `<style>` element
+ * with no content. Filling it later from the DOM is re-evaluated by the CSP —
+ * that re-evaluation is precisely what produces the second violation. The only
+ * theoretical residue is that once the element is allowed, its CSSOM object
+ * exists and `sheet.insertRule()` is not subject to CSP; but that requires JS
+ * execution, and an attacker able to run JS can already call `insertRule()` on
+ * any of our existing same-origin stylesheets. The attack surface `style-src`
+ * actually defends against — HTML injection WITHOUT script execution
+ * (attribute-selector exfiltration, overlay/clickjacking) — is unchanged by an
+ * empty `<style>`.
+ *
+ * ── Drift ─────────────────────────────────────────────────────────────────
+ * `SONNER_STYLE_HASH` pins one specific version of the sonner CSS. Upgrading
+ * the package changes the literal and would silently bring the violation back.
+ * `tests/csp-style-hashes.test.ts` re-extracts and re-hashes the literal from
+ * `node_modules` on every CI run and fails loudly when they diverge.
+ *
+ * Note that the allow-list is a belt-and-braces measure for a clean console:
+ * the toast styling itself comes from the `'self'` stylesheet imported in
+ * `src/app/globals.css`, which keeps the UI correct even if this hash drifts.
+ */
+
+/** SHA-256 of the empty string — the `<style>` element sonner inserts empty. */
+export const EMPTY_STYLE_HASH = "'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='";
+
+/** SHA-256 of the CSS literal sonner writes into that element. */
+export const SONNER_STYLE_HASH = "'sha256-CIxDM5jnsGiKqXs2v7NKCY5MzdR9gu6TtiMJrDw29AY='";
+
+/** Every hash to append to `style-src`, in a stable order. */
+export const STYLE_SRC_HASHES = [EMPTY_STYLE_HASH, SONNER_STYLE_HASH] as const;
diff --git a/src/proxy.ts b/src/proxy.ts
index 90128a6..b94ee07 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -3,6 +3,7 @@ import { nanoid } from 'nanoid';
 import createMiddleware from 'next-intl/middleware';
 
 import { routing } from '@/i18n/routing';
+import { STYLE_SRC_HASHES } from '@/lib/security/csp-style-hashes';
 import { updateSession } from '@/lib/supabase/middleware';
 
 /**
@@ -54,7 +55,13 @@ function buildCsp(nonce: string): string {
   const directives: Record<string, string> = {
     'default-src': `'self'`,
     'script-src': `'self' 'nonce-${nonce}' 'strict-dynamic'${devScriptExtras}`,
-    'style-src': `'self' 'nonce-${nonce}'${devStyleExtras}`,
+    // The hashes are emitted in EVERY environment, not just production.
+    // Measured 2026-07-25: the sonner violation reproduces in dev too, because
+    // CSP3 makes a directive ignore `'unsafe-inline'` as soon as a nonce or
+    // hash source is present — and `'nonce-…'` is always there. `devStyleExtras`
+    // is therefore a no-op for this directive, and gating the hashes on
+    // production would leave dev noisy for no benefit.
+    'style-src': `'self' 'nonce-${nonce}' ${STYLE_SRC_HASHES.join(' ')}${devStyleExtras}`,
     'img-src': `'self' data: blob: ${supabaseDomains}`,
     'font-src': `'self' data:`,
     'connect-src': `'self' ${supabaseDomains} ${vercelInsights}${isDev ? ' ws: wss:' : ''}`,
diff --git a/tests/csp-style-hashes.test.ts b/tests/csp-style-hashes.test.ts
new file mode 100644
index 0000000..6495524
--- /dev/null
+++ b/tests/csp-style-hashes.test.ts
@@ -0,0 +1,102 @@
+import { createHash } from 'node:crypto';
+import { existsSync, readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+
+import { describe, it, expect } from 'vitest';
+
+import {
+  EMPTY_STYLE_HASH,
+  SONNER_STYLE_HASH,
+  STYLE_SRC_HASHES,
+} from '@/lib/security/csp-style-hashes';
+
+/**
+ * Drift guard for the `style-src` allow-list.
+ *
+ * `sonner` injects its stylesheet at module evaluation time and exposes no
+ * nonce API, so two SHA-256 hashes are pinned in the CSP (see
+ * `src/lib/security/csp-style-hashes.ts` for the full rationale). Upgrading the
+ * package changes the CSS literal, which would silently bring the production
+ * violation back and leave the console dirty again. This test re-extracts the
+ * literal from the installed package on every CI run and fails loudly when the
+ * two diverge.
+ *
+ * `src/proxy.ts` is deliberately NOT imported here: it pulls in
+ * `src/lib/supabase/middleware.ts` → `src/lib/env.ts`, which throws at module
+ * load without the env vars. The wiring of these hashes into the emitted
+ * directive is asserted end-to-end in `e2e/security-headers.spec.ts`.
+ */
+
+const require = createRequire(import.meta.url);
+
+/** Number of `__insertCSS(...)` call sites expected in the shipped bundle. */
+const EXPECTED_INSERT_CSS_CALLS = 2;
+/** The real sonner stylesheet is ~15 kB; anything tiny means the regex broke. */
+const MIN_PLAUSIBLE_CSS_LENGTH = 1000;
+
+/**
+ * Locate sonner's ESM bundle. `sonner/dist/index.mjs` cannot be resolved
+ * directly — the package's `exports` map does not expose deep subpaths — so we
+ * resolve the public entry point and walk to its sibling.
+ */
+function readSonnerBundle(): string {
+  const entry = require.resolve('sonner');
+  const bundle = join(dirname(entry), 'index.mjs');
+  if (!existsSync(bundle)) {
+    throw new Error(
+      `sonner's ESM bundle was not found at ${bundle}. The package layout ` +
+        'changed — re-derive the CSP style hashes by hand before trusting this test.',
+    );
+  }
+  return readFileSync(bundle, 'utf8');
+}
+
+/** Every string literal passed to sonner's `__insertCSS(...)` helper. */
+function extractInjectedCss(bundle: string): string[] {
+  const pattern = /__insertCSS\(\s*(['"`])([\s\S]*?)\1\s*\)/g;
+  return [...bundle.matchAll(pattern)].map((match) => match[2] ?? '');
+}
+
+const sha256Base64 = (input: string) =>
+  `'sha256-${createHash('sha256').update(input, 'utf8').digest('base64')}'`;
+
+describe('CSP style-src hashes — drift guard', () => {
+  it('still finds sonner’s CSS injection sites (guards against a broken regex)', () => {
+    const bundle = readSonnerBundle();
+    // A silent "0 matches" would make every assertion below vacuously true.
+    expect(
+      bundle.split('__insertCSS(').length - 1,
+      'sonner no longer uses __insertCSS — re-derive the hashes by hand',
+    ).toBe(EXPECTED_INSERT_CSS_CALLS);
+
+    const injected = extractInjectedCss(bundle);
+    expect(injected, 'the __insertCSS literal could not be extracted').toHaveLength(1);
+    expect(
+      injected[0]?.length ?? 0,
+      'extracted CSS is implausibly short — the regex matched the wrong thing',
+    ).toBeGreaterThan(MIN_PLAUSIBLE_CSS_LENGTH);
+  });
+
+  it('matches the hash pinned in the CSP allow-list', () => {
+    const [css] = extractInjectedCss(readSonnerBundle());
+    expect(
+      sha256Base64(css ?? ''),
+      'sonner’s stylesheet changed — update SONNER_STYLE_HASH, then verify the ' +
+        'console is clean on a production build before merging',
+    ).toBe(SONNER_STYLE_HASH);
+  });
+
+  it('pins the empty-string hash for the element sonner inserts before filling it', () => {
+    expect(sha256Base64('')).toBe(EMPTY_STYLE_HASH);
+  });
+
+  it('exposes both hashes to the directive builder', () => {
+    expect(STYLE_SRC_HASHES).toEqual([EMPTY_STYLE_HASH, SONNER_STYLE_HASH]);
+    // Element hashes must never be paired with 'unsafe-hashes' (that keyword
+    // only concerns inline `style=` attributes) nor with 'unsafe-inline'.
+    for (const hash of STYLE_SRC_HASHES) {
+      expect(hash).toMatch(/^'sha256-[A-Za-z0-9+/]+=*'$/);
+    }
+  });
+});

From f3a22e3c6602d75b753ce83eb88272136cf9569f Mon Sep 17 00:00:00 2001
From: thierryvm <thierryvm@gmail.com>
Date: Sat, 25 Jul 2026 16:01:00 +0200
Subject: [PATCH 2/3] =?UTF-8?q?fix(csp):=20drop=20the=20sonner=20style=20h?=
 =?UTF-8?q?ashes=20=E2=80=94=20allowing=20that=20style=20would=20apply=20i?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

security-auditor put a NO-GO on the first version of this branch, and it was
right: the two halves of the diff contradicted each other.

Allow-listing a <style> hash does not merely tolerate the element, it APPLIES
its CSS. sonner's injected copy is unlayered, and unlayered CSS outranks every
cascade layer whatever the specificity — so the hashes cancelled exactly the
protection the @layer in the same diff had just installed. sonner defaults to
theme: 'light' and <Toaster /> passes no theme, so its --normal-bg: #fff would
have beaten bg-card and painted a white toast in dark mode, losing the severity
colour coding with it.

Two cosmetic console warnings are the cheaper defect. Keeping the hashes out
also means a future compromised sonner release stays blocked by the CSP: only
the vendored, layered copy — visible in a lockfile diff — can apply.

What remains is the half that actually fixes the user-visible bug: the layered
'self' import, which restores `[data-sonner-toaster]{position:fixed}`.

Measured on a production build, both themes:
  before (live site)  2 violations, position: static, dark bg rgb(17,26,46)
  after               2 violations, position: fixed,  dark bg rgb(17,26,46)
Positioning fixed, our theme tokens preserved in both modes — which the hashed
version would not have achieved.

The decision is documented where it will be re-read (globals.css) and locked by
an e2e assertion that fails if any hash source reappears in style-src. The
drift guard went away with the hashes it protected; the auditor also noted its
failure message invited re-hashing a potentially hostile stylesheet.
---
 ...26-07-25-1545-locale-race-et-csp-sonner.md | 114 ++++++++++++++++++
 docs/prs/PR-csp-sonner-report.md              |  92 ++++++++------
 e2e/security-headers.spec.ts                  |  20 +--
 src/app/globals.css                           |  20 ++-
 src/lib/security/csp-style-hashes.ts          |  60 ---------
 src/proxy.ts                                  |   9 +-
 tests/csp-style-hashes.test.ts                | 102 ----------------
 7 files changed, 194 insertions(+), 223 deletions(-)
 create mode 100644 docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md
 delete mode 100644 src/lib/security/csp-style-hashes.ts
 delete mode 100644 tests/csp-style-hashes.test.ts

diff --git a/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md b/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md
new file mode 100644
index 0000000..06ab169
--- /dev/null
+++ b/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md
@@ -0,0 +1,114 @@
+# Handoff CC Ankora — 25 juillet 2026, 15h45
+
+**Agent** : @cc-ankora (Opus 5)
+**Mandat** : « tu avances tout seule avec précaution et à mon retour tout doit être fini » — @thierry
+**Compte** : `thierryvm` vérifié sur `gh` **et** `git config` avant chaque commit
+
+---
+
+## 1. Ce qui a été livré
+
+| PR   | Sujet                                                            | État                    |
+| ---- | ---------------------------------------------------------------- | ----------------------- |
+| #254 | agents `prod-bug-investigator` + `test-quality-auditor`          | ✅ mergée               |
+| #253 | handoff session précédente                                       | ✅ mergée               |
+| #255 | diagnostic de la course sur le cookie de langue                  | ✅ mergée               |
+| #256 | correction de la cause des échecs de login locaux (`e2e-auth`)   | ✅ mergée               |
+| #257 | CSP : style des toasts restauré + violations `sonner` supprimées | ⏳ ouverte, CI en cours |
+
+---
+
+## 2. Bug 1 — sélecteur de langue qui repasse en anglais
+
+**Cause racine établie**, **correctif non livré**, **décision d'architecture en attente de @thierry**.
+
+`next-intl` réécrit `NEXT_LOCALE` dès que le locale résolu par l'URL diffère du cookie, et
+le préfixe d'URL gagne toujours. Toute requête `/en…` alors que le cookie vaut `fr-BE`
+rebascule le cookie en `en` pour un an. C'est une **course** : la requête `/en…` encore en
+vol se termine après le `Set-Cookie` de la Server Action. Asymétrique par construction —
+le sens FR→EN est immunisé (URLs non préfixées), d'où « ça revient toujours à l'anglais ».
+
+### Le résultat négatif, qui est le vrai livrable
+
+Trois correctifs middleware construits et mesurés sur build de production, **trois échecs
+structurels** :
+
+| Signal                                         | Mesure                                                 | Verdict                               |
+| ---------------------------------------------- | ------------------------------------------------------ | ------------------------------------- |
+| `rsc` / `next-router-prefetch` / `sec-purpose` | envoyés par le navigateur, absents côté middleware     | Next les retire avant                 |
+| `accept: text/x-component`                     | un vrai prefetch envoie `accept=(none)`                | ne matche que les `fetch()` fabriqués |
+| `?_rsc=<hash>`                                 | `curl "/en?_rsc=probe"` → `nextUrl.search = "(empty)"` | Next retire aussi le paramètre        |
+
+**Next canonise les requêtes RSC avant le middleware.** Un prefetch et une navigation
+document sont indiscernables depuis `proxy.ts`. Aucun correctif à cette couche ne peut
+fonctionner — ni le nôtre, ni celui de `next-intl`. Ne pas retenter cette voie.
+
+**Piège d'ordonnancement à conserver** : toute manipulation brute de l'en-tête `set-cookie`
+dans `proxy.ts` doit être la **dernière** opération, après `updateSession` — `ResponseCookies`
+re-sérialise le jar entier à chaque `.set()` et restaure ce qu'on vient de retirer.
+
+### Décision attendue de @thierry
+
+- **Option A (recommandée)** — `localeCookie: false` : `syncCookie` devient inerte, la
+  course disparaît par construction. Coût : une arrivée sur `/` nu ne mémorise plus une
+  langue qui contredit `Accept-Language`. PR dédiée + `plan-reviewer`.
+- **Option B** — navigation dure sur changement de langue : atténue sans supprimer la
+  cause, non prouvable par un test. Jamais seule.
+
+Diagnostic complet : `docs/audits/2026-07-25-locale-cookie-race-diagnostic.md`.
+Le test de non-régression est dans la suite en `test.fixme` — il décrit le défaut tant
+qu'il n'est pas clos.
+
+---
+
+## 3. Bug 2 — violations CSP `inline-style` (PR #257)
+
+Cause : `sonner` insère un `<style>` **vide** puis le remplit → un élément, deux
+évaluations CSP, deux violations sur chaque page. Les deux hashes prod ont été confirmés
+par re-calcul depuis le paquet installé.
+
+**Ce que ça cachait** : le CSS bloqué, `[data-sonner-toaster]{position:fixed}` ne
+s'appliquait pas → **les toasts sont mal positionnés en production**.
+
+|                             | violations `style-src` | `[data-sonner-toaster]` |
+| --------------------------- | ---------------------- | ----------------------- |
+| Avant (production actuelle) | 2                      | `static` ✗              |
+| Après (build prod local)    | 0                      | `fixed` ✓               |
+
+Ma première hypothèse (Radix / `get-nonce`) a été **réfutée par `plan-reviewer`** : ce
+singleton-là remplit son `<style>` avant de l'insérer, il ne peut pas produire un hash de
+chaîne vide.
+
+---
+
+## 4. Reste à faire
+
+1. **#257** — finir la DoD5 (CI, Sourcery, threads, `CLEAN`) puis merger
+2. **Bug 1** — @thierry tranche entre Option A et Option B, puis PR dédiée + `plan-reviewer`
+3. **Radix / `get-nonce`** — bug réel mais **non mesuré** : `react-style-singleton` n'a
+   toujours pas de nonce. Nécessite `get-nonce` en dépendance explicite (`package.json`,
+   voie lourde) et un `setNonce()` en corps de render — jamais dans un `useEffect`, les
+   effects remontant des enfants vers les parents. Mesurer d'abord.
+4. **Symptôme 2 (reconnexion fantôme)** — cause **non établie**. Ce n'est pas une perte de
+   session (Supabase : `sessions_timebox=0`, sessions vivantes 47 j, 0 rotation
+   concurrente). Investigation séparée, surtout pas dans la même PR.
+5. **Refonte UX** — phases 1c (nav mobile) et 1d (consolidation ui↔atoms) non entamées
+
+---
+
+## 5. Leçons de la session
+
+**« Un test vert contre une forme de requête inventée ne prouve rien. »** Le premier
+correctif de la locale avait des tests unitaires verts et ne changeait rien dans le
+navigateur : les mocks fabriquaient un en-tête que Next ne transmet jamais. La règle
+appliquée depuis : mesurer le signal réel **avant** d'écrire le prédicat, jamais l'inverse.
+
+**Le sous-agent qui contredit a plus de valeur que celui qui valide.** `plan-reviewer` a
+rejeté mon diagnostic CSP avec une preuve tirée du code de `node_modules` ; ma piste était
+fausse et aurait produit un troisième correctif inopérant. Il a aussi vu une régression
+visuelle que je n'avais pas anticipée (le CSS non-layered de sonner écrasant les utilitaires
+Tailwind).
+
+**Ne pas livrer un troisième correctif non prouvé sur un bug déjà mal corrigé deux fois.**
+Reverter et documenter le cul-de-sac vaut mieux qu'un pari. Le résultat négatif mesuré est
+un livrable à part entière.
diff --git a/docs/prs/PR-csp-sonner-report.md b/docs/prs/PR-csp-sonner-report.md
index d5292a0..ed5a09c 100644
--- a/docs/prs/PR-csp-sonner-report.md
+++ b/docs/prs/PR-csp-sonner-report.md
@@ -3,7 +3,8 @@
 **Date** : 25 juillet 2026
 **Auteur** : @cc-ankora
 **Branche** : `fix/csp-sonner-inline-style`
-**Revue de plan** : `plan-reviewer` — 🔴 REJECTED puis 🟡 APPROVED WITH CHANGES (7 corrections, toutes appliquées)
+**Revue de plan** : `plan-reviewer` — 🔴 REJECTED puis 🟡 APPROVED WITH CHANGES (7 corrections appliquées)
+**Audit sécurité** : `security-auditor` — 🔴 NO-GO sur la 1re version, levé par l'option (a) ci-dessous
 
 ---
 
@@ -59,58 +60,71 @@ toast, jamais son conteneur.
 
 ## 4. Correctif
 
-| Fichier                                | Changement                                                                     |
-| -------------------------------------- | ------------------------------------------------------------------------------ |
-| `src/app/globals.css`                  | `@import 'sonner/dist/styles.css' layer(sonner);` + ordre de couches explicite |
-| `src/lib/security/csp-style-hashes.ts` | nouveau — les deux hashes, sans aucun import                                   |
-| `src/proxy.ts`                         | hashes interpolés dans `style-src`, dans **tous** les environnements           |
-| `tests/csp-style-hashes.test.ts`       | nouveau — garde anti-dérive                                                    |
-| `e2e/security-headers.spec.ts`         | assertion de câblage sur la directive émise                                    |
+| Fichier                        | Changement                                                                     |
+| ------------------------------ | ------------------------------------------------------------------------------ |
+| `src/app/globals.css`          | `@import 'sonner/dist/styles.css' layer(sonner);` + ordre de couches explicite |
+| `e2e/security-headers.spec.ts` | assertion verrouillant l'absence de hash tiers dans `style-src`                |
 
-**Ceinture + bretelles, deux rôles distincts** : la feuille `'self'` est ce qui rend l'UI
-correcte (et le reste le jour où le hash dérive) ; les hashes ne font que rendre la console
-propre.
+Un seul changement fonctionnel : la feuille de style arrive par une source `'self'`, donc
+autorisée, donc les toasts retrouvent leur positionnement.
+
+### Ce que la première version faisait en plus, et pourquoi c'est retiré
+
+La première version épinglait aussi les deux hashes SHA-256 dans `style-src` pour faire
+taire les violations console. **`security-auditor` a posé un NO-GO, à raison** : les deux
+moitiés du diff se contredisaient.
+
+Autoriser un `<style>`, ce n'est pas seulement le tolérer — c'est **l'appliquer**. Or la
+copie injectée par sonner est _non-layered_, et du CSS non-layered l'emporte sur n'importe
+quelle couche quelle que soit la spécificité. Les hashes auraient donc annulé exactement la
+protection que le `@layer` du même diff venait d'installer. Aggravant mesuré par l'audit :
+sonner utilise `theme: 'light'` par défaut et `<Toaster />` ne passe pas de `theme`, donc
+`--normal-bg: #fff` aurait gagné sur `bg-card` → **toast à fond blanc en thème sombre**, et
+perte du code couleur de sévérité (`border-danger`, `border-success`…).
+
+Bénéfice secondaire, relevé par l'audit : sans épinglage, le CSS runtime d'une future
+version compromise de sonner reste **bloqué par la CSP** ; seule la copie vendored, layered
+et visible dans un diff de lockfile, s'applique.
+
+**Arbitrage assumé** : deux avertissements console cosmétiques valent mieux qu'une
+régression visuelle en thème sombre et qu'un CSS tiers exécuté au sommet de notre cascade.
+La décision est documentée à l'endroit où elle sera relue (`src/app/globals.css`) et
+verrouillée par une assertion E2E qui échoue si un hash réapparaît dans `style-src`.
 
 ### Points de vigilance traités
 
-- **Couche cascade** — `sonner/dist/styles.css` est livré _non-layered_, et du CSS
-  non-layered l'emporte **toujours** sur du CSS layered, quelle que soit la spécificité. Un
-  import naïf aurait écrasé `bg-card`, `border-border`, `border-danger`… de
-  `toast.tsx`, en clair comme en sombre. D'où `@layer theme, base, sonner, components,
-utilities;` déclaré **avant** les imports : sonner garde son positionnement, nos
-  utilitaires gardent le dernier mot.
-- **Pas de gating production** — mesuré : la violation se reproduit aussi en dev, car CSP3
-  fait ignorer `'unsafe-inline'` dès qu'un nonce est présent, et `'nonce-…'` est toujours
-  émis. Le `devStyleExtras` est un no-op pour cette directive.
-- **Module de constantes sans import** — importer `src/proxy.ts` depuis Vitest est
-  impossible : il tire `src/lib/supabase/middleware.ts` → `src/lib/env.ts`, qui _throw_ au
-  chargement sans les variables d'environnement.
-- **Pas de `'unsafe-hashes'`** — ce sont des éléments `<style>`, pas des attributs `style=`.
+- **Couche cascade** — `sonner/dist/styles.css` est livré _non-layered_. D'où
+  `@layer theme, base, sonner, components, utilities;` déclaré **avant** les imports :
+  sonner garde son positionnement, nos utilitaires gardent le dernier mot.
 - **`package.json` inchangé** — `sonner` est déjà une dépendance.
+- **Pas de `'unsafe-hashes'`, pas de `'unsafe-inline'`** — le repo style exclusivement par
+  classes.
 
 ## 5. Preuve avant / après
 
 Sonde Playwright : écoute de `securitypolicyviolation` posée via `addInitScript` (donc
-active dès l'évaluation du chunk), puis mesure de la `position` calculée d'un
-`[data-sonner-toaster]`.
+active dès l'évaluation du chunk), puis mesure de la `position` calculée du conteneur et de
+la couleur de fond d'un toast, **dans les deux thèmes**.
 
-|                                                           | violations `style-src` | `[data-sonner-toaster]` |
-| --------------------------------------------------------- | ---------------------- | ----------------------- |
-| **Avant** — production actuelle (`ankora-chi.vercel.app`) | **2**                  | `static` ✗ CSS absent   |
-| **Après** — build de production local                     | **0**                  | `fixed` ✓ CSS appliqué  |
+|                                       | violations `style-src` | positionnement | fond du toast (sombre) |
+| ------------------------------------- | ---------------------- | -------------- | ---------------------- |
+| **Avant** — production actuelle       | 2                      | `static` ✗     | `rgb(17, 26, 46)`      |
+| **Après** — build de production local | 2 _(assumées)_         | `fixed` ✓      | `rgb(17, 26, 46)` ✓    |
 
-## 6. Garde anti-dérive
+Le défaut utilisateur est corrigé et nos tokens de thème sont préservés dans les deux modes
+— ce qui n'aurait pas été le cas avec les hashes (fond blanc attendu en sombre).
 
-Une montée de version de `sonner` change le littéral CSS et ferait silencieusement
-réapparaître la violation. `tests/csp-style-hashes.test.ts` ré-extrait le littéral depuis
-`node_modules` à chaque run et échoue bruyamment. Il refuse aussi de passer au vert si
-l'extraction casse : nombre d'appels `__insertCSS(` attendu, et longueur extraite
+## 6. Verrou anti-régression
 
-> 1 000 caractères — une regex qui ne matche plus rien ne peut pas produire un test vert.
+`e2e/security-headers.spec.ts` échoue si un hash (`'sha256-…'`, `'sha384-…'`, `'sha512-…'`)
+réapparaît dans `style-src`, ou si `'unsafe-hashes'` y est introduit. C'est la seule
+protection nécessaire une fois l'option (a) retenue : sans hash épinglé, il n'y a plus de
+constante susceptible de dériver lors d'une montée de version de sonner.
 
-Le test unitaire prouve que la constante est **juste** ; le spec E2E prouve qu'elle est
-**branchée**. Une constante définie mais jamais interpolée passerait le premier et laisserait
-la violation vivante.
+Le garde-fou anti-dérive de la première version (ré-extraction + re-hash du littéral depuis
+`node_modules`) a été retiré avec les hashes qu'il protégeait. `security-auditor` avait par
+ailleurs relevé que son message d'échec — « update SONNER_STYLE_HASH » — invitait à
+re-hasher mécaniquement un CSS potentiellement hostile.
 
 ## 7. Hors scope, à replanifier
 
diff --git a/e2e/security-headers.spec.ts b/e2e/security-headers.spec.ts
index e45d4fa..0addb16 100644
--- a/e2e/security-headers.spec.ts
+++ b/e2e/security-headers.spec.ts
@@ -12,21 +12,21 @@ test.describe('Security headers', () => {
     expect(csp).toContain("object-src 'none'");
   });
 
-  test('style-src carries the sonner hashes and no unsafe-inline escape', async ({ page }) => {
-    // Wiring assertion. `tests/csp-style-hashes.test.ts` proves the constants
-    // still match sonner's stylesheet; this proves they actually reach the
-    // emitted directive. A constant that is defined but never interpolated
-    // would otherwise pass the unit test while the violation stays live.
+  test('style-src allow-lists no third-party style hash', async ({ page }) => {
+    // Deliberate absence, not an oversight. Allow-listing the hash of the
+    // <style> sonner injects at runtime would silence its two console
+    // violations, but allowing a <style> also APPLIES it — and that copy is
+    // unlayered, so it would outrank the layered `@import` in globals.css and
+    // every Tailwind utility, painting a white toast in dark mode. The
+    // stylesheet is served from 'self' instead. Cf. docs/prs/PR-csp-sonner-report.md.
     const response = await page.goto('/');
     const csp = response?.headers()['content-security-policy'] ?? '';
     const styleSrc = csp.split(';').find((d) => d.trim().startsWith('style-src')) ?? '';
 
     expect(styleSrc, 'style-src directive present').toBeTruthy();
-    // The <style> sonner inserts empty, then the CSS it writes into it.
-    expect(styleSrc).toContain("'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='");
-    expect(styleSrc).toContain("'sha256-CIxDM5jnsGiKqXs2v7NKCY5MzdR9gu6TtiMJrDw29AY='");
-    // Element hashes only — `'unsafe-hashes'` concerns inline `style=`
-    // attributes and must never be needed here.
+    expect(styleSrc, 'no hash source may creep into style-src').not.toMatch(/'sha\d{3}-/);
+    // `'unsafe-hashes'` only concerns inline `style=` attributes and must never
+    // be needed here — the repo styles exclusively through classes.
     expect(styleSrc).not.toContain("'unsafe-hashes'");
   });
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 8c4c5f5..1517884 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,10 +12,22 @@
 @import 'tailwindcss';
 
 /* Toast styling served as a `'self'` stylesheet instead of relying on the
-   runtime `<style>` sonner injects at module evaluation — that injection is
-   blocked by our strict CSP (cf. src/lib/security/csp-style-hashes.ts), which
-   left the toasts unpositioned in production. This import is what keeps the UI
-   correct; the CSP hashes only silence the console. */
+   runtime `<style>` that sonner injects at module evaluation time. That
+   injection is blocked by our strict CSP, which is why the toasts had no
+   positioning at all in production (`[data-sonner-toaster]` computed to
+   `position: static` on the live site, 2026-07-25).
+
+   We deliberately do NOT allow-list the two SHA-256 hashes of that runtime
+   `<style>` in `style-src`, even though it would silence the two console
+   violations it emits on every page. Allowing a `<style>` also APPLIES it, and
+   the injected copy is unlayered — it would therefore outrank this layered
+   import and every Tailwind utility, undoing the whole point of the layer
+   above. Concretely, sonner defaults to `theme: 'light'`, so its
+   `--normal-bg: #fff` would win over `bg-card` and paint a white toast in dark
+   mode. Two cosmetic console warnings are the cheaper defect. It also keeps a
+   third-party stylesheet from executing at the top of our cascade if a future
+   sonner release were ever compromised. Cf.
+   `docs/prs/PR-csp-sonner-report.md`. */
 @import 'sonner/dist/styles.css' layer(sonner);
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
diff --git a/src/lib/security/csp-style-hashes.ts b/src/lib/security/csp-style-hashes.ts
deleted file mode 100644
index 1e2c20e..0000000
--- a/src/lib/security/csp-style-hashes.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * SHA-256 hashes allow-listed in the `style-src` CSP directive.
- *
- * ⚠️ This module MUST stay free of imports. It is consumed both by
- * `src/proxy.ts` (Edge middleware) and by `tests/csp-style-hashes.test.ts`.
- * Importing `src/proxy.ts` from Vitest is impossible — it pulls in
- * `src/lib/supabase/middleware.ts` → `src/lib/env.ts`, which throws at module
- * load when the env vars are absent, and `tests/setup.ts` stubs none of them.
- *
- * ── Why these hashes exist ────────────────────────────────────────────────
- * `sonner` (toast library) injects its stylesheet at module evaluation time,
- * and does it in the worst possible order (`node_modules/sonner/dist/index.mjs`):
- *
- *     head.appendChild(style)                       // inserted EMPTY  → check #1
- *     style.appendChild(document.createTextNode(css)) // filled AFTER  → check #2
- *
- * One element, two CSP evaluations, hence exactly two violations on every page
- * — `<Toaster />` is mounted unconditionally in `src/app/[locale]/layout.tsx`.
- * Both hashes below were confirmed against production violations on 2026-07-25
- * by re-hashing the literal extracted from the installed package.
- *
- * `sonner` exposes no nonce API (zero occurrences of "nonce" in the package),
- * so allow-listing the two hashes is the only way to silence it short of
- * replacing the library.
- *
- * ── Security rationale ────────────────────────────────────────────────────
- * Both are element hashes for `<style>` tags, so no `'unsafe-hashes'` is
- * needed (that keyword only concerns inline `style=` ATTRIBUTES) and
- * `'unsafe-inline'` stays absent.
- *
- * Allow-listing the empty-string hash is safe: it permits a `<style>` element
- * with no content. Filling it later from the DOM is re-evaluated by the CSP —
- * that re-evaluation is precisely what produces the second violation. The only
- * theoretical residue is that once the element is allowed, its CSSOM object
- * exists and `sheet.insertRule()` is not subject to CSP; but that requires JS
- * execution, and an attacker able to run JS can already call `insertRule()` on
- * any of our existing same-origin stylesheets. The attack surface `style-src`
- * actually defends against — HTML injection WITHOUT script execution
- * (attribute-selector exfiltration, overlay/clickjacking) — is unchanged by an
- * empty `<style>`.
- *
- * ── Drift ─────────────────────────────────────────────────────────────────
- * `SONNER_STYLE_HASH` pins one specific version of the sonner CSS. Upgrading
- * the package changes the literal and would silently bring the violation back.
- * `tests/csp-style-hashes.test.ts` re-extracts and re-hashes the literal from
- * `node_modules` on every CI run and fails loudly when they diverge.
- *
- * Note that the allow-list is a belt-and-braces measure for a clean console:
- * the toast styling itself comes from the `'self'` stylesheet imported in
- * `src/app/globals.css`, which keeps the UI correct even if this hash drifts.
- */
-
-/** SHA-256 of the empty string — the `<style>` element sonner inserts empty. */
-export const EMPTY_STYLE_HASH = "'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='";
-
-/** SHA-256 of the CSS literal sonner writes into that element. */
-export const SONNER_STYLE_HASH = "'sha256-CIxDM5jnsGiKqXs2v7NKCY5MzdR9gu6TtiMJrDw29AY='";
-
-/** Every hash to append to `style-src`, in a stable order. */
-export const STYLE_SRC_HASHES = [EMPTY_STYLE_HASH, SONNER_STYLE_HASH] as const;
diff --git a/src/proxy.ts b/src/proxy.ts
index b94ee07..90128a6 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -3,7 +3,6 @@ import { nanoid } from 'nanoid';
 import createMiddleware from 'next-intl/middleware';
 
 import { routing } from '@/i18n/routing';
-import { STYLE_SRC_HASHES } from '@/lib/security/csp-style-hashes';
 import { updateSession } from '@/lib/supabase/middleware';
 
 /**
@@ -55,13 +54,7 @@ function buildCsp(nonce: string): string {
   const directives: Record<string, string> = {
     'default-src': `'self'`,
     'script-src': `'self' 'nonce-${nonce}' 'strict-dynamic'${devScriptExtras}`,
-    // The hashes are emitted in EVERY environment, not just production.
-    // Measured 2026-07-25: the sonner violation reproduces in dev too, because
-    // CSP3 makes a directive ignore `'unsafe-inline'` as soon as a nonce or
-    // hash source is present — and `'nonce-…'` is always there. `devStyleExtras`
-    // is therefore a no-op for this directive, and gating the hashes on
-    // production would leave dev noisy for no benefit.
-    'style-src': `'self' 'nonce-${nonce}' ${STYLE_SRC_HASHES.join(' ')}${devStyleExtras}`,
+    'style-src': `'self' 'nonce-${nonce}'${devStyleExtras}`,
     'img-src': `'self' data: blob: ${supabaseDomains}`,
     'font-src': `'self' data:`,
     'connect-src': `'self' ${supabaseDomains} ${vercelInsights}${isDev ? ' ws: wss:' : ''}`,
diff --git a/tests/csp-style-hashes.test.ts b/tests/csp-style-hashes.test.ts
deleted file mode 100644
index 6495524..0000000
--- a/tests/csp-style-hashes.test.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { createHash } from 'node:crypto';
-import { existsSync, readFileSync } from 'node:fs';
-import { createRequire } from 'node:module';
-import { dirname, join } from 'node:path';
-
-import { describe, it, expect } from 'vitest';
-
-import {
-  EMPTY_STYLE_HASH,
-  SONNER_STYLE_HASH,
-  STYLE_SRC_HASHES,
-} from '@/lib/security/csp-style-hashes';
-
-/**
- * Drift guard for the `style-src` allow-list.
- *
- * `sonner` injects its stylesheet at module evaluation time and exposes no
- * nonce API, so two SHA-256 hashes are pinned in the CSP (see
- * `src/lib/security/csp-style-hashes.ts` for the full rationale). Upgrading the
- * package changes the CSS literal, which would silently bring the production
- * violation back and leave the console dirty again. This test re-extracts the
- * literal from the installed package on every CI run and fails loudly when the
- * two diverge.
- *
- * `src/proxy.ts` is deliberately NOT imported here: it pulls in
- * `src/lib/supabase/middleware.ts` → `src/lib/env.ts`, which throws at module
- * load without the env vars. The wiring of these hashes into the emitted
- * directive is asserted end-to-end in `e2e/security-headers.spec.ts`.
- */
-
-const require = createRequire(import.meta.url);
-
-/** Number of `__insertCSS(...)` call sites expected in the shipped bundle. */
-const EXPECTED_INSERT_CSS_CALLS = 2;
-/** The real sonner stylesheet is ~15 kB; anything tiny means the regex broke. */
-const MIN_PLAUSIBLE_CSS_LENGTH = 1000;
-
-/**
- * Locate sonner's ESM bundle. `sonner/dist/index.mjs` cannot be resolved
- * directly — the package's `exports` map does not expose deep subpaths — so we
- * resolve the public entry point and walk to its sibling.
- */
-function readSonnerBundle(): string {
-  const entry = require.resolve('sonner');
-  const bundle = join(dirname(entry), 'index.mjs');
-  if (!existsSync(bundle)) {
-    throw new Error(
-      `sonner's ESM bundle was not found at ${bundle}. The package layout ` +
-        'changed — re-derive the CSP style hashes by hand before trusting this test.',
-    );
-  }
-  return readFileSync(bundle, 'utf8');
-}
-
-/** Every string literal passed to sonner's `__insertCSS(...)` helper. */
-function extractInjectedCss(bundle: string): string[] {
-  const pattern = /__insertCSS\(\s*(['"`])([\s\S]*?)\1\s*\)/g;
-  return [...bundle.matchAll(pattern)].map((match) => match[2] ?? '');
-}
-
-const sha256Base64 = (input: string) =>
-  `'sha256-${createHash('sha256').update(input, 'utf8').digest('base64')}'`;
-
-describe('CSP style-src hashes — drift guard', () => {
-  it('still finds sonner’s CSS injection sites (guards against a broken regex)', () => {
-    const bundle = readSonnerBundle();
-    // A silent "0 matches" would make every assertion below vacuously true.
-    expect(
-      bundle.split('__insertCSS(').length - 1,
-      'sonner no longer uses __insertCSS — re-derive the hashes by hand',
-    ).toBe(EXPECTED_INSERT_CSS_CALLS);
-
-    const injected = extractInjectedCss(bundle);
-    expect(injected, 'the __insertCSS literal could not be extracted').toHaveLength(1);
-    expect(
-      injected[0]?.length ?? 0,
-      'extracted CSS is implausibly short — the regex matched the wrong thing',
-    ).toBeGreaterThan(MIN_PLAUSIBLE_CSS_LENGTH);
-  });
-
-  it('matches the hash pinned in the CSP allow-list', () => {
-    const [css] = extractInjectedCss(readSonnerBundle());
-    expect(
-      sha256Base64(css ?? ''),
-      'sonner’s stylesheet changed — update SONNER_STYLE_HASH, then verify the ' +
-        'console is clean on a production build before merging',
-    ).toBe(SONNER_STYLE_HASH);
-  });
-
-  it('pins the empty-string hash for the element sonner inserts before filling it', () => {
-    expect(sha256Base64('')).toBe(EMPTY_STYLE_HASH);
-  });
-
-  it('exposes both hashes to the directive builder', () => {
-    expect(STYLE_SRC_HASHES).toEqual([EMPTY_STYLE_HASH, SONNER_STYLE_HASH]);
-    // Element hashes must never be paired with 'unsafe-hashes' (that keyword
-    // only concerns inline `style=` attributes) nor with 'unsafe-inline'.
-    for (const hash of STYLE_SRC_HASHES) {
-      expect(hash).toMatch(/^'sha256-[A-Za-z0-9+/]+=*'$/);
-    }
-  });
-});

From 3f3a13087b40bff272bdd7f05b9aca3022d32ae8 Mon Sep 17 00:00:00 2001
From: thierryvm <thierryvm@gmail.com>
Date: Sat, 25 Jul 2026 16:02:18 +0200
Subject: [PATCH 3/3] docs(handoff): aligner le handoff sur l'option (a)
 retenue pour la CSP

---
 ...26-07-25-1545-locale-race-et-csp-sonner.md | 61 ++++++++++++-------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md b/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md
index 06ab169..4129a9d 100644
--- a/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md
+++ b/docs/handoffs/2026-07-25-1545-locale-race-et-csp-sonner.md
@@ -8,13 +8,13 @@
 
 ## 1. Ce qui a été livré
 
-| PR   | Sujet                                                            | État                    |
-| ---- | ---------------------------------------------------------------- | ----------------------- |
-| #254 | agents `prod-bug-investigator` + `test-quality-auditor`          | ✅ mergée               |
-| #253 | handoff session précédente                                       | ✅ mergée               |
-| #255 | diagnostic de la course sur le cookie de langue                  | ✅ mergée               |
-| #256 | correction de la cause des échecs de login locaux (`e2e-auth`)   | ✅ mergée               |
-| #257 | CSP : style des toasts restauré + violations `sonner` supprimées | ⏳ ouverte, CI en cours |
+| PR   | Sujet                                                                         | État       |
+| ---- | ----------------------------------------------------------------------------- | ---------- |
+| #254 | agents `prod-bug-investigator` + `test-quality-auditor`                       | ✅ mergée  |
+| #253 | handoff session précédente                                                    | ✅ mergée  |
+| #255 | diagnostic de la course sur le cookie de langue                               | ✅ mergée  |
+| #256 | correction de la cause des échecs de login locaux (`e2e-auth`)                | ✅ mergée  |
+| #257 | CSP : style des toasts restauré (violations console conservées, délibérément) | ⏳ ouverte |
 
 ---
 
@@ -68,18 +68,38 @@ Cause : `sonner` insère un `<style>` **vide** puis le remplit → un élément,
 par re-calcul depuis le paquet installé.
 
 **Ce que ça cachait** : le CSS bloqué, `[data-sonner-toaster]{position:fixed}` ne
-s'appliquait pas → **les toasts sont mal positionnés en production**.
+s'appliquait pas → **les toasts étaient mal positionnés en production**.
 
-|                             | violations `style-src` | `[data-sonner-toaster]` |
-| --------------------------- | ---------------------- | ----------------------- |
-| Avant (production actuelle) | 2                      | `static` ✗              |
-| Après (build prod local)    | 0                      | `fixed` ✓               |
+### Deux hypothèses à moi, deux réfutations par les agents
 
-Ma première hypothèse (Radix / `get-nonce`) a été **réfutée par `plan-reviewer`** : ce
-singleton-là remplit son `<style>` avant de l'insérer, il ne peut pas produire un hash de
-chaîne vide.
+1. `plan-reviewer` a réfuté ma piste **Radix / `get-nonce`** : ce singleton-là remplit son
+   `<style>` avant de l'insérer, il ne peut donc pas produire un hash de chaîne vide. Il a
+   désigné `sonner` — confirmé ensuite par re-calcul, match exact sur les deux hashes.
+2. `security-auditor` a posé un **NO-GO** sur ma première version, qui épinglait les deux
+   hashes dans `style-src` pour faire taire la console. Motif : autoriser un `<style>`, ce
+   n'est pas le tolérer, c'est **l'appliquer**. La copie injectée est _non-layered_, donc
+   elle l'emporte sur toute couche — les hashes annulaient exactement la protection
+   `@layer` du même diff. Et comme sonner utilise `theme: 'light'` par défaut, son
+   `--normal-bg: #fff` aurait gagné sur `bg-card` → **toast fond blanc en thème sombre**.
 
----
+### Ce qui est livré : option (a)
+
+Import layered uniquement, pas de hash. Arbitrage assumé : deux avertissements console
+cosmétiques valent mieux qu'une régression visuelle en sombre et qu'un CSS tiers exécuté au
+sommet de notre cascade. Bénéfice secondaire : une future version compromise de sonner
+resterait bloquée par la CSP.
+
+|                             | violations     | positionnement | fond du toast (sombre) |
+| --------------------------- | -------------- | -------------- | ---------------------- |
+| Avant (production actuelle) | 2              | `static` ✗     | `rgb(17, 26, 46)`      |
+| Après (build prod local)    | 2 _(assumées)_ | `fixed` ✓      | `rgb(17, 26, 46)` ✓    |
+
+La décision est documentée dans `src/app/globals.css` et verrouillée par une assertion E2E
+qui échoue si un hash réapparaît dans `style-src`.
+
+**⚠️ À signaler à @thierry** : les 2 violations console qu'il avait relevées **restent
+visibles**. C'est délibéré et documenté — les supprimer casserait les toasts en thème
+sombre. Le vrai défaut (positionnement) est corrigé.
 
 ## 4. Reste à faire
 
@@ -103,11 +123,10 @@ correctif de la locale avait des tests unitaires verts et ne changeait rien dans
 navigateur : les mocks fabriquaient un en-tête que Next ne transmet jamais. La règle
 appliquée depuis : mesurer le signal réel **avant** d'écrire le prédicat, jamais l'inverse.
 
-**Le sous-agent qui contredit a plus de valeur que celui qui valide.** `plan-reviewer` a
-rejeté mon diagnostic CSP avec une preuve tirée du code de `node_modules` ; ma piste était
-fausse et aurait produit un troisième correctif inopérant. Il a aussi vu une régression
-visuelle que je n'avais pas anticipée (le CSS non-layered de sonner écrasant les utilitaires
-Tailwind).
+**Le sous-agent qui contredit a plus de valeur que celui qui valide.** Deux fois sur ce
+seul bug CSP : `plan-reviewer` a réfuté mon diagnostic (preuve tirée de `node_modules`),
+puis `security-auditor` a posé un NO-GO sur mon correctif en montrant que ses deux moitiés
+se contredisaient. Sans eux je livrais une régression visuelle en thème sombre.
 
 **Ne pas livrer un troisième correctif non prouvé sur un bug déjà mal corrigé deux fois.**
 Reverter et documenter le cul-de-sac vaut mieux qu'un pari. Le résultat négatif mesuré est