Security Fixes Implemented

— Request throttle: Added 3-second minimum gap between AI requests (lastRequestTime ref) as a client-side layer on top of the worker's rate limiting.
— AI flashcard answers: Added parseMarkdown() pass on all Gemini flashcard answers before storage. Changed the worker's flashcard system prompt to request markdown (**bold**) instead of raw HTML (<strong>) — matching how chat responses are already handled, no new dependency needed.
— User messages: Added escapeHtml() helper and applied it before storing user input. A user typing <img src=x onerror=alert(1)> now renders as escaped text, not executable HTML.
- New file that Cloudflare Pages/Netlify serves as HTTP response headers
- Production only allows notes.gobinath.com origins. localhost origins are enabled only when ENVIRONMENT=development (read from worker/.dev.vars via wrangler dev). The .dev.vars file is added to .gitignore.

Author: gobinathm

.gitignore

@@ -48,4 +48,5 @@ coverage/
 *~
 
 # Wrangler
-worker/.wrangler/
+worker/.wrangler/
+worker/.dev.vars

.vitepress/theme/components/AIChatBot.vue

@@ -15,6 +15,8 @@ const flashcards = ref([])
 const loading = ref(false)
 const hasInteracted = ref(false)
 const chatBody = ref(null)
+const lastRequestTime = ref(0)
+const MIN_REQUEST_INTERVAL = 3000
 
 const isStudyPage = computed(() => {
   const path = route.path
@@ -59,6 +61,15 @@ function extractPageContent() {
   return text.slice(0, 40_000)
 }
 
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 function parseMarkdown(md) {
   let html = md
     // Escape HTML entities first (security)
@@ -111,8 +122,12 @@ async function sendQuestion(q) {
   const userQuestion = q || question.value.trim()
   if (!userQuestion || loading.value) return
 
+  const now = Date.now()
+  if (now - lastRequestTime.value < MIN_REQUEST_INTERVAL) return
+  lastRequestTime.value = now
+
   question.value = ''
-  messages.value.push({ role: 'user', text: userQuestion })
+  messages.value.push({ role: 'user', text: escapeHtml(userQuestion) })
   loading.value = true
   await scrollToBottom()
 
@@ -142,6 +157,11 @@ async function sendQuestion(q) {
 
 async function generateFlashcards() {
   if (loading.value) return
+
+  const now = Date.now()
+  if (now - lastRequestTime.value < MIN_REQUEST_INTERVAL) return
+  lastRequestTime.value = now
+
   loading.value = true
   flashcards.value = []
 
@@ -156,9 +176,12 @@ async function generateFlashcards() {
     })
     const data = await res.json()
     if (data.error) {
-      flashcards.value = [{ question: 'Error', answer: data.error }]
+      flashcards.value = [{ question: 'Error', answer: escapeHtml(data.error) }]
     } else {
-      flashcards.value = data.flashcards
+      flashcards.value = data.flashcards.map(c => ({
+        question: c.question,
+        answer: parseMarkdown(c.answer),
+      }))
     }
   } catch {
     flashcards.value = [{ question: 'Error', answer: 'Failed to reach the AI service.' }]

CONTRIBUTING.md

@@ -45,6 +45,40 @@ npm run docs:build    # Build static files to .vitepress/dist
 npm run docs:preview  # Preview the production build
 ```
 
+### AI Study Assistant (Worker Development)
+
+The AI chatbot uses a Cloudflare Worker as a proxy to Google Gemini. The frontend at `http://localhost:5173` calls the **deployed** production worker by default — you don't need to run the worker locally just to work on content or styling.
+
+If you want to test AI features locally (against a local worker), follow these steps:
+
+**Prerequisites**: [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/install-and-update/) (`npm install -g wrangler`) and a [Google Gemini API key](https://aistudio.google.com/app/apikey).
+
+**1. Create `worker/.dev.vars`** (this file is gitignored — never commit it):
+```
+ENVIRONMENT=development
+GEMINI_API_KEY=your-gemini-api-key-here
+```
+
+**2. Run the worker locally:**
+```bash
+cd worker
+npm install
+wrangler dev
+```
+The worker runs at `http://localhost:8787` by default.
+
+**3. Point the frontend at your local worker:**
+
+In `.vitepress/theme/components/AIChatBot.vue`, temporarily change:
+```js
+const WORKER_URL = 'http://localhost:8787'
+```
+**Revert this change before submitting a PR.**
+
+**Why `.dev.vars`?**
+
+The worker uses environment-gated CORS. In production (`ENVIRONMENT=production`, set in `wrangler.toml`), only `notes.gobinath.com` is allowed as a request origin. Setting `ENVIRONMENT=development` in `.dev.vars` tells the worker to also accept `localhost` origins when running via `wrangler dev`. The `.dev.vars` file is read automatically by `wrangler dev` and is gitignored to prevent secrets from being committed.
+
 ---
 
 ## Project Structure

public/_headers

@@ -0,0 +1,6 @@
+/*
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://cloud.umami.is; style-src 'self' 'unsafe-inline'; connect-src 'self' https://gemini-proxy.gobinathm.workers.dev https://api-gateway.umami.dev; img-src 'self' data: https:; font-src 'self'; frame-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'

worker/src/index.js

@@ -4,11 +4,9 @@
  * Handles CORS, rate limiting, and input validation.
  */
 
-const ALLOWED_ORIGINS = [
+const PROD_ORIGINS = [
   'https://notes.gobinath.com',
   'https://gobinathmallaiyan.github.io',
-  'http://localhost:5173',
-  'http://localhost:4173',
 ];
 
 const GEMINI_URL =
@@ -104,7 +102,7 @@ function buildFlashcardPrompt(pageContent) {
     system_instruction: {
       parts: [
         {
-          text: `You are a flashcard generator for certification exam preparation. Given study notes, create 8-12 high-quality flashcards that test key concepts. Return ONLY a valid JSON array of objects with "question" (string) and "answer" (string with HTML formatting like <strong>, <em>, <br>, <ul><li>). Focus on: definitions, comparisons, decision rules, and exam-relevant facts. Do not wrap the JSON in markdown code fences.`,
+          text: `You are a flashcard generator for certification exam preparation. Given study notes, create 8-12 high-quality flashcards that test key concepts. Return ONLY a valid JSON array of objects with "question" (string) and "answer" (string using markdown formatting like **bold**, *italic*, and - bullet points for lists). Focus on: definitions, comparisons, decision rules, and exam-relevant facts. Do not wrap the JSON in markdown code fences.`,
         },
       ],
     },
@@ -127,6 +125,10 @@ function buildFlashcardPrompt(pageContent) {
 
 export default {
   async fetch(request, env) {
+    const ALLOWED_ORIGINS = env.ENVIRONMENT === 'development'
+      ? [...PROD_ORIGINS, 'http://localhost:5173', 'http://localhost:4173']
+      : PROD_ORIGINS;
+
     const origin = request.headers.get('Origin') || '';
     const allowedOrigin = ALLOWED_ORIGINS.find((o) => origin.startsWith(o)) || ALLOWED_ORIGINS[0];
 

worker/wrangler.toml

@@ -5,3 +5,6 @@ workers_dev = true
 
 # Secret: GEMINI_API_KEY
 # Set via: wrangler secret put GEMINI_API_KEY
+
+[vars]
+ENVIRONMENT = "production"