diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 950bc21d..a5c8ff75 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -710,6 +710,41 @@ jobs:
       - name: Run website script tests
         run: node website/test_toEmbedUrl.mjs
 
+  # ── Website end-to-end + accessibility (Playwright + axe) ─────────────────
+  website-e2e:
+    name: Website (Playwright + axe)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+
+      - name: Set up Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version: "22"
+          cache: npm
+          cache-dependency-path: website/package-lock.json
+
+      - name: Install dependencies
+        working-directory: website
+        run: npm ci
+
+      - name: Install Playwright's Chromium
+        working-directory: website
+        run: npx playwright install --with-deps chromium
+
+      - name: Run rendering, navigation, editor-removal, XSS, and accessibility tests
+        working-directory: website
+        run: npx playwright test
+
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: website-playwright-report
+          path: website/playwright-report/
+          retention-days: 7
+
   # ── Enforce branch flow: main may only receive PRs from dev ───────────────
   # No-op on dev PRs (step skipped -> job succeeds). To allow hotfixes straight
   # to main, widen the condition below to also accept a 'hotfix/*' head branch.
@@ -734,7 +769,7 @@ jobs:
     name: CI Summary
     runs-on: ubuntu-latest
     needs:
-      [lint, rule-validation, secret-scan, sast-bandit, sast-semgrep, sca-pip-audit, sbom, container-scan, backend-tests, frontend, website, enforce-source-branch]
+      [lint, rule-validation, secret-scan, sast-bandit, sast-semgrep, sca-pip-audit, sbom, container-scan, backend-tests, frontend, website, website-e2e, enforce-source-branch]
     if: always()
     steps:
       - name: Build summary
@@ -750,6 +785,7 @@ jobs:
           BACKEND_TESTS: ${{ needs.backend-tests.result }}
           FRONTEND: ${{ needs.frontend.result }}
           WEBSITE: ${{ needs.website.result }}
+          WEBSITE_E2E: ${{ needs.website-e2e.result }}
           ENFORCE_SOURCE: ${{ needs.enforce-source-branch.result }}
         run: |
           python3 - <<'PYEOF'
@@ -767,6 +803,7 @@ jobs:
               ("Backend Tests (pytest + coverage)",  os.environ["BACKEND_TESTS"]),
               ("Frontend (lint + build)",            os.environ["FRONTEND"]),
               ("Website (script tests)",             os.environ["WEBSITE"]),
+              ("Website (Playwright + axe)",         os.environ["WEBSITE_E2E"]),
               ("Enforce dev to main source",        os.environ["ENFORCE_SOURCE"]),
           ]
 
@@ -819,5 +856,6 @@ jobs:
           needs.backend-tests.result != 'success' ||
           needs.frontend.result != 'success' ||
           needs.website.result != 'success' ||
+          needs.website-e2e.result != 'success' ||
           needs.enforce-source-branch.result != 'success'
         run: exit 1
diff --git a/website/.gitignore b/website/.gitignore
index e985853e..0912d6b5 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -1 +1,5 @@
 .vercel
+node_modules
+test-results
+playwright-report
+.last-run.json
diff --git a/website/README.md b/website/README.md
index 228f9712..ab86ff65 100644
--- a/website/README.md
+++ b/website/README.md
@@ -23,7 +23,7 @@ Vercel picks up `vercel.json` automatically. Every push to `main` triggers a red
 
 ## Adding Content
 
-All content lives in `website/content.js`. Edit it directly on a branch and open a PR to `dev`. Alternatively, use the built-in editor at the Blog Editor section (requires a GitHub personal access token with `repo` scope).
+All content lives in `website/content.js`. Edit it directly on a branch and open a PR to `dev`. The built-in editor at the Blog Editor section can build and format the entry for you, but it no longer publishes for you directly — it does not ask for or use a GitHub token. Use "Export Entry" to get the formatted snippet, paste it into the right array in `website/content.js`, and open the PR yourself (see #297 — a page that can request a `repo`-scoped credential in the browser is a real risk on its own).
 
 ### Blog post
 
@@ -47,7 +47,7 @@ All content lives in `website/content.js`. Edit it directly on a branch and open
 **Images in blog posts:**
 - Cover image: commit to `website/assets/blog/` and set `image: "assets/blog/filename.jpg"`
 - Inline images: use standard Markdown `![alt](assets/blog/filename.jpg)` inside the `content` field
-- Max file size for GitHub API upload via the editor: **700 KB**. Larger files must be committed manually.
+- The editor no longer uploads images for you — commit the file to `website/assets/blog/` yourself as part of your PR.
 
 **Video embeds:**
 - Paste a YouTube watch URL (`https://www.youtube.com/watch?v=...`) or Vimeo URL (`https://vimeo.com/...`) into the `video` field
@@ -121,7 +121,7 @@ Paste the output as the `rules` array in `content.js`.
 
 | Section | Editor support |
 |---|---|
-| Blog posts | Yes — Blog Post type (image upload, video embed, Markdown content) |
+| Blog posts | Yes — Blog Post type (image preview, video embed, Markdown content) |
 | Events | Yes — Community Event type |
 | Contributors | Yes — New Contributor type |
 | Releases | Yes — Release type |
@@ -145,4 +145,23 @@ python3 -m http.server 8080
 
 ---
 
+## Testing
+
+`node test_toEmbedUrl.mjs` runs the fast, pure-function tests (no browser needed).
+
+Rendering, navigation, the removed GitHub-token flow, an XSS regression corpus, and
+accessibility (axe + keyboard) are covered by Playwright:
+
+```bash
+cd website
+npm install
+npx playwright install --with-deps chromium   # first run only
+npm run test:e2e
+```
+
+The suite serves the site itself on `127.0.0.1:4173` (see `playwright.config.js`) —
+no separate server needs to be running first.
+
+---
+
 Core philosophy: keep it technical, keep it open.
diff --git a/website/index.html b/website/index.html
index 552a5907..47b0a0f3 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,6 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--
+      CSP for this site is a real HTTP response header set in vercel.json, not
+      a <meta> tag here — a header applies before any markup parses and
+      supports directives (frame-ancestors) a <meta> tag silently ignores.
+      script-src there does not permit 'unsafe-inline': this file has no
+      inline <script> blocks or inline event-handler attributes (theme-init.js
+      and tailwind-config.js replace the two that used to be inline; every
+      former onclick/onchange/oninput attribute is wired in script.js off
+      data-*/id attributes instead - see the "Static navigation/control
+      wiring" section there). Dynamically-rendered content (markdown, blog
+      content, the live editor preview) is sanitized with DOMPurify before it
+      reaches innerHTML, and the sanitized output never contains inline
+      event-handler attributes in the first place (see setSafeHTML() in
+      script.js), so CSP is a real fallback here, not a bypassable one. See
+      #297.
+    -->
     <title>OpenShield | Enterprise-Grade Open Source CSPM</title>
     
     <!-- SEO & Social Metadata -->
@@ -17,51 +33,18 @@
     <meta name="twitter:description" content="Enterprise-grade Cloud Security Posture Management, purely open.">
     
     <!-- Blocking Theme Script to prevent flickering -->
-    <script>
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
-    </script>
+    <script src="theme-init.js"></script>
     <!-- Lucide Icons -->
     <script src="https://unpkg.com/lucide@1.24.0/dist/umd/lucide.min.js" integrity="sha384-mooE85Luwgx+AyykX7e90VcN8/QCFTSIwPuHLmvcsLVoA0en7lKYb9XlOzn5G2co" crossorigin="anonymous"></script>
     <!-- Marked.js for Markdown parsing -->
     <script src="https://cdn.jsdelivr.net/npm/marked@18.0.6/lib/marked.umd.js" integrity="sha384-uGn1eBC40GtuBgao0epc/cz9O4Lo8/flg/10SW+69UjLI5nP31iT4UPc65Xz10Le" crossorigin="anonymous"></script>
+    <!-- DOMPurify: sanitizes every dynamically-rendered HTML string (markdown output and templated content alike) before it reaches innerHTML -->
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.4.14/dist/purify.min.js" integrity="sha384-46dPGH1XlTmj7bc50bqLjTdORXs/3EP2QpA/6EWbelYWOY9VGp+87RT61S3Mcslb" crossorigin="anonymous"></script>
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI" crossorigin="anonymous">
     <!-- Tailwind + Typography Plugin -->
     <script src="https://cdn.tailwindcss.com/3.4.17?plugins=typography@0.5.16" integrity="sha384-98Wwx1937T3GidSAwih9DtTYWtmUM+etXWic+XaYleGUnH7QDMDAMYH0XA6byBLe" crossorigin="anonymous"></script>
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Inter', 'system-ui', 'sans-serif'],
-                        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
-                    },
-                    colors: {
-                        brand: {
-                            50:  '#eff6ff',
-                            100: '#dbeafe',
-                            200: '#bfdbfe',
-                            300: '#93c5fd',
-                            400: '#60a5fa',
-                            500: '#3b82f6',
-                            600: '#2563eb',
-                            700: '#1d4ed8',
-                        },
-                        dark: {
-                            800: '#1e293b',
-                            900: '#0f172a',
-                            950: '#020617',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
+    <script src="tailwind-config.js"></script>
     <link rel="stylesheet" href="styles.css">
     <style>
         .section { display: none; opacity: 0; transition: opacity 0.3s ease; }
@@ -87,7 +70,7 @@
     <div class="fixed top-6 left-0 w-full z-50 px-4">
         <nav class="max-w-7xl mx-auto border border-slate-200/50 dark:border-white/10 bg-white/70 dark:bg-dark-950/70 backdrop-blur-2xl rounded-2xl shadow-xl shadow-brand-500/5 transition-all duration-300">
             <div class="px-6 h-16 flex justify-between items-center">
-                <div class="flex items-center space-x-3 cursor-pointer group" onclick="showSection('home')">
+                <div class="flex items-center space-x-3 cursor-pointer group" data-nav-section="home">
                     <!-- OpenShield Shield-Lock Logo -->
                     <div class="relative w-10 h-10 flex items-center justify-center group-hover:scale-110 transition duration-300">
                         <svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="OpenShield">
@@ -108,15 +91,15 @@
                 </div>
                 
                 <div class="hidden md:flex items-center space-x-6 text-sm font-semibold">
-                    <button onclick="showSection('home')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Overview</button>
-                    <button onclick="showSection('blog')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Blog</button>
-                    <button onclick="showSection('rules')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Rules</button>
-                    <button onclick="showSection('docs')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Docs</button>
-                    <button onclick="showSection('roadmap')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Roadmap</button>
-                    <button onclick="showSection('releases')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Releases</button>
-                    <button onclick="showSection('faq')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">FAQ</button>
-                    <button onclick="showSection('community')" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Community</button>
-                    <button onclick="showSection('playground')" class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition font-bold">Playground</button>
+                    <button data-nav-section="home" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Overview</button>
+                    <button data-nav-section="blog" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Blog</button>
+                    <button data-nav-section="rules" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Rules</button>
+                    <button data-nav-section="docs" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Docs</button>
+                    <button data-nav-section="roadmap" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Roadmap</button>
+                    <button data-nav-section="releases" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Releases</button>
+                    <button data-nav-section="faq" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">FAQ</button>
+                    <button data-nav-section="community" class="text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white transition">Community</button>
+                    <button data-nav-section="playground" class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition font-bold">Playground</button>
                     <div class="w-px h-4 bg-slate-200 dark:bg-white/10"></div>
                     
                     <!-- Theme Toggle -->
@@ -137,15 +120,15 @@
 
             <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 dark:border-white/5 bg-white dark:bg-dark-950 p-4 rounded-b-2xl shadow-2xl transition-colors duration-300">
                 <div class="space-y-1">
-                    <button onclick="showSection('home'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Overview</button>
-                    <button onclick="showSection('blog'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Blog</button>
-                    <button onclick="showSection('rules'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Rules</button>
-                    <button onclick="showSection('docs'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Docs</button>
-                    <button onclick="showSection('roadmap'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Roadmap</button>
-                    <button onclick="showSection('releases'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Releases</button>
-                    <button onclick="showSection('faq'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">FAQ</button>
-                    <button onclick="showSection('community'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Community</button>
-                    <button onclick="showSection('playground'); toggleMobileMenu()" class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white rounded-md font-bold">Playground</button>
+                    <button data-nav-section="home" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Overview</button>
+                    <button data-nav-section="blog" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Blog</button>
+                    <button data-nav-section="rules" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Rules</button>
+                    <button data-nav-section="docs" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Docs</button>
+                    <button data-nav-section="roadmap" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Roadmap</button>
+                    <button data-nav-section="releases" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Releases</button>
+                    <button data-nav-section="faq" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">FAQ</button>
+                    <button data-nav-section="community" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-white rounded-md font-medium">Community</button>
+                    <button data-nav-section="playground" data-close-mobile-menu class="block w-full text-left px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white rounded-md font-bold">Playground</button>
                     <a href="https://github.com/openshield-org/openshield" target="_blank" class="block w-full text-left px-3 py-2 text-slate-900 dark:text-white font-bold">GitHub</a>
                 </div>
             </div>
@@ -174,13 +157,13 @@ <h1 class="text-5xl lg:text-7xl font-extrabold tracking-tight mb-8 leading-[1.1]
                         </p>
                     </div>
                     <div class="flex flex-col sm:flex-row justify-center lg:justify-start gap-4">
-                        <button onclick="showSection('docs')" class="bg-brand-500 hover:bg-brand-600 text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition-all shadow-xl shadow-brand-500/30 text-center text-lg">
+                        <button data-nav-section="docs" class="bg-brand-500 hover:bg-brand-600 text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition-all shadow-xl shadow-brand-500/30 text-center text-lg">
                             Get Started
                         </button>
                         <a href="https://openshield-gules.vercel.app" target="_blank" class="bg-gradient-to-r from-brand-500 to-cyan-500 text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition-all shadow-xl shadow-brand-500/30 text-center text-lg">
                             Open Dashboard
                         </a>
-                        <button onclick="showSection('rules')" class="bg-slate-50 dark:bg-white/5 text-slate-600 dark:text-slate-400 px-8 py-4 rounded-2xl font-bold hover:scale-105 transition-all border border-slate-200 dark:border-white/10 text-center text-lg">
+                        <button data-nav-section="rules" class="bg-slate-50 dark:bg-white/5 text-slate-600 dark:text-slate-400 px-8 py-4 rounded-2xl font-bold hover:scale-105 transition-all border border-slate-200 dark:border-white/10 text-center text-lg">
                             Rules Gallery
                         </button>
                     </div>
@@ -467,7 +450,7 @@ <h2 class="text-3xl md:text-5xl font-extrabold text-white dark:text-white mb-6">
                         <a href="https://github.com/openshield-org/openshield/blob/dev/CONTRIBUTING.md" target="_blank" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-8 py-4 rounded-2xl font-bold hover:scale-105 transition shadow-lg text-lg">
                             Become a Contributor
                         </a>
-                        <button onclick="showSection('blog-editor'); document.getElementById('edit-type').value='contributor'; toggleEditorFields();" class="border border-slate-700 dark:border-white/10 text-slate-400 hover:text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition text-lg">
+                        <button data-add-contributor class="border border-slate-700 dark:border-white/10 text-slate-400 hover:text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition text-lg">
                             Add Contributor
                         </button>
                     </div>
@@ -505,7 +488,7 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
                             </select>
                         </div>
                     </div>
-                    <button onclick="runMockScan()" id="btn-run-mock" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-8 py-3 rounded-2xl font-black hover:scale-105 transition-all shadow-xl shadow-slate-900/10 dark:shadow-white/5 flex items-center group">
+                    <button id="btn-run-mock" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-8 py-3 rounded-2xl font-black hover:scale-105 transition-all shadow-xl shadow-slate-900/10 dark:shadow-white/5 flex items-center group">
                         <i data-lucide="play" class="w-4 h-4 mr-2 fill-current group-hover:text-brand-500 transition-colors"></i> 
                         Execute Scan
                     </button>
@@ -596,7 +579,7 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
                         <p class="text-lg text-slate-500 mt-2">Browse our library of security checks and compliance mappings.</p>
                     </div>
                     <div class="flex items-center gap-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 rounded-2xl">
-                        <select id="rule-filter" onchange="renderRules()" class="bg-transparent text-sm font-bold text-slate-600 dark:text-slate-300 outline-none px-4 py-2 cursor-pointer appearance-none">
+                        <select id="rule-filter" aria-label="Filter rules by compliance framework" class="bg-transparent text-sm font-bold text-slate-600 dark:text-slate-300 outline-none px-4 py-2 cursor-pointer appearance-none">
                             <option value="all">All Frameworks</option>
                             <option value="CIS">CIS Benchmark</option>
                             <option value="NIST">NIST CSF</option>
@@ -608,7 +591,7 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
                 
                 <div class="relative">
                     <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
-                    <input type="text" id="rule-search" oninput="renderRules()" placeholder="Search rules by ID, name, or service (e.g., 'Storage', 'AZ-KV-001')" class="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-slate-900 dark:text-white placeholder-slate-400 outline-none focus:ring-2 focus:ring-brand-500 transition-shadow shadow-inner">
+                    <input type="text" id="rule-search" placeholder="Search rules by ID, name, or service (e.g., 'Storage', 'AZ-KV-001')" class="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-slate-900 dark:text-white placeholder-slate-400 outline-none focus:ring-2 focus:ring-brand-500 transition-shadow shadow-inner">
                 </div>
             </div>
             <div id="rules-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
@@ -645,7 +628,7 @@ <h4 class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400">Document
                     <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">Technical Insights</h2>
                     <p class="text-lg text-slate-500 mt-2">Deep dives into security research and project updates.</p>
                 </div>
-                <button onclick="showSection('blog-editor')" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-6 py-2.5 rounded-xl font-bold hover:scale-105 transition shadow-lg text-sm flex items-center shrink-0">
+                <button data-nav-section="blog-editor" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-6 py-2.5 rounded-xl font-bold hover:scale-105 transition shadow-lg text-sm flex items-center shrink-0">
                     <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                     Post an Article
                 </button>
@@ -656,7 +639,7 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
         <!-- Blog Editor (Internal) -->
         <section id="blog-editor" class="section max-w-5xl mx-auto px-4 py-16">
             <div class="flex items-center justify-between mb-12">
-                <button onclick="showSection('blog')" class="bg-slate-200/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white px-6 py-3 rounded-xl font-bold hover:scale-105 transition-all flex items-center group">
+                <button data-nav-section="blog" class="bg-slate-200/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white px-6 py-3 rounded-xl font-bold hover:scale-105 transition-all flex items-center group">
                     <svg class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                     Back to Blog
                 </button>
@@ -672,7 +655,7 @@ <h3 class="text-2xl font-bold mb-8 dark:text-white">Compose Content</h3>
                     <form id="editor-form" class="space-y-6">
                         <div>
                             <label class="block text-xs font-bold uppercase tracking-widest text-slate-500 mb-2">Content Type</label>
-                            <select id="edit-type" onchange="toggleEditorFields()" class="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-brand-500 outline-none transition dark:text-white">
+                            <select id="edit-type" class="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-brand-500 outline-none transition dark:text-white">
                                 <option value="blog">Blog Post</option>
                                 <option value="event">Community Event</option>
                                 <option value="contributor">New Contributor</option>
@@ -715,7 +698,7 @@ <h3 class="text-2xl font-bold mb-8 dark:text-white">Compose Content</h3>
                             </div>
                             <div id="image-preview-container" class="hidden mt-4 relative group">
                                 <img id="image-preview-img" src="#" alt="Preview" class="w-full h-40 object-cover rounded-2xl border border-slate-200 dark:border-white/10">
-                                <button type="button" onclick="removeSelectedImage()" class="absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button type="button" data-remove-image class="absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
                                     <i data-lucide="trash-2" class="w-4 h-4"></i>
                                 </button>
                             </div>
@@ -771,20 +754,26 @@ <h3 class="text-2xl font-bold mb-8 dark:text-white">Compose Content</h3>
                         </div>
                         
                         <div class="pt-6 border-t border-slate-100 dark:border-white/5">
-                            <div class="flex justify-between items-center mb-4">
-                                <label class="block text-xs font-bold uppercase tracking-widest text-slate-500">Security: GitHub Access Token</label>
-                                <a href="https://github.com/settings/tokens/new?scopes=repo&description=OpenShield%20Website%20Editor" target="_blank" class="text-[10px] font-bold text-slate-500 hover:text-slate-900 dark:hover:text-white flex items-center transition-colors">
-                                    <i data-lucide="help-circle" class="w-3 h-3 mr-1"></i>
-                                    Get Token
-                                </a>
-                            </div>
-                            <div class="flex gap-4">
-                                <input type="password" id="github-token" placeholder="ghp_xxxxxxxxxxxx" class="flex-grow bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-brand-500 outline-none transition dark:text-white">
-                                <button type="button" onclick="submitToGithub()" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-6 py-3 rounded-xl font-bold hover:scale-105 transition shadow-lg shadow-slate-900/10 dark:shadow-white/10">
-                                    Publish
+                            <label class="block text-xs font-bold uppercase tracking-widest text-slate-500 mb-4">Submit This Entry</label>
+                            <p class="text-[11px] text-slate-500 dark:text-slate-400 mb-4">
+                                This editor no longer asks for a GitHub token in the browser — a page that can request
+                                a <code>repo</code>-scope credential is a real risk if anything on it is ever
+                                compromised. Export the entry below, then open a pull request the normal way.
+                            </p>
+                            <div class="flex flex-wrap gap-4 mb-4">
+                                <button type="button" id="export-entry-btn" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-6 py-3 rounded-xl font-bold hover:scale-105 transition shadow-lg shadow-slate-900/10 dark:shadow-white/10">
+                                    Export Entry
+                                </button>
+                                <button type="button" id="copy-entry-btn" class="hidden bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white px-6 py-3 rounded-xl font-bold hover:border-brand-500/50 transition">
+                                    Copy
                                 </button>
+                                <a href="https://github.com/openshield-org/openshield/edit/dev/website/content.js" target="_blank" rel="noopener" class="flex items-center px-6 py-3 rounded-xl font-bold text-sm border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white hover:border-brand-500/50 transition">
+                                    <i data-lucide="git-pull-request" class="w-4 h-4 mr-2"></i>
+                                    Open a Pull Request
+                                </a>
                             </div>
-                            <p class="mt-2 text-[10px] text-slate-400">Tokens are never stored. Requires <code>repo</code> scope to create branches and PRs.</p>
+                            <textarea id="export-entry-output" readonly rows="8" class="hidden w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-xs font-mono focus:ring-2 focus:ring-brand-500 outline-none transition dark:text-white" placeholder="Exported entry will appear here..."></textarea>
+                            <p id="export-entry-note" class="mt-2 text-[10px] text-slate-400"></p>
                         </div>
                     </form>
                 </div>
@@ -806,7 +795,7 @@ <h3 class="text-2xl font-bold dark:text-white px-4">Live Preview</h3>
                     <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">Events</h2>
                     <p class="text-lg text-slate-500 mt-2">Join the OpenShield community in person and online.</p>
                 </div>
-                <button onclick="showSection('blog-editor')" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-6 py-2.5 rounded-xl font-bold hover:scale-105 transition shadow-lg text-sm flex items-center shrink-0">
+                <button data-nav-section="blog-editor" class="bg-slate-900 dark:bg-white text-white dark:text-dark-950 px-6 py-2.5 rounded-xl font-bold hover:scale-105 transition shadow-lg text-sm flex items-center shrink-0">
                     <i data-lucide="calendar-plus" class="w-4 h-4 mr-2"></i>
                     Add Event
                 </button>
@@ -816,7 +805,7 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
 
         <!-- Post Detail -->
         <section id="post-detail" class="section max-w-4xl mx-auto px-4 py-16">
-            <button onclick="showSection('blog')" class="bg-slate-200/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white px-6 py-3 rounded-xl font-bold hover:scale-105 transition-all mb-12 flex items-center group">
+            <button data-nav-section="blog" class="bg-slate-200/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white px-6 py-3 rounded-xl font-bold hover:scale-105 transition-all mb-12 flex items-center group">
                 <svg class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                 Back to Archive
             </button>
@@ -831,7 +820,7 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
     <footer class="max-w-7xl mx-auto mb-12 px-4 mt-12">
         <div class="bg-white dark:bg-dark-950 border border-slate-200 dark:border-white/5 p-8 rounded-[2.5rem] shadow-xl shadow-brand-500/5 transition-colors duration-300">
             <div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-8">
-                <div class="flex items-center space-x-3 cursor-pointer" onclick="showSection('home')">
+                <div class="flex items-center space-x-3 cursor-pointer" data-nav-section="home">
                     <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <defs>
                             <linearGradient id="ffg" x1="4" y1="2" x2="28" y2="30" gradientUnits="userSpaceOnUse">
@@ -849,9 +838,9 @@ <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight
                 </div>
                 
                 <div class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-xs font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">
-                    <button onclick="showSection('docs')" class="hover:text-brand-600 dark:hover:text-white transition uppercase">Documentation</button>
-                    <button onclick="showSection('rules')" class="hover:text-brand-600 dark:hover:text-white transition uppercase">Security Rules</button>
-                    <button onclick="showSection('community')" class="hover:text-brand-600 dark:hover:text-white transition uppercase">Community</button>
+                    <button data-nav-section="docs" class="hover:text-brand-600 dark:hover:text-white transition uppercase">Documentation</button>
+                    <button data-nav-section="rules" class="hover:text-brand-600 dark:hover:text-white transition uppercase">Security Rules</button>
+                    <button data-nav-section="community" class="hover:text-brand-600 dark:hover:text-white transition uppercase">Community</button>
                     <a href="feed.xml" target="_blank" class="flex items-center hover:text-orange-500 transition group">
                         <i data-lucide="rss" class="w-3 h-3 mr-1 group-hover:animate-pulse"></i>
                         RSS Feed
diff --git a/website/package-lock.json b/website/package-lock.json
new file mode 100644
index 00000000..b32d94c6
--- /dev/null
+++ b/website/package-lock.json
@@ -0,0 +1,102 @@
+{
+  "name": "openshield-website",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "openshield-website",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@axe-core/playwright": "^4.10.2",
+        "@playwright/test": "^1.56.0"
+      }
+    },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.13.0.tgz",
+      "integrity": "sha512-6YLx+kxXu5GJceG4ozFg+33a2EMTdjYwWGloJ3sb9Kta5pp+ZNS53uxGVog5JetIY8s++P5UrtX+cri+u0VAVg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.13.0"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+      "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.13.0.tgz",
+      "integrity": "sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    }
+  }
+}
diff --git a/website/package.json b/website/package.json
new file mode 100644
index 00000000..1ba6307f
--- /dev/null
+++ b/website/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "openshield-website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "node --test test_toEmbedUrl.mjs",
+    "test:e2e": "playwright test",
+    "test:e2e:install": "playwright install --with-deps chromium"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
+    "@playwright/test": "^1.56.0"
+  }
+}
diff --git a/website/playwright.config.js b/website/playwright.config.js
new file mode 100644
index 00000000..f79c4b46
--- /dev/null
+++ b/website/playwright.config.js
@@ -0,0 +1,24 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+    testDir: './tests',
+    testMatch: '**/*.spec.js',
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 1 : 0,
+    reporter: process.env.CI ? 'list' : 'html',
+    use: {
+        baseURL: 'http://127.0.0.1:4173',
+        trace: 'retain-on-failure',
+    },
+    webServer: {
+        // Applies vercel.json's real headers (including CSP), unlike plain
+        // `python3 -m http.server` - see tests/csp_server.py. Every test in
+        // this suite now runs against production-representative headers,
+        // not just the ones in security.spec.js that assert on them.
+        command: 'python3 tests/csp_server.py 4173',
+        url: 'http://127.0.0.1:4173/index.html',
+        reuseExistingServer: !process.env.CI,
+        timeout: 15000,
+    },
+});
diff --git a/website/script.js b/website/script.js
index a54b0c0c..610b2af7 100644
--- a/website/script.js
+++ b/website/script.js
@@ -14,17 +14,39 @@ function escapeHTML(str) {
     return p.innerHTML;
 }
 
+// Every dynamically-built HTML string - whether it's this file's own
+// template markup or markdown rendered from a blog post / the live editor
+// preview - goes through this before it ever reaches innerHTML. DOMPurify's
+// default config strips <script>, inline event-handler attributes
+// (onerror=, onclick=, ...), javascript: URLs, and unknown/dangerous tags.
+// It never contains an inline handler afterward, so it does not depend on
+// the page's CSP allowing 'unsafe-inline' scripts to be safe - it's safe
+// because nothing executable survives sanitization.
+const SANITIZE_CONFIG = {
+    ADD_TAGS: ['iframe'],
+    ADD_ATTR: ['allowfullscreen', 'frameborder', 'loading', 'target'],
+};
+
+function sanitizeHTML(html) {
+    return DOMPurify.sanitize(html, SANITIZE_CONFIG);
+}
+
+function setSafeHTML(el, html) {
+    if (!el) return;
+    el.innerHTML = sanitizeHTML(html);
+}
+
 function dedent(str) {
     if (!str) return '';
     const lines = str.split('\n');
     const first = lines.find(l => l.trim() !== '');
     if (!first) return str.trim();
     const baseIndent = first.match(/^\s*/)[0];
-    
+
     let inPre = false;
     return lines.map(l => {
         let line = l.startsWith(baseIndent) ? l.substring(baseIndent.length) : l;
-        
+
         // If we are not in a pre block, trim the line to move tags to column 0 for marked.js
         if (!inPre) {
             const trimmed = line.trim();
@@ -40,6 +62,19 @@ function dedent(str) {
     }).join('\n').trim();
 }
 
+// Renders markdown to sanitized HTML, ready to assign to innerHTML directly.
+// Centralised here so every markdown-derived surface (blog posts, docs
+// pages, the live editor preview) sanitizes identically - there is exactly
+// one path from untrusted markdown text to the DOM.
+function renderMarkdown(raw) {
+    const html = marked.parse(dedent(raw || ''));
+    const clean = sanitizeHTML(html);
+    const temp = document.createElement('div');
+    temp.innerHTML = clean;
+    temp.querySelectorAll('pre').forEach(pre => pre.classList.add('not-prose'));
+    return temp.innerHTML;
+}
+
 // ------------------------------------------------------------------ //
 // 2. Theme Management                                                  //
 // ------------------------------------------------------------------ //
@@ -76,6 +111,7 @@ function initTheme() {
 // ------------------------------------------------------------------ //
 
 async function typeWriter(text, element, speed = 40) {
+    if (!element) return;
     for (let i = 0; i < text.length; i++) {
         element.textContent += text.charAt(i);
         await new Promise(resolve => setTimeout(resolve, speed));
@@ -93,12 +129,19 @@ async function runTerminalSession() {
         container.textContent = '';
         const session = sessions[currentSession];
 
+        // Built with real DOM APIs, not an HTML string, so the
+        // .command-text span genuinely exists for typeWriter() to type into
+        // - no innerHTML/sanitizer round-trip needed for two static nodes.
         const cmdRow = document.createElement('div');
         cmdRow.className = 'flex items-start';
-        cmdRow.textContent = '<span class="text-brand-500 mr-3 shrink-0">❯</span><span class="command-text"></span>';
+        const prompt = document.createElement('span');
+        prompt.className = 'text-brand-500 mr-3 shrink-0';
+        prompt.textContent = '❯';
+        const cmdTextSpan = document.createElement('span');
+        cmdTextSpan.className = 'command-text';
+        cmdRow.append(prompt, cmdTextSpan);
         container.appendChild(cmdRow);
-        
-        const cmdTextSpan = cmdRow.querySelector('.command-text');
+
         await typeWriter(session.command, cmdTextSpan);
         await new Promise(resolve => setTimeout(resolve, 800));
 
@@ -149,13 +192,13 @@ function showBlogPost(postId) {
     const postContent = document.getElementById('post-content');
     if (postContent) {
         const imageHtml = post.image
-            ? `<img src="${post.image}" class="w-full h-80 object-cover rounded-[2.5rem] mb-12 border border-slate-200 dark:border-white/10 shadow-2xl">`
+            ? `<img src="${escapeHTML(post.image)}" class="w-full h-80 object-cover rounded-[2.5rem] mb-12 border border-slate-200 dark:border-white/10 shadow-2xl">`
             : '';
         const videoHtml = post.video
-            ? `<div class="relative w-full aspect-video rounded-[2.5rem] overflow-hidden border border-slate-200 dark:border-white/10 shadow-2xl mb-12"><iframe src="${post.video}" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen loading="lazy"></iframe></div>`
+            ? `<div class="relative w-full aspect-video rounded-[2.5rem] overflow-hidden border border-slate-200 dark:border-white/10 shadow-2xl mb-12"><iframe src="${escapeHTML(post.video)}" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen loading="lazy"></iframe></div>`
             : '';
 
-        postContent.textContent = `
+        setSafeHTML(postContent, `
             ${imageHtml}
             ${videoHtml}
             <header class="mb-12 border-b border-slate-100 dark:border-white/5 pb-12">
@@ -168,15 +211,9 @@ function showBlogPost(postId) {
                 <p class="text-slate-500 text-sm">By ${escapeHTML(post.author)}</p>
             </header>
             <div class="prose prose-slate dark:prose-invert prose-lg max-none">
-                ${(() => {
-                    const html = marked.parse(dedent(post.content));
-                    const temp = document.createElement('div');
-                    temp.textContent = html;
-                    temp.querySelectorAll('pre').forEach(pre => pre.classList.add('not-prose'));
-                    return temp.innerHTML;
-                })()}
+                ${renderMarkdown(post.content)}
             </div>
-        `;
+        `);
         showSection('post-detail');
         window.history.pushState(null, null, `#blog/${postId}`);
         if (window.lucide) lucide.createIcons();
@@ -207,8 +244,18 @@ function toggleMobileMenu() {
 }
 
 // ------------------------------------------------------------------ //
-// 5. Blog Editor & GitHub Integration                                  //
+// 5. Blog Editor                                                       //
 // ------------------------------------------------------------------ //
+//
+// This editor no longer talks to the GitHub API from the browser (issue
+// #297): a public page that asks any visitor for a classic, repo-scoped
+// personal access token is a serious risk the moment anything on that page
+// can be made to run attacker script - which is exactly the class of bug
+// this same fix closes elsewhere on the page. "Export Entry" formats the
+// entry the same way the old client-side flow did and hands it to the
+// contributor to paste into website/content.js themselves, opening a PR the
+// normal way. A properly scoped server-side publishing integration is
+// explicitly out of scope here - see the issue for why.
 
 function initEditor() {
     const form = document.getElementById('editor-form');
@@ -221,14 +268,13 @@ function initEditor() {
 
     document.getElementById('edit-image-input')?.addEventListener('change', handleImageSelect);
     initImageDropZone();
+
+    document.getElementById('export-entry-btn')?.addEventListener('click', exportEntry);
+    document.getElementById('copy-entry-btn')?.addEventListener('click', copyExportedEntry);
 }
 
 let selectedImageFile = null;
 
-// GitHub Contents API rejects base64 payloads over 1 MB.
-// Base64 adds ~33% overhead, so the raw file must be under ~750 KB.
-const MAX_IMAGE_BYTES = 700 * 1024;
-
 const EMBED_ALLOWED_HOSTS = new Set(['www.youtube.com', 'youtube.com', 'player.vimeo.com']);
 
 function toEmbedUrl(raw) {
@@ -264,10 +310,6 @@ function processImageFile(file) {
         alert('Only PNG, JPG, and WEBP images are supported.');
         return;
     }
-    if (file.size > MAX_IMAGE_BYTES) {
-        alert(`Image is ${(file.size / 1024).toFixed(0)} KB. Please use an image under 700 KB to ensure it uploads to GitHub successfully.`);
-        return;
-    }
     selectedImageFile = file;
     const reader = new FileReader();
     reader.onload = (e) => {
@@ -340,31 +382,40 @@ function toggleEditorFields() {
     document.getElementById('label-title').textContent = labelMap[type] || 'Title';
     document.getElementById('edit-title').placeholder = placeholderMap[type] || '';
 
+    resetExportedEntry();
     updatePreview();
 }
 
+function wireAvatarFallback(img) {
+    if (!img) return;
+    img.addEventListener('error', function onError() {
+        this.removeEventListener('error', onError);
+        this.src = 'https://github.com/github.png';
+    });
+}
+
 function updatePreview() {
     const type = document.getElementById('edit-type').value;
     const title = document.getElementById('edit-title').value || (type === 'blog' ? 'Post Title' : 'Event Name');
     const date = document.getElementById('edit-date').value || 'Date';
-    
+
     const preview = document.getElementById('editor-preview');
     if (!preview) return;
 
     if (type === 'blog') {
         const author = document.getElementById('edit-author').value || 'Author';
-        const content = document.getElementById('edit-content').value || '<p>Content will appear here...</p>';
+        const content = document.getElementById('edit-content').value || '_Content will appear here..._';
         const imageSrc = document.getElementById('image-preview-img').src;
         const imageHtml = !document.getElementById('image-preview-container').classList.contains('hidden')
-            ? `<img src="${imageSrc}" class="w-full h-64 object-cover rounded-3xl mb-8 border border-slate-200 dark:border-white/10 shadow-lg">`
+            ? `<img src="${escapeHTML(imageSrc)}" class="w-full h-64 object-cover rounded-3xl mb-8 border border-slate-200 dark:border-white/10 shadow-lg">`
             : '';
         const videoRaw = document.getElementById('edit-video')?.value || '';
         const embedUrl = toEmbedUrl(videoRaw);
         const videoHtml = embedUrl
-            ? `<div class="relative w-full aspect-video rounded-2xl overflow-hidden border border-slate-200 dark:border-white/10 shadow-lg mb-8"><iframe src="${embedUrl}" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen loading="lazy"></iframe></div>`
+            ? `<div class="relative w-full aspect-video rounded-2xl overflow-hidden border border-slate-200 dark:border-white/10 shadow-lg mb-8"><iframe src="${escapeHTML(embedUrl)}" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen loading="lazy"></iframe></div>`
             : '';
 
-        preview.textContent = `
+        setSafeHTML(preview, `
             ${imageHtml}
             <header class="mb-8 border-b border-slate-100 dark:border-white/5 pb-8">
                 <div class="flex items-center text-brand-500 text-xs font-bold mb-4 uppercase tracking-widest">
@@ -377,19 +428,13 @@ function updatePreview() {
             </header>
             ${videoHtml}
             <div class="prose prose-slate dark:prose-invert">
-                ${(() => {
-                    const html = marked.parse(dedent(content));
-                    const temp = document.createElement('div');
-                    temp.textContent = html;
-                    temp.querySelectorAll('pre').forEach(pre => pre.classList.add('not-prose'));
-                    return temp.innerHTML;
-                })()}
+                ${renderMarkdown(content)}
             </div>
-        `;
+        `);
     } else if (type === 'event') {
         const location = document.getElementById('edit-location').value || 'Location';
         const status = document.getElementById('edit-status').value || 'Upcoming';
-        preview.textContent = `
+        setSafeHTML(preview, `
             <div class="flex flex-col items-center justify-center text-center py-20">
                 <div class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 text-[10px] font-bold uppercase tracking-widest mb-6">
                     Event Preview
@@ -400,17 +445,17 @@ function updatePreview() {
                     ${escapeHTML(status)}
                 </div>
             </div>
-        `;
+        `);
     } else if (type === 'contributor') {
         const handle = document.getElementById('edit-handle').value || 'username';
         const role = document.getElementById('edit-role').value || 'Contributor';
-        preview.textContent = `
+        setSafeHTML(preview, `
             <div class="flex flex-col items-center justify-center text-center py-20">
                 <div class="inline-flex items-center px-3 py-1 rounded-full bg-slate-500/10 border border-slate-500/20 text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-8">
                     Contributor Preview
                 </div>
                 <div class="relative mb-6">
-                    <img src="https://github.com/${handle}.png" alt="${handle}" class="w-24 h-24 rounded-full border-4 border-slate-200 dark:border-white/10 shadow-xl" onerror="this.src='https://github.com/github.png'">
+                    <img id="contributor-preview-avatar" src="${escapeHTML(`https://github.com/${handle}.png`)}" alt="${escapeHTML(handle)}" class="w-24 h-24 rounded-full border-4 border-slate-200 dark:border-white/10 shadow-xl">
                     <div class="absolute -bottom-2 -right-2 w-8 h-8 bg-slate-900 rounded-full flex items-center justify-center border-2 border-white dark:border-dark-950">
                         <i class="fab fa-github text-white text-xs"></i>
                     </div>
@@ -419,12 +464,18 @@ function updatePreview() {
                 <p class="text-slate-500 font-medium mb-1">${escapeHTML(role)}</p>
                 <p class="text-brand-500 text-sm font-mono">@${escapeHTML(handle)}</p>
             </div>
-        `;
+        `);
+        // The onerror avatar fallback used to be an inline attribute in the
+        // template string itself; DOMPurify strips inline event-handler
+        // attributes from sanitized output by design (that's what closes the
+        // XSS this whole fix is about), so it's wired up here instead, the
+        // same way every other dynamic click/error handler on this page now is.
+        wireAvatarFallback(document.getElementById('contributor-preview-avatar'));
     } else if (type === 'release') {
         const version = document.getElementById('edit-release-version').value || 'vX.Y.Z';
         const releaseType = document.getElementById('edit-release-type').value || 'minor';
         const notes = (document.getElementById('edit-release-notes').value || '').split('\n').filter(l => l.trim());
-        preview.textContent = `
+        setSafeHTML(preview, `
             <div class="py-8">
                 <div class="flex items-center gap-4 mb-4">
                     <span class="font-mono text-2xl font-extrabold text-slate-900 dark:text-white">${escapeHTML(version)}</span>
@@ -441,65 +492,60 @@ function updatePreview() {
                     `).join('')}
                 </ul>
             </div>
-        `;
+        `);
     }
-}
 
-async function submitToGithub() {
-    const token = document.getElementById('github-token').value;
-    if (!token) {
-        alert('Please provide a GitHub Personal Access Token for authentication.');
-        return;
-    }
+    resetExportedEntry();
+}
 
+function buildEntry() {
     const type = document.getElementById('edit-type').value;
-    let entry;
-    let entryTitle;
-    
+
     if (type === 'blog') {
         const videoRaw = document.getElementById('edit-video')?.value || '';
-        entry = {
+        const entry = {
             id: document.getElementById('edit-id').value,
             title: document.getElementById('edit-title').value,
             date: document.getElementById('edit-date').value,
             excerpt: document.getElementById('edit-excerpt').value,
             author: document.getElementById('edit-author').value,
-            image: "",
+            // Images are no longer uploaded from the browser (that required
+            // the token this fix removes). Left blank; exportEntry()'s note
+            // tells the contributor to add the file under
+            // website/assets/blog/ and fill this in as part of their PR.
+            image: '',
             video: toEmbedUrl(videoRaw) || undefined,
             content: document.getElementById('edit-content').value
         };
-        entryTitle = entry.title;
         if (!entry.id || !entry.title || !entry.content) {
-            alert('ID, Title, and Content are required for blog posts.');
-            return;
+            return { error: 'ID, Title, and Content are required for blog posts.' };
         }
+        return { type, entry, arrayKey: 'blog' };
     } else if (type === 'event') {
-        entry = {
+        const entry = {
             title: document.getElementById('edit-title').value,
             date: document.getElementById('edit-date').value,
             location: document.getElementById('edit-location').value,
             link: document.getElementById('edit-link').value,
             status: document.getElementById('edit-status').value
         };
-        entryTitle = entry.title;
         if (!entry.title || !entry.date) {
-            alert('Title and Date are required for events.');
-            return;
+            return { error: 'Title and Date are required for events.' };
         }
+        return { type, entry, arrayKey: 'events' };
     } else if (type === 'contributor') {
-        entry = {
+        const entry = {
             name: document.getElementById('edit-title').value,
             role: document.getElementById('edit-role').value,
             handle: document.getElementById('edit-handle').value
         };
-        entryTitle = entry.name;
         if (!entry.name || !entry.handle) {
-            alert('Name and GitHub Handle are required for contributors.');
-            return;
+            return { error: 'Name and GitHub Handle are required for contributors.' };
         }
+        return { type, entry, arrayKey: 'contributors' };
     } else if (type === 'release') {
         const notesRaw = document.getElementById('edit-release-notes').value || '';
-        entry = {
+        const entry = {
             version: document.getElementById('edit-release-version').value,
             date: document.getElementById('edit-date').value,
             type: document.getElementById('edit-release-type').value,
@@ -507,138 +553,62 @@ async function submitToGithub() {
             notes: notesRaw.split('\n').map(l => l.trim()).filter(l => l.length > 0),
             github: document.getElementById('edit-release-github').value
         };
-        entryTitle = entry.version;
         if (!entry.version || !entry.title || entry.notes.length === 0) {
-            alert('Version, Title, and at least one release note are required.');
-            return;
+            return { error: 'Version, Title, and at least one release note are required.' };
         }
+        return { type, entry, arrayKey: 'releases' };
     }
+    return { error: 'Unknown entry type.' };
+}
 
-    const btn = event.target;
-    const originalText = btn.textContent;
-    btn.disabled = true;
-    btn.textContent = 'Preparing PR...';
+function resetExportedEntry() {
+    const output = document.getElementById('export-entry-output');
+    const copyBtn = document.getElementById('copy-entry-btn');
+    const note = document.getElementById('export-entry-note');
+    output?.classList.add('hidden');
+    copyBtn?.classList.add('hidden');
+    if (output) output.value = '';
+    if (note) note.textContent = '';
+}
 
-    try {
-        const owner = 'openshield-org';
-        const repo = 'openshield';
-        const path = 'website/content.js';
-        const baseBranch = 'dev';
-        const newBranch = `feat/website-${type}-${Date.now()}`;
-
-        const headers = {
-            'Authorization': `token ${token}`,
-            'Content-Type': 'application/json'
-        };
+function exportEntry() {
+    const result = buildEntry();
+    const note = document.getElementById('export-entry-note');
+    const output = document.getElementById('export-entry-output');
+    const copyBtn = document.getElementById('copy-entry-btn');
+    if (!output || !note || !copyBtn) return;
+
+    if (result.error) {
+        output.classList.add('hidden');
+        copyBtn.classList.add('hidden');
+        note.textContent = result.error;
+        return;
+    }
 
-        // 1. Get current SHA of 'dev' branch
-        const devRefRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/ref/heads/${baseBranch}`, { headers });
-        if (!devRefRes.ok) throw new Error(`Could not find ${baseBranch} branch.`);
-        const devRefData = await devRefRes.json();
-        const devSha = devRefData.object.sha;
-
-        // 2. Create a new feature branch from 'dev'
-        btn.textContent = 'Creating Branch...';
-        const createBranchRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/refs`, {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({
-                ref: `refs/heads/${newBranch}`,
-                sha: devSha
-            })
-        });
-        if (!createBranchRes.ok) throw new Error('Failed to create new branch. Check your token permissions.');
-
-        // 3. Handle Image Upload if selected
-        if (type === 'blog' && selectedImageFile) {
-            btn.textContent = 'Uploading Image...';
-            const fileName = `${entry.id}-${Date.now()}.${selectedImageFile.name.split('.').pop()}`;
-            const imagePath = `website/assets/blog/${fileName}`;
-            const base64Image = await new Promise((resolve) => {
-                const reader = new FileReader();
-                reader.onload = (e) => resolve(e.target.result.split(',')[1]);
-                reader.readAsDataURL(selectedImageFile);
-            });
-
-            const imageUploadRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/${imagePath}`, {
-                method: 'PUT',
-                headers,
-                body: JSON.stringify({
-                    message: `assets(website): upload blog image - ${entryTitle}`,
-                    content: base64Image,
-                    branch: newBranch
-                })
-            });
-
-            if (imageUploadRes.ok) {
-                entry.image = `assets/blog/${fileName}`;
-            } else {
-                console.error('Failed to upload image, continuing without it.');
-            }
-        }
+    const snippet = `${JSON.stringify(result.entry, null, 4)},`;
+    output.value = snippet;
+    output.classList.remove('hidden');
+    copyBtn.classList.remove('hidden');
 
-        // 4. Get content.js current state & SHA (from dev)
-        const fileRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/${path}?ref=${baseBranch}`, { headers });
-        const fileData = await fileRes.json();
-        const content = atob(fileData.content);
-        const fileSha = fileData.sha;
-
-        // 5. Inject new entry into content.js
-        const arrayKeyMap = {
-            'blog': 'blog: [',
-            'event': 'events: [',
-            'contributor': 'contributors: ['
-        };
-        const arrayKey = arrayKeyMap[type];
-        const arrayStart = content.indexOf(arrayKey);
-        if (arrayStart === -1) throw new Error(`Could not find ${type} array in content.js`);
-        
-        const insertPos = arrayStart + arrayKey.length;
-        const newEntryString = `\n        ${JSON.stringify(entry, null, 4)},`;
-        const updatedContent = content.slice(0, insertPos) + newEntryString + content.slice(insertPos);
-
-        // 6. Commit change to the NEW branch
-        btn.textContent = 'Committing Changes...';
-        const commitRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/${path}`, {
-            method: 'PUT',
-            headers,
-            body: JSON.stringify({
-                message: `feat(website): add ${type} - ${entryTitle}`,
-                content: btoa(unescape(encodeURIComponent(updatedContent))),
-                sha: fileSha,
-                branch: newBranch
-            })
-        });
-        if (!commitRes.ok) throw new Error('Failed to commit changes to the new branch.');
-
-        // 7. Create Pull Request from newBranch to baseBranch
-        btn.textContent = 'Opening Pull Request...';
-        const prRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/pulls`, {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({
-                title: `feat(website): add ${type} - ${entryTitle}`,
-                body: `This PR adds a new ${type} entry via the in-website editor.\n\n**Title:** ${entryTitle}\n**Author/Location:** ${entry.author || entry.location}`,
-                head: newBranch,
-                base: baseBranch
-            })
-        });
+    const imageNote = (result.type === 'blog' && selectedImageFile)
+        ? ' Your selected image is not uploaded automatically — add it under website/assets/blog/ in your PR and set the "image" field above to its path.'
+        : '';
+    note.textContent = `Paste this into the "${result.arrayKey}" array in website/content.js, then open a pull request.${imageNote}`;
+}
 
-        if (!prRes.ok) {
-            const error = await prRes.json();
-            throw new Error(error.message || 'Failed to create Pull Request.');
+async function copyExportedEntry() {
+    const output = document.getElementById('export-entry-output');
+    const note = document.getElementById('export-entry-note');
+    if (!output || !output.value) return;
+    try {
+        await navigator.clipboard.writeText(output.value);
+        if (note) {
+            const original = note.textContent;
+            note.textContent = 'Copied to clipboard.';
+            setTimeout(() => { note.textContent = original; }, 2000);
         }
-
-        const prData = await prRes.json();
-        alert(`Success! Your Pull Request has been created: ${prData.html_url}\n\nMaintainers will review and merge it shortly.`);
-        showSection(type === 'contributor' ? 'community' : (type === 'blog' ? 'blog' : 'events'));
-        window.open(prData.html_url, '_blank');
-
-    } catch (err) {
-        alert(`Error: ${err.message}`);
-    } finally {
-        btn.disabled = false;
-        btn.textContent = originalText;
+    } catch {
+        output.select();
     }
 }
 
@@ -650,13 +620,13 @@ function renderEcosystem() {
     const container = document.getElementById('ecosystem-container');
     if (!container) return;
 
-    container.textContent = siteContent.ecosystem.map((item, idx) => {
+    setSafeHTML(container, siteContent.ecosystem.map((item, idx) => {
         const isLarge = idx === 0 || idx === 3;
         const colSpan = isLarge ? 'md:col-span-8' : 'md:col-span-4';
-        
-        const iconHtml = item.icon === 'shield' 
+
+        const iconHtml = item.icon === 'shield'
             ? `<i class="fas fa-shield-halved fa-fw text-2xl"></i>`
-            : `<i data-lucide="${item.icon}" class="w-7 h-7"></i>`;
+            : `<i data-lucide="${escapeHTML(item.icon)}" class="w-7 h-7"></i>`;
 
         return `
             <div class="${colSpan} bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-10 rounded-[2.5rem] backdrop-blur-sm group hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all shadow-sm">
@@ -667,7 +637,9 @@ function renderEcosystem() {
                 <p class="text-slate-600 dark:text-slate-400 leading-relaxed">${escapeHTML(item.description)}</p>
             </div>
         `;
-    }).join('');
+    }).join(''));
+
+    if (window.lucide) lucide.createIcons();
 }
 
 function renderRules() {
@@ -678,26 +650,26 @@ function renderRules() {
     const filterFw = document.getElementById('rule-filter')?.value || 'all';
 
     const filteredRules = siteContent.rules.filter(rule => {
-        const matchesSearch = rule.id.toLowerCase().includes(searchTerm) || 
-                              rule.name.toLowerCase().includes(searchTerm) || 
+        const matchesSearch = rule.id.toLowerCase().includes(searchTerm) ||
+                              rule.name.toLowerCase().includes(searchTerm) ||
                               rule.category.toLowerCase().includes(searchTerm) ||
                               rule.description.toLowerCase().includes(searchTerm);
-        
+
         const matchesFw = filterFw === 'all' || rule.frameworks[filterFw] !== undefined;
-        
+
         return matchesSearch && matchesFw;
     });
 
     if (filteredRules.length === 0) {
-        container.textContent = `
+        setSafeHTML(container, `
             <div class="col-span-full text-center py-12 bg-slate-50 dark:bg-white/5 border border-dashed border-slate-300 dark:border-white/10 rounded-3xl">
                 <p class="text-slate-500">No rules match your search criteria.</p>
             </div>
-        `;
+        `);
         return;
     }
 
-    container.textContent = filteredRules.map(rule => `
+    setSafeHTML(container, filteredRules.map(rule => `
         <div class="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-8 rounded-3xl hover:border-brand-500/50 transition-all group shadow-sm flex flex-col h-full">
             <div class="flex justify-between items-start mb-6">
                 <span class="text-[10px] font-bold tracking-widest text-slate-400 uppercase">${escapeHTML(rule.id)}</span>
@@ -708,13 +680,13 @@ function renderRules() {
             <div class="flex flex-wrap gap-2 mt-auto">
                 ${Object.entries(rule.frameworks).map(([f, v]) => `
                     <span class="px-2 py-1 rounded-md bg-slate-100 dark:bg-white/5 text-[10px] font-mono text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/10">
-                        ${f}: ${v}
+                        ${escapeHTML(f)}: ${escapeHTML(String(v))}
                     </span>
                 `).join('')}
             </div>
         </div>
-    `).join('');
-    
+    `).join(''));
+
     if (window.lucide) lucide.createIcons();
 }
 
@@ -722,12 +694,16 @@ function renderDocsSidebar() {
     const nav = document.getElementById('docs-nav');
     if (!nav) return;
 
-    nav.textContent = siteContent.docs.map(doc => `
-        <button onclick="showDocPage('${doc.id}')" id="nav-${doc.id}" class="doc-nav-btn block w-full text-left px-5 py-3 text-sm font-semibold text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 rounded-2xl transition-all flex items-center group">
+    setSafeHTML(nav, siteContent.docs.map(doc => `
+        <button data-doc-id="${escapeHTML(doc.id)}" id="nav-${escapeHTML(doc.id)}" class="doc-nav-btn block w-full text-left px-5 py-3 text-sm font-semibold text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 rounded-2xl transition-all flex items-center group">
             <span class="w-1.5 h-1.5 rounded-full bg-transparent group-hover:bg-brand-500 mr-3 transition-colors"></span>
             ${escapeHTML(doc.title)}
         </button>
-    `).join('');
+    `).join(''));
+
+    nav.querySelectorAll('[data-doc-id]').forEach(btn => {
+        btn.addEventListener('click', () => showDocPage(btn.dataset.docId));
+    });
 }
 
 function showDocPage(docId) {
@@ -736,38 +712,33 @@ function showDocPage(docId) {
 
     const container = document.getElementById('docs-content-container');
     if (container) {
-        const rawHtml = marked.parse(dedent(doc.content));
-        const tempDiv = document.createElement('div');
-        tempDiv.textContent = rawHtml;
-        tempDiv.querySelectorAll('pre').forEach(pre => pre.classList.add('not-prose'));
-        
-        container.textContent = `
-            ${tempDiv.innerHTML}
+        setSafeHTML(container, `
+            ${renderMarkdown(doc.content)}
             <div class="mt-16 pt-8 border-t border-slate-200 dark:border-white/10 flex flex-col sm:flex-row justify-between items-center gap-6 not-prose">
                 <div>
                     <p class="text-sm font-bold text-slate-900 dark:text-white mb-1">Help us improve these docs</p>
                     <p class="text-xs text-slate-500">Notice an issue or want to add a section? This page is community-maintained.</p>
                 </div>
-                <a href="https://github.com/openshield-org/openshield/edit/dev/website/content.js" target="_blank" class="flex items-center px-5 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-bold text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-white/10 hover:border-brand-500/50 transition-all group shadow-sm no-underline">
-                    <i data-lucide="edit-3" class="w-4 h-4 mr-2 text-brand-500 group-hover:scale-110 transition-transform"></i> 
+                <a href="https://github.com/openshield-org/openshield/edit/dev/website/content.js" target="_blank" rel="noopener" class="flex items-center px-5 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-bold text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-white/10 hover:border-brand-500/50 transition-all group shadow-sm no-underline">
+                    <i data-lucide="edit-3" class="w-4 h-4 mr-2 text-brand-500 group-hover:scale-110 transition-transform"></i>
                     Edit this page on GitHub
                 </a>
             </div>
-        `;
+        `);
         window.history.pushState(null, null, `#docs/${docId}`);
-        
+
         // Update active state in sidebar
         document.querySelectorAll('.doc-nav-btn').forEach(btn => {
             btn.classList.remove('bg-brand-500/10', 'text-brand-600', 'dark:text-white', 'shadow-sm');
             btn.querySelector('span')?.classList.remove('bg-brand-500');
         });
-        
+
         const activeBtn = document.getElementById(`nav-${docId}`);
         if (activeBtn) {
             activeBtn.classList.add('bg-brand-500/10', 'text-brand-600', 'dark:text-white', 'shadow-sm');
             activeBtn.querySelector('span')?.classList.add('bg-brand-500');
         }
-        
+
         window.scrollTo({ top: 0, behavior: 'smooth' });
         if (window.lucide) lucide.createIcons();
     }
@@ -775,24 +746,30 @@ function showDocPage(docId) {
 
 function renderBlog() {
     const container = document.getElementById('blog-container');
-    if (container) {
-        container.textContent = siteContent.blog.map(post => {
-            const imageHtml = post.image 
-                ? `<img src="${post.image}" class="w-full h-48 object-cover rounded-2xl mb-6 border border-slate-200 dark:border-white/10 shadow-sm">`
-                : '';
-            return `
-                <article class="bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/10 p-8 rounded-3xl hover:border-brand-500/50 transition-all cursor-pointer group" onclick="showBlogPost('${post.id}')">
-                    ${imageHtml}
-                    <h3 class="text-2xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-brand-500 transition-colors">${escapeHTML(post.title)}</h3>
-                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed mb-6 text-sm">${escapeHTML(post.excerpt)}</p>
-                    <button class="text-brand-600 font-bold text-xs uppercase tracking-widest flex items-center">
-                        Read Full Deep Dive 
-                        <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition"></i>
-                    </button>
-                </article>
-            `;
-        }).join('');
-    }
+    if (!container) return;
+
+    setSafeHTML(container, siteContent.blog.map(post => {
+        const imageHtml = post.image
+            ? `<img src="${escapeHTML(post.image)}" class="w-full h-48 object-cover rounded-2xl mb-6 border border-slate-200 dark:border-white/10 shadow-sm">`
+            : '';
+        return `
+            <article data-post-id="${escapeHTML(post.id)}" class="bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/10 p-8 rounded-3xl hover:border-brand-500/50 transition-all cursor-pointer group">
+                ${imageHtml}
+                <h3 class="text-2xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-brand-500 transition-colors">${escapeHTML(post.title)}</h3>
+                <p class="text-slate-600 dark:text-slate-400 leading-relaxed mb-6 text-sm">${escapeHTML(post.excerpt)}</p>
+                <button class="text-brand-600 font-bold text-xs uppercase tracking-widest flex items-center">
+                    Read Full Deep Dive
+                    <i data-lucide="arrow-right" class="w-4 h-4 ml-2 group-hover:translate-x-1 transition"></i>
+                </button>
+            </article>
+        `;
+    }).join(''));
+
+    container.querySelectorAll('[data-post-id]').forEach(article => {
+        article.addEventListener('click', () => showBlogPost(article.dataset.postId));
+    });
+
+    if (window.lucide) lucide.createIcons();
 }
 
 function renderEvents() {
@@ -800,15 +777,15 @@ function renderEvents() {
     if (!container || !siteContent.events) return;
 
     if (siteContent.events.length === 0) {
-        container.textContent = `
+        setSafeHTML(container, `
             <div class="text-center py-12 bg-slate-50 dark:bg-white/5 border border-dashed border-slate-300 dark:border-white/10 rounded-3xl">
                 <p class="text-slate-500">No upcoming events. Stay tuned!</p>
             </div>
-        `;
+        `);
         return;
     }
 
-    container.textContent = siteContent.events.map(event => `
+    setSafeHTML(container, siteContent.events.map(event => `
         <div class="flex flex-col md:flex-row justify-between items-center p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl hover:border-brand-500/50 transition-all gap-6">
             <div>
                 <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">${escapeHTML(event.title)}</h3>
@@ -818,12 +795,12 @@ function renderEvents() {
                 <span class="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 text-[10px] font-bold uppercase tracking-widest">
                     ${escapeHTML(event.status)}
                 </span>
-                <a href="${escapeHTML(event.link)}" target="_blank" class="bg-slate-900 dark:bg-white text-white dark:text-slate-900 px-6 py-2 rounded-xl font-bold text-sm hover:scale-105 transition-all">
+                <a href="${escapeHTML(event.link)}" target="_blank" rel="noopener" class="bg-slate-900 dark:bg-white text-white dark:text-slate-900 px-6 py-2 rounded-xl font-bold text-sm hover:scale-105 transition-all">
                     Register
                 </a>
             </div>
         </div>
-    `).join('');
+    `).join(''));
 }
 
 function renderRoadmap() {
@@ -847,7 +824,7 @@ function renderRoadmap() {
 
         const config = statusConfig[status];
 
-        container.textContent = groups[status].map(item => `
+        setSafeHTML(container, groups[status].map(item => `
             <div class="p-4 bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-white/5 rounded-2xl group transition-all hover:border-${config.color}-500/30">
                 <div class="flex justify-between items-start mb-2">
                     <span class="text-[10px] font-bold tracking-widest text-slate-400 uppercase">${escapeHTML(item.category)}</span>
@@ -855,7 +832,7 @@ function renderRoadmap() {
                 </div>
                 <h4 class="text-sm font-bold text-slate-900 dark:text-white group-hover:text-${config.color}-500 transition-colors leading-tight">${escapeHTML(item.title)}</h4>
             </div>
-        `).join('');
+        `).join(''));
     });
 }
 
@@ -865,7 +842,7 @@ function renderReleases() {
 
     const typeColors = { major: 'blue', minor: 'emerald', patch: 'slate' };
 
-    container.textContent = siteContent.releases.map((release, idx) => {
+    setSafeHTML(container, siteContent.releases.map((release, idx) => {
         const color = typeColors[release.type] || 'slate';
         const isLatest = idx === 0;
         return `
@@ -878,7 +855,7 @@ function renderReleases() {
                     </div>
                     <div class="flex items-center gap-4">
                         <span class="text-sm text-slate-500">${escapeHTML(release.date)}</span>
-                        <a href="${escapeHTML(release.github)}" target="_blank" class="flex items-center gap-2 px-4 py-2 text-xs font-bold border border-slate-200 dark:border-white/10 rounded-xl hover:border-brand-500/50 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-all">
+                        <a href="${escapeHTML(release.github)}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 text-xs font-bold border border-slate-200 dark:border-white/10 rounded-xl hover:border-brand-500/50 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-all">
                             <i data-lucide="github" class="w-3.5 h-3.5"></i> View on GitHub
                         </a>
                     </div>
@@ -894,7 +871,7 @@ function renderReleases() {
                 </ul>
             </div>
         `;
-    }).join('');
+    }).join(''));
 
     if (window.lucide) lucide.createIcons();
 }
@@ -903,10 +880,10 @@ function renderFAQ() {
     const container = document.getElementById('faq-container');
     if (!container || !siteContent.faq) return;
 
-    container.textContent = siteContent.faq.map((item, idx) => `
+    setSafeHTML(container, siteContent.faq.map((item, idx) => `
         <div class="bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/10 rounded-2xl overflow-hidden transition-all">
             <button
-                onclick="toggleFAQ(${idx})"
+                data-faq-idx="${idx}"
                 class="w-full flex items-center justify-between px-8 py-6 text-left group"
             >
                 <span class="text-base font-bold text-slate-900 dark:text-white group-hover:text-brand-500 transition-colors pr-8">${escapeHTML(item.question)}</span>
@@ -916,7 +893,11 @@ function renderFAQ() {
                 <p class="text-slate-600 dark:text-slate-400 leading-relaxed text-sm">${escapeHTML(item.answer)}</p>
             </div>
         </div>
-    `).join('');
+    `).join(''));
+
+    container.querySelectorAll('[data-faq-idx]').forEach(btn => {
+        btn.addEventListener('click', () => toggleFAQ(Number(btn.dataset.faqIdx)));
+    });
 
     if (window.lucide) lucide.createIcons();
 }
@@ -934,15 +915,17 @@ function renderShowcase() {
     const container = document.getElementById('showcase-container');
     if (!container || !siteContent.showcase) return;
 
-    container.textContent = siteContent.showcase.map(item => `
+    setSafeHTML(container, siteContent.showcase.map(item => `
         <div class="bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/10 p-8 rounded-3xl hover:border-brand-500/50 transition-all text-center">
             <div class="w-16 h-16 mx-auto bg-slate-50 dark:bg-white/5 text-slate-900 dark:text-white rounded-2xl flex items-center justify-center mb-6">
-                <i data-lucide="${item.icon}" class="w-8 h-8"></i>
+                <i data-lucide="${escapeHTML(item.icon)}" class="w-8 h-8"></i>
             </div>
             <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">${escapeHTML(item.name)}</h3>
             <p class="text-slate-500 text-sm">${escapeHTML(item.description)}</p>
         </div>
-    `).join('');
+    `).join(''));
+
+    if (window.lucide) lucide.createIcons();
 }
 
 async function renderContributors() {
@@ -950,14 +933,14 @@ async function renderContributors() {
     if (!container || !siteContent.contributors) return;
 
     // Strictly show only the primary release team
-    container.textContent = siteContent.contributors.map(c => `
-        <a href="https://github.com/${c.handle}" target="_blank" title="${c.name} (${c.role})" class="group relative">
-            <img src="https://github.com/${c.handle}.png" alt="${c.name}" class="w-14 h-14 rounded-full border-2 border-slate-900 dark:border-white/10 transition-transform group-hover:scale-110 group-hover:border-slate-400 group-hover:z-10 relative">
+    setSafeHTML(container, siteContent.contributors.map(c => `
+        <a href="https://github.com/${escapeHTML(c.handle)}" target="_blank" rel="noopener" title="${escapeHTML(c.name)} (${escapeHTML(c.role)})" class="group relative">
+            <img src="${escapeHTML(`https://github.com/${c.handle}.png`)}" alt="${escapeHTML(c.name)}" class="w-14 h-14 rounded-full border-2 border-slate-900 dark:border-white/10 transition-transform group-hover:scale-110 group-hover:border-slate-400 group-hover:z-10 relative">
             <div class="absolute -bottom-10 left-1/2 -translate-x-1/2 bg-slate-900 text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-20">
-                ${c.name}
+                ${escapeHTML(c.name)}
             </div>
         </a>
-    `).join('');
+    `).join(''));
 }
 
 // Initialization
@@ -983,6 +966,18 @@ window.addEventListener('load', () => {
 // 8. Interactive Playground                                            //
 // ------------------------------------------------------------------ //
 
+function setButtonContent(btn, iconName, label, extraIconClass) {
+    if (!btn) return;
+    btn.textContent = '';
+    if (iconName) {
+        const icon = document.createElement('i');
+        icon.setAttribute('data-lucide', iconName);
+        icon.className = `w-4 h-4 mr-2 ${extraIconClass || ''}`.trim();
+        btn.appendChild(icon);
+    }
+    btn.appendChild(document.createTextNode(label));
+}
+
 async function runMockScan() {
     const btn = document.getElementById('btn-run-mock');
     const terminal = document.getElementById('mock-terminal-output');
@@ -997,22 +992,25 @@ async function runMockScan() {
 
     if (!btn || !terminal || !feed) return;
 
+    const env = document.getElementById('pg-env').value;
+    const framework = document.getElementById('pg-framework').value;
+
     // Reset UI
     btn.disabled = true;
-    btn.textContent = '<i data-lucide="loader" class="w-4 h-4 mr-2 animate-spin"></i> Running...';
-    terminal.textContent = '<div class="text-brand-400 font-bold">$ openshield scan --env ' + document.getElementById('pg-env').value + ' --pkg ' + document.getElementById('pg-framework').value + '</div>';
+    setButtonContent(btn, 'loader', 'Running...', 'animate-spin');
+    setSafeHTML(terminal, `<div class="text-brand-400 font-bold">$ openshield scan --env ${escapeHTML(env)} --pkg ${escapeHTML(framework)}</div>`);
     feed.textContent = '';
     scoreEl.textContent = '100';
     scoreEl.className = 'text-6xl font-black text-emerald-500 transition-colors duration-500';
     Object.values(counters).forEach(c => c.textContent = '0');
     statusEl.textContent = 'Status: Initializing...';
     statusEl.className = 'text-[10px] font-bold text-brand-500 uppercase tracking-tighter';
-    
+
     if (window.lucide) lucide.createIcons();
 
     const events = [
         { type: 'log', val: '[INFO] Initializing OpenShield Core v0.1.0...', delay: 400 },
-        { type: 'log', val: '[INFO] Loading security modules for ' + document.getElementById('pg-framework').value.toUpperCase() + '...', delay: 600 },
+        { type: 'log', val: '[INFO] Loading security modules for ' + framework.toUpperCase() + '...', delay: 600 },
         { type: 'log', val: '[INFO] Authenticating with Azure Resource Manager...', delay: 800 },
         { type: 'status', val: 'Status: Discovery Phase', color: 'text-blue-500' },
         { type: 'log', val: '[INFO] Discovering resources in subscription \'mock-sub-123\'...', delay: 500 },
@@ -1050,7 +1048,7 @@ async function runMockScan() {
                 stats.pass++;
                 counters.pass.textContent = stats.pass;
             }
-        } 
+        }
         else if (event.type === 'status') {
             statusEl.textContent = event.val;
             statusEl.className = 'text-[10px] font-bold uppercase tracking-tighter ' + event.color;
@@ -1060,7 +1058,7 @@ async function runMockScan() {
             const startScore = currentScore;
             currentScore -= event.scoreDrop;
             animateValue(scoreEl, startScore, currentScore, 500);
-            
+
             // Color logic for score
             if (currentScore < 60) scoreEl.className = 'text-6xl font-black text-red-500 animate-score-pop';
             else if (currentScore < 85) scoreEl.className = 'text-6xl font-black text-amber-500 animate-score-pop';
@@ -1070,24 +1068,27 @@ async function runMockScan() {
             stats[key]++;
             counters[key].textContent = stats[key];
 
-            // Add Card
+            // Add Card — event fields are all from the fixed, hardcoded
+            // `events` array above (never from siteContent or user input),
+            // but escapeHTML() is used anyway so this stays correct if that
+            // ever changes.
             const card = document.createElement('div');
             card.className = 'bg-white dark:bg-white/[0.03] border border-slate-200 dark:border-white/10 p-4 rounded-2xl animate-slide-in-right shadow-sm';
             const color = event.sev === 'CRITICAL' ? 'red' : 'amber';
-            card.textContent = `
+            setSafeHTML(card, `
                 <div class="flex justify-between items-start mb-2">
-                    <span class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">${event.id}</span>
-                    <span class="px-1.5 py-0.5 rounded text-[7px] font-bold bg-${color}-500/10 text-${color}-500 border border-${color}-500/20">${event.sev}</span>
+                    <span class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">${escapeHTML(event.id)}</span>
+                    <span class="px-1.5 py-0.5 rounded text-[7px] font-bold bg-${color}-500/10 text-${color}-500 border border-${color}-500/20">${escapeHTML(event.sev)}</span>
                 </div>
-                <h5 class="text-xs font-bold text-slate-900 dark:text-white mb-1">${event.name}</h5>
-                <p class="text-[10px] text-slate-500 dark:text-slate-400 leading-tight">${event.desc}</p>
-            `;
+                <h5 class="text-xs font-bold text-slate-900 dark:text-white mb-1">${escapeHTML(event.name)}</h5>
+                <p class="text-[10px] text-slate-500 dark:text-slate-400 leading-tight">${escapeHTML(event.desc)}</p>
+            `);
             feed.prepend(card);
         }
     }
 
     btn.disabled = false;
-    btn.textContent = '<i data-lucide="rotate-cw" class="w-4 h-4 mr-2"></i> Re-run Scan';
+    setButtonContent(btn, 'rotate-cw', 'Re-run Scan');
     if (window.lucide) lucide.createIcons();
 }
 
@@ -1106,3 +1107,32 @@ function animateValue(obj, start, end, duration) {
 
 window.addEventListener('popstate', handleRouting);
 document.getElementById('mobile-menu-btn')?.addEventListener('click', toggleMobileMenu);
+
+// ------------------------------------------------------------------ //
+// Static navigation/control wiring                                     //
+// ------------------------------------------------------------------ //
+// This file's own static markup used inline onclick/onchange/oninput
+// attributes for these controls until issue #297: CSP's script-src no
+// longer permits 'unsafe-inline', so every one of them is wired here
+// instead, off data-* attributes/ids present in the fixed HTML this file
+// ships (never generated from remote/user data - see setSafeHTML()).
+
+document.querySelectorAll('[data-nav-section]').forEach((el) => {
+    el.addEventListener('click', () => {
+        showSection(el.dataset.navSection);
+        if ('closeMobileMenu' in el.dataset) toggleMobileMenu();
+    });
+});
+
+document.querySelector('[data-add-contributor]')?.addEventListener('click', () => {
+    showSection('blog-editor');
+    const editType = document.getElementById('edit-type');
+    if (editType) editType.value = 'contributor';
+    toggleEditorFields();
+});
+
+document.querySelector('[data-remove-image]')?.addEventListener('click', removeSelectedImage);
+document.getElementById('btn-run-mock')?.addEventListener('click', runMockScan);
+document.getElementById('rule-filter')?.addEventListener('change', renderRules);
+document.getElementById('rule-search')?.addEventListener('input', renderRules);
+document.getElementById('edit-type')?.addEventListener('change', toggleEditorFields);
diff --git a/website/tailwind-config.js b/website/tailwind-config.js
new file mode 100644
index 00000000..738ad010
--- /dev/null
+++ b/website/tailwind-config.js
@@ -0,0 +1,34 @@
+// Tailwind CDN runtime configuration. Must load immediately after the
+// Tailwind CDN <script> tag and before any content it needs to process -
+// scripts without defer/async execute in document order, so this external
+// same-origin file (required by CSP's script-src no longer allowing
+// 'unsafe-inline', see #297) stays in the exact position the inline version
+// used to occupy in index.html's <head>.
+tailwind.config = {
+    darkMode: 'class',
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter', 'system-ui', 'sans-serif'],
+                mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
+            },
+            colors: {
+                brand: {
+                    50: '#eff6ff',
+                    100: '#dbeafe',
+                    200: '#bfdbfe',
+                    300: '#93c5fd',
+                    400: '#60a5fa',
+                    500: '#3b82f6',
+                    600: '#2563eb',
+                    700: '#1d4ed8',
+                },
+                dark: {
+                    800: '#1e293b',
+                    900: '#0f172a',
+                    950: '#020617',
+                },
+            },
+        },
+    },
+};
diff --git a/website/test_toEmbedUrl.mjs b/website/test_toEmbedUrl.mjs
index 39332a15..e2da8e68 100644
--- a/website/test_toEmbedUrl.mjs
+++ b/website/test_toEmbedUrl.mjs
@@ -36,6 +36,7 @@ const sandbox = {
   document: {
     createElement: () => stubElement(),
     getElementById: () => null,
+    querySelector: () => null,
     querySelectorAll: () => [],
     documentElement: { classList: { contains: () => false } },
     addEventListener() {},
diff --git a/website/tests/accessibility.spec.js b/website/tests/accessibility.spec.js
new file mode 100644
index 00000000..31728ad7
--- /dev/null
+++ b/website/tests/accessibility.spec.js
@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { gotoAndInit, goToSection } from './helpers.js';
+
+// axe-core scans against the sections a visitor actually reaches by
+// navigating the page, run after the same dynamic rendering this PR fixes
+// (a scan against the pre-fix escaped-markup state would find far fewer
+// real issues, since most content wasn't reachable as actual DOM at all).
+
+const SECTIONS = ['home', 'rules', 'docs', 'blog', 'faq', 'community'];
+
+for (const section of SECTIONS) {
+    test(`${section} section has no critical/serious axe violations`, async ({ page }) => {
+        await gotoAndInit(page);
+        await goToSection(page, section);
+        await page.waitForTimeout(200);
+
+        const results = await new AxeBuilder({ page })
+            .include(`#${section}`)
+            .withTags(['wcag2a', 'wcag2aa'])
+            .analyze();
+
+        const blocking = results.violations.filter((v) => v.impact === 'critical' || v.impact === 'serious');
+        expect(blocking, JSON.stringify(blocking, null, 2)).toEqual([]);
+    });
+}
+
+test('keyboard navigation reaches and activates the FAQ toggle', async ({ page }) => {
+    await gotoAndInit(page);
+    await goToSection(page, 'faq');
+    const firstButton = page.locator('#faq-container [data-faq-idx]').first();
+    await firstButton.focus();
+    await expect(firstButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    // Checks the class token toggleFAQ() controls directly - see the
+    // mobile-menu test in navigation.spec.js for why toBeVisible() isn't used.
+    const isHidden = await page.locator('#faq-answer-0').evaluate((el) => el.classList.contains('hidden'));
+    expect(isHidden).toBe(false);
+});
diff --git a/website/tests/csp_server.py b/website/tests/csp_server.py
new file mode 100644
index 00000000..5f2e0c82
--- /dev/null
+++ b/website/tests/csp_server.py
@@ -0,0 +1,57 @@
+#!/usr/bin/env python3
+"""A static file server for the Playwright suite that actually applies
+vercel.json's header rules - including the real Content-Security-Policy -
+instead of `python3 -m http.server`'s no-headers-at-all behavior.
+
+Without this, the entire browser suite could pass while the deployed CSP
+header was absent or broken: nothing in the suite would ever see it. See
+the "CSP is exercised" tests in security.spec.js, and issue #297.
+
+Usage: python3 tests/csp_server.py [port]   (run from website/)
+"""
+
+import http.server
+import json
+import re
+import sys
+from pathlib import Path
+
+_WEBSITE_ROOT = Path(__file__).resolve().parent.parent
+
+
+def _load_header_rules():
+    with open(_WEBSITE_ROOT / "vercel.json") as f:
+        config = json.load(f)
+    # Compile each rule's Vercel "source" glob once. These two source
+    # patterns are already valid Python regexes (parenthesised wildcards),
+    # which is all this test harness needs to support - it is not a
+    # general-purpose Vercel routing engine.
+    return [(re.compile(f"^{rule['source']}$"), rule["headers"]) for rule in config["headers"]]
+
+
+_HEADER_RULES = _load_header_rules()
+
+
+class CSPAwareHandler(http.server.SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=str(_WEBSITE_ROOT), **kwargs)
+
+    def end_headers(self):
+        # Vercel applies every matching rule's headers, not just the first
+        # match - a request to /assets/foo.js gets both the assets-only
+        # Cache-Control rule and the site-wide security headers rule.
+        path = self.path.split("?", 1)[0]
+        for pattern, headers in _HEADER_RULES:
+            if pattern.match(path):
+                for header in headers:
+                    self.send_header(header["key"], header["value"])
+        super().end_headers()
+
+    def log_message(self, format, *args):  # noqa: A002 - matches base class signature
+        pass  # Keep Playwright's webServer output quiet, matching http.server's prior silence.
+
+
+if __name__ == "__main__":
+    port = int(sys.argv[1]) if len(sys.argv) > 1 else 4173
+    server = http.server.ThreadingHTTPServer(("127.0.0.1", port), CSPAwareHandler)
+    server.serve_forever()
diff --git a/website/tests/editor-removal.spec.js b/website/tests/editor-removal.spec.js
new file mode 100644
index 00000000..04f28508
--- /dev/null
+++ b/website/tests/editor-removal.spec.js
@@ -0,0 +1,78 @@
+import { test, expect } from '@playwright/test';
+import { gotoAndInit, goToSection } from './helpers.js';
+
+// Regression coverage for issue #297: the browser-based classic GitHub PAT
+// flow must be completely gone, not just hidden - a page that can request a
+// repo-scoped credential is a real risk on its own even before considering
+// what it's vulnerable to.
+
+test.describe('The browser-based GitHub token flow is removed', () => {
+    test('no token input exists anywhere in the DOM', async ({ page }) => {
+        await gotoAndInit(page);
+        await expect(page.locator('#github-token')).toHaveCount(0);
+        await expect(page.locator('input[type="password"]')).toHaveCount(0);
+    });
+
+    test('submitToGithub is not defined', async ({ page }) => {
+        await gotoAndInit(page);
+        const type = await page.evaluate(() => typeof window.submitToGithub);
+        expect(type).toBe('undefined');
+    });
+
+    test('the client never calls the GitHub API', async ({ page }) => {
+        const apiCalls = [];
+        page.on('request', (req) => {
+            // Parse the actual host rather than a substring match on the
+            // full URL - a plain .includes('api.github.com') would also
+            // match a spoofed host like "api.github.com.evil.com" and
+            // silently stop catching the one thing this test exists to
+            // catch (flagged by CodeQL - fixing it for real, not just to
+            // clear the check).
+            let host;
+            try {
+                host = new URL(req.url()).hostname;
+            } catch {
+                return;
+            }
+            if (host === 'api.github.com') apiCalls.push(req.url());
+        });
+        await gotoAndInit(page);
+        await goToSection(page, 'blog-editor');
+        await page.selectOption('#edit-type', 'blog');
+        await page.fill('#edit-id', 'test-post');
+        await page.fill('#edit-title', 'Test Post');
+        await page.fill('#edit-content', 'Some content.');
+        await page.locator('#export-entry-btn').click();
+        expect(apiCalls).toEqual([]);
+    });
+
+    test('exporting an entry shows the formatted snippet and PR instructions instead', async ({ page }) => {
+        await gotoAndInit(page);
+        await goToSection(page, 'blog-editor');
+        await page.selectOption('#edit-type', 'blog');
+        await page.fill('#edit-id', 'my-post');
+        await page.fill('#edit-title', 'My Post');
+        await page.fill('#edit-content', 'Hello world.');
+        await page.locator('#export-entry-btn').click();
+
+        // Checks the class token exportEntry() controls directly - see the
+        // mobile-menu test in navigation.spec.js for why toBeVisible() isn't used.
+        const output = page.locator('#export-entry-output');
+        expect(await output.evaluate((el) => el.classList.contains('hidden'))).toBe(false);
+        await expect(output).toHaveValue(/"title": "My Post"/);
+        await expect(page.locator('#export-entry-note')).toContainText('website/content.js');
+        await expect(page.getByRole('link', { name: /Open a Pull Request/i })).toHaveAttribute(
+            'href',
+            'https://github.com/openshield-org/openshield/edit/dev/website/content.js'
+        );
+    });
+
+    test('exporting with required fields missing shows an error, not a silent export', async ({ page }) => {
+        await gotoAndInit(page);
+        await goToSection(page, 'blog-editor');
+        await page.selectOption('#edit-type', 'blog');
+        await page.locator('#export-entry-btn').click();
+        expect(await page.locator('#export-entry-output').evaluate((el) => el.classList.contains('hidden'))).toBe(true);
+        await expect(page.locator('#export-entry-note')).toContainText('required');
+    });
+});
diff --git a/website/tests/helpers.js b/website/tests/helpers.js
new file mode 100644
index 00000000..569251f7
--- /dev/null
+++ b/website/tests/helpers.js
@@ -0,0 +1,77 @@
+// Shared Playwright helpers for the website test suite.
+
+// These two messages are pre-existing, unrelated to issue #297, and verified
+// (against the byte-identical file already on `dev`) to predate this fix:
+//   - cdn.tailwindcss.com's SRI+CORS combination fails in some headless/CI
+//     browser environments even though the CDN itself is unmodified.
+//   - lucide@1.24.0 has no "github" icon under that name; renderReleases()
+//     already used it before this PR touched the file.
+// Filtering them here keeps assertions meaningful for *this* fix without
+// either silently ignoring genuinely new errors or failing CI on issues this
+// PR did not introduce and is not fixing.
+const KNOWN_PREEXISTING_MESSAGES = [
+    /cdn\.tailwindcss\.com/,
+    /tailwind is not defined/,
+    /icon name was not found in the provided icons object/,
+    // The generic browser-level companion to the cdn.tailwindcss.com CORS
+    // failure above (Chrome logs both). This page has exactly one external
+    // resource that fails to load - if that changes, this pattern would
+    // start masking a genuinely new failure, so keep it narrowly paired with
+    // the CORS message rather than trusting it alone.
+    /Failed to load resource: net::ERR_FAILED/,
+];
+
+function isKnownPreexisting(text) {
+    return KNOWN_PREEXISTING_MESSAGES.some((pattern) => pattern.test(text));
+}
+
+// Attaches console/page-error listeners before navigation so nothing is
+// missed, and returns an accessor for the errors collected so far.
+export function trackConsoleErrors(page) {
+    const errors = [];
+    page.on('console', (msg) => {
+        if (msg.type() === 'error' && !isKnownPreexisting(msg.text())) {
+            errors.push(msg.text());
+        }
+    });
+    page.on('pageerror', (err) => {
+        if (!isKnownPreexisting(String(err))) {
+            errors.push(String(err));
+        }
+    });
+    return errors;
+}
+
+// Navigates to the site and waits for the synchronous render*() calls in
+// window.addEventListener('load', ...) to have run.
+export async function gotoAndInit(page) {
+    await page.goto('/index.html');
+    await page.waitForFunction(() => document.getElementById('ecosystem-container')?.children.length > 0);
+}
+
+// Several static nav buttons share the same visible label and overlapping
+// onclick text (e.g. "Add Contributor" also calls showSection('blog-editor')
+// as a first step), which makes them ambiguous or genuinely not-yet-visible
+// targets for a real click in a test that only needs to *arrive* at a
+// section, as opposed to a test that is specifically exercising a button's
+// own click behavior. Those tests call page.locator(...).click() directly
+// instead of this helper.
+export async function goToSection(page, sectionId) {
+    await page.evaluate((id) => showSection(id), sectionId);
+    // Wait for DOM state (the active class plus the element's own inline
+    // display), not Playwright's rendered-visibility check. showSection()
+    // races a 300ms setTimeout (which inlines display:none on any section
+    // still lacking .active once it fires) against a requestAnimationFrame
+    // (which adds .active to the section being activated) - under CPU
+    // contention the rAF callback can land more than 300ms late, so the
+    // timeout's hide check can momentarily apply display:none to the very
+    // section this call is trying to activate. A rendered-visibility wait
+    // can get stuck observing that transient state; checking this element's
+    // own class/style directly does not depend on it resolving before the
+    // next paint. Same pattern already used for the mobile-menu and FAQ
+    // tests in this suite.
+    await page.waitForFunction((id) => {
+        const el = document.getElementById(id);
+        return Boolean(el) && el.classList.contains('active') && el.style.display !== 'none';
+    }, sectionId);
+}
diff --git a/website/tests/navigation.spec.js b/website/tests/navigation.spec.js
new file mode 100644
index 00000000..291d4e0d
--- /dev/null
+++ b/website/tests/navigation.spec.js
@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+import { gotoAndInit } from './helpers.js';
+
+test.describe('Navigation and routing', () => {
+    test('clicking a nav link shows the target section and updates the hash', async ({ page }) => {
+        await gotoAndInit(page);
+        await page.locator('button[data-nav-section="blog"]').first().click();
+        await expect(page).toHaveURL(/#blog$/);
+        await expect(page.locator('#blog.section.active')).toBeVisible();
+    });
+
+    test('a direct #docs/<id> URL opens that doc page', async ({ page }) => {
+        await gotoAndInit(page);
+        const docId = await page.evaluate(() => siteContent.docs[1].id);
+        await page.goto(`/index.html#docs/${docId}`);
+        await page.waitForFunction(() => document.getElementById('docs-nav')?.children.length > 0);
+        await expect(page.locator('#docs-content-container')).not.toBeEmpty();
+    });
+
+    test('a direct #blog/<id> URL opens that post', async ({ page }) => {
+        await gotoAndInit(page);
+        const postId = await page.evaluate(() => siteContent.blog[0].id);
+        await page.goto(`/index.html#blog/${postId}`);
+        await page.waitForFunction(() => document.getElementById('post-content')?.querySelector('h1'));
+        await expect(page.locator('#post-content h1')).toBeVisible();
+    });
+
+    test('the mobile menu toggles', async ({ page }) => {
+        // Checks the actual class token toggleMobileMenu() controls, not
+        // Tailwind's rendered visibility for it - the Tailwind Play CDN
+        // fails to load under Playwright's fetch/SRI handling (a pre-existing,
+        // unrelated issue: see helpers.js), so .hidden's CSS never actually
+        // applies here even though the class itself is correctly toggled.
+        await gotoAndInit(page);
+        const isHidden = () => page.locator('#mobile-menu').evaluate((el) => el.classList.contains('hidden'));
+        expect(await isHidden()).toBe(true);
+        await page.locator('#mobile-menu-btn').click();
+        expect(await isHidden()).toBe(false);
+    });
+});
diff --git a/website/tests/rendering.spec.js b/website/tests/rendering.spec.js
new file mode 100644
index 00000000..21788fd5
--- /dev/null
+++ b/website/tests/rendering.spec.js
@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+import { gotoAndInit, goToSection, trackConsoleErrors } from './helpers.js';
+
+// Regression coverage for the specific breakage introduced by an earlier,
+// incomplete fix attempt (blanket innerHTML -> textContent) that this PR
+// replaces with real sanitized rendering. Every one of these sections used
+// to display raw, literal <div class="..."> markup instead of parsed HTML.
+
+test.describe('Dynamic content renders as real DOM, not literal markup', () => {
+    test('home sections render without console errors', async ({ page }) => {
+        const errors = trackConsoleErrors(page);
+        await gotoAndInit(page);
+        expect(errors, `unexpected console errors: ${errors.join('; ')}`).toEqual([]);
+    });
+
+    test('ecosystem cards render as elements', async ({ page }) => {
+        await gotoAndInit(page);
+        const container = page.locator('#ecosystem-container');
+        await expect(container.locator('h3').first()).toBeVisible();
+        await expect(container).not.toContainText('<div class=');
+    });
+
+    test('the reactive terminal builds a real .command-text element and types into it', async ({ page }) => {
+        await gotoAndInit(page);
+        const commandText = page.locator('#terminal-content .command-text');
+        await expect(commandText).toBeAttached();
+        await expect(commandText).not.toHaveText('', { timeout: 3000 });
+        await expect(page.locator('#terminal-content')).not.toContainText('<span class=');
+    });
+
+    test('rules render as cards with visible text, not escaped markup', async ({ page }) => {
+        await gotoAndInit(page);
+        await goToSection(page, 'rules');
+        const container = page.locator('#rules-container');
+        await expect(container.locator('h3').first()).toBeVisible();
+        await expect(container).not.toContainText('<div class=');
+    });
+
+    test('a blog post renders its markdown content as real HTML', async ({ page }) => {
+        await gotoAndInit(page);
+        await page.evaluate(() => showBlogPost(siteContent.blog[0].id));
+        const postContent = page.locator('#post-content');
+        await expect(postContent.locator('h1')).toBeVisible();
+        await expect(postContent.locator('.prose')).toBeVisible();
+        await expect(postContent).not.toContainText('<header class=');
+    });
+
+    test('docs page renders markdown content and the sidebar nav works', async ({ page }) => {
+        await gotoAndInit(page);
+        await goToSection(page, 'docs');
+        const container = page.locator('#docs-content-container');
+        await expect(container).not.toContainText('<div class=');
+        const secondNavBtn = page.locator('#docs-nav [data-doc-id]').nth(1);
+        await secondNavBtn.click();
+        await expect(container).not.toContainText('<div class=');
+    });
+
+    test('FAQ entries toggle open and closed via a real click handler, not inline onclick', async ({ page }) => {
+        // Checks the class token toggleFAQ() controls directly, not rendered
+        // visibility - see the mobile-menu test in navigation.spec.js for why.
+        await gotoAndInit(page);
+        await goToSection(page, 'faq');
+        const firstButton = page.locator('#faq-container [data-faq-idx]').first();
+        await expect(firstButton).not.toHaveAttribute('onclick');
+        const answer = page.locator('#faq-answer-0');
+        const isHidden = () => answer.evaluate((el) => el.classList.contains('hidden'));
+        expect(await isHidden()).toBe(true);
+        await firstButton.click();
+        expect(await isHidden()).toBe(false);
+    });
+
+    test('the playground mock scan renders finding cards as real elements', async ({ page }) => {
+        await gotoAndInit(page);
+        await goToSection(page, 'playground');
+        await page.locator('#btn-run-mock').click();
+        const firstCard = page.locator('#pg-findings-feed > div').first();
+        await expect(firstCard).toBeVisible({ timeout: 5000 });
+        await expect(firstCard.locator('h5')).toBeVisible();
+    });
+});
diff --git a/website/tests/security.spec.js b/website/tests/security.spec.js
new file mode 100644
index 00000000..78457c8a
--- /dev/null
+++ b/website/tests/security.spec.js
@@ -0,0 +1,81 @@
+import { test, expect } from '@playwright/test';
+import { gotoAndInit } from './helpers.js';
+
+// Issue #297 required CSP-violation coverage, not just a CSP header sitting
+// unused in vercel.json. tests/csp_server.py (wired into playwright.config.js)
+// is what makes this possible: it actually applies vercel.json's headers,
+// unlike the plain `python3 -m http.server` this suite used to run against -
+// every other spec in this suite runs through the real header now too, this
+// file is just the one that asserts on it directly.
+
+test.describe('Content-Security-Policy', () => {
+    test('the real production header is present on the served page', async ({ request }) => {
+        const response = await request.get('/index.html');
+        const csp = response.headers()['content-security-policy'];
+
+        expect(csp, 'no CSP header at all - the test server is not applying vercel.json').toBeTruthy();
+        // Assert on the specific directives this PR's fix depends on, not
+        // just "a CSP header exists" - a header with the wrong content
+        // would pass a bare-existence check just as easily.
+        expect(csp).toContain("default-src 'self'");
+        expect(csp).toContain("object-src 'none'");
+        expect(csp).toContain("frame-ancestors 'self'");
+        // script-src must not carry 'unsafe-inline' (this PR's fix) - assert
+        // against the exact script-src directive, not the whole header
+        // string, since style-src legitimately keeps 'unsafe-inline'.
+        const scriptSrc = csp.split(';').find((directive) => directive.trim().startsWith('script-src'));
+        expect(scriptSrc, 'no script-src directive in the CSP header').toBeTruthy();
+        expect(scriptSrc).not.toContain('unsafe-inline');
+    });
+
+    test('an inline script injected outside the sanitized-content path is blocked, not silently allowed', async ({
+        page,
+    }) => {
+        // This does not go through setSafeHTML()/DOMPurify - it simulates
+        // the failure mode CSP exists to catch as a fallback if sanitization
+        // were ever bypassed, distinct from xss-regression.spec.js's corpus
+        // (which proves DOMPurify itself neutralizes real injection paths).
+        const violations = [];
+        await page.exposeFunction('__recordCspViolation', (violatedDirective) => violations.push(violatedDirective));
+        await page.addInitScript(() => {
+            window.__inlineScriptRan = false;
+            document.addEventListener('securitypolicyviolation', (e) => {
+                window.__recordCspViolation(e.violatedDirective);
+            });
+        });
+
+        await gotoAndInit(page);
+        await page.evaluate(() => {
+            const script = document.createElement('script');
+            script.textContent = 'window.__inlineScriptRan = true;';
+            document.body.appendChild(script);
+        });
+        // securitypolicyviolation dispatch is async relative to the blocked
+        // action - give it a turn before asserting.
+        await page.waitForTimeout(50);
+
+        const ran = await page.evaluate(() => window.__inlineScriptRan);
+        expect(ran, 'CSP did not block the inline script - script-src still permits inline execution').toBe(false);
+        expect(violations.some((d) => d.startsWith('script-src'))).toBe(true);
+    });
+
+    test('the page\'s own same-origin scripts still run normally under the real header', async ({ page }) => {
+        // The positive case: removing 'unsafe-inline' must not be so
+        // restrictive it breaks the site's actual functionality, which now
+        // depends entirely on same-origin external scripts (theme-init.js,
+        // tailwind-config.js, script.js) plus the explicitly allow-listed
+        // third-party CDN script-src origins.
+        await gotoAndInit(page);
+        // theme-init.js (an external same-origin script) ran and set
+        // tailwind.config via tailwind-config.js (another one) before
+        // script.js's own load handler ran - proven together by
+        // showSection() existing and actually working end to end. If CSP
+        // had blocked any of these external scripts, the page would be
+        // non-interactive and this would time out instead of passing.
+        const themeInitRan = await page.evaluate(() => typeof showSection === 'function');
+        expect(themeInitRan, 'script.js did not load/execute under the real CSP header').toBe(true);
+
+        await page.evaluate(() => showSection('rules'));
+        await expect(page.locator('#rules.section.active')).toBeVisible();
+    });
+});
diff --git a/website/tests/xss-regression.spec.js b/website/tests/xss-regression.spec.js
new file mode 100644
index 00000000..1cf18943
--- /dev/null
+++ b/website/tests/xss-regression.spec.js
@@ -0,0 +1,108 @@
+import { test, expect } from '@playwright/test';
+import { gotoAndInit, goToSection } from './helpers.js';
+
+// XSS regression corpus for issue #297. Each payload targets a different
+// injection technique DOMPurify is responsible for neutralizing once
+// markdown/editor content reaches innerHTML through renderMarkdown() /
+// setSafeHTML(). A page-level "did script execute" flag (rather than just
+// inspecting the resulting HTML string) proves the payload is inert, not
+// just re-encoded.
+
+const PAYLOADS = [
+    { name: 'script tag', markdown: '<script>window.__xssHit = "script"</script>' },
+    { name: 'img onerror', markdown: '<img src="x" onerror="window.__xssHit = \'onerror\'">' },
+    { name: 'svg onload', markdown: '<svg onload="window.__xssHit = \'onload\'"></svg>' },
+    {
+        // hit staying undefined alone wouldn't prove much here - nothing in
+        // this test clicks the link, so a survived javascript: href would
+        // pass that check regardless. Verified directly (not guessed) that
+        // DOMPurify drops the href attribute entirely rather than leaving a
+        // neutered one: the tag survives as a bare <a>click me</a>.
+        name: 'javascript: link',
+        markdown: '[click me](javascript:window.__xssHit="jsurl")',
+        assertOutput: (html) => expect(html).not.toMatch(/<a\s[^>]*href/i),
+    },
+    { name: 'iframe srcdoc', markdown: '<iframe srcdoc="<script>parent.__xssHit=\'srcdoc\'</script>"></iframe>' },
+    {
+        // DOMPurify allows the style attribute through (its URI allowlist
+        // only governs attributes actually interpreted as a URI, e.g.
+        // href/src) - the literal text "javascript:" can legitimately
+        // survive inside a style attribute's CSS. That's not a bypass: no
+        // current browser executes url(javascript:...) in CSS, which is
+        // exactly what `hit` staying undefined above already proves.
+        name: 'style expression',
+        markdown: '<div style="background:url(javascript:window.__xssHit=\'style\')">x</div>',
+    },
+    { name: 'event handler on real tag', markdown: '<p onmouseover="window.__xssHit=\'onmouseover\'">hover me</p>' },
+    {
+        // Same reasoning as the javascript: link case above - verified
+        // directly that the href is dropped entirely, not neutered.
+        name: 'data: URL script',
+        markdown: '<a href="data:text/html,<script>window.__xssHit=\'data\'</script>">link</a>',
+        assertOutput: (html) => expect(html).not.toMatch(/<a\s[^>]*href/i),
+    },
+];
+
+test.describe('XSS regression corpus', () => {
+    for (const { name, markdown, assertOutput } of PAYLOADS) {
+        test(`${name} payload does not execute in the live editor preview`, async ({ page }) => {
+            await gotoAndInit(page);
+            await page.addInitScript(() => { window.__xssHit = undefined; });
+            await goToSection(page, 'blog-editor');
+            await page.selectOption('#edit-type', 'blog');
+            await page.fill('#edit-title', 'XSS Test');
+            await page.fill('#edit-content', markdown);
+            await page.waitForTimeout(150); // debounce the input-driven preview render
+
+            const hit = await page.evaluate(() => window.__xssHit);
+            expect(hit, `payload executed: ${name}`).toBeUndefined();
+
+            // The load-bearing assertion is `hit` above (proves nothing
+            // executed) - these are structural sanity checks on top of it,
+            // not a substitute. Deliberately not asserting the sanitized
+            // output never contains the literal text "javascript:" anywhere:
+            // DOMPurify allows a style attribute's CSS text through (its
+            // ALLOWED_URI_REGEXP only blocks javascript: in an attribute
+            // that's actually interpreted as a URI, e.g. href/src), and no
+            // current browser executes url(javascript:...) inside CSS - a
+            // real payload text surviving there is inert, not a bypass.
+            const previewHTML = await page.locator('#editor-preview').innerHTML();
+            expect(previewHTML).not.toMatch(/<script/i);
+            expect(previewHTML).not.toMatch(/\son\w+\s*=/i);
+            assertOutput?.(previewHTML);
+        });
+    }
+
+    test('a published blog post cannot execute script even if content.js were compromised', async ({ page }) => {
+        await gotoAndInit(page);
+        await page.addInitScript(() => { window.__xssHit = undefined; });
+        await page.evaluate(() => {
+            siteContent.blog.unshift({
+                id: 'malicious-test-post',
+                title: 'Malicious Post',
+                date: '2026-01-01',
+                author: 'attacker',
+                excerpt: '...',
+                content: '<script>window.__xssHit = "blog-post"</script>Also has <img src=x onerror="window.__xssHit=\'blog-post-img\'">',
+            });
+            showBlogPost('malicious-test-post');
+        });
+        const hit = await page.evaluate(() => window.__xssHit);
+        expect(hit).toBeUndefined();
+    });
+
+    test('the docs page sanitizes the same way', async ({ page }) => {
+        await gotoAndInit(page);
+        await page.addInitScript(() => { window.__xssHit = undefined; });
+        await page.evaluate(() => {
+            siteContent.docs.unshift({
+                id: 'malicious-doc',
+                title: 'Malicious Doc',
+                content: '<img src=x onerror="window.__xssHit=\'docs\'">',
+            });
+            showDocPage('malicious-doc');
+        });
+        const hit = await page.evaluate(() => window.__xssHit);
+        expect(hit).toBeUndefined();
+    });
+});
diff --git a/website/theme-init.js b/website/theme-init.js
new file mode 100644
index 00000000..6a0d4a3f
--- /dev/null
+++ b/website/theme-init.js
@@ -0,0 +1,15 @@
+// Blocking theme script: sets the 'dark' class on <html> before first paint
+// to prevent a flash of the wrong theme. Must stay a plain, unblocked,
+// non-deferred <script src> in the exact position the inline version used
+// to occupy in index.html's <head> - execution order for scripts without
+// defer/async is document order, so moving this to an external same-origin
+// file (required by CSP's script-src no longer allowing 'unsafe-inline',
+// see #297) preserves the same blocking-before-paint behavior.
+if (
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+) {
+    document.documentElement.classList.add('dark');
+} else {
+    document.documentElement.classList.remove('dark');
+}
diff --git a/website/vercel.json b/website/vercel.json
index b12e58a0..f9e9d4a0 100644
--- a/website/vercel.json
+++ b/website/vercel.json
@@ -16,7 +16,7 @@
         { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
         {
           "key": "Content-Security-Policy",
-          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://unpkg.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data: https://github.com https://avatars.githubusercontent.com; frame-src https://www.youtube.com https://player.vimeo.com; connect-src 'self' https://api.github.com; object-src 'none';"
+          "value": "default-src 'self'; script-src 'self' https://cdn.tailwindcss.com https://unpkg.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data: https://github.com https://avatars.githubusercontent.com; frame-src https://www.youtube.com https://player.vimeo.com; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self';"
         }
       ]
     }