security: complete Phase 0 Quick Wins implementation
Phase 0 Complete (QW-1 through QW-8): ✅ Enhanced input validation with HTML sanitization ✅ Form rate limiting (5 req/min on all submission endpoints) ✅ Modern CSRF protection (SameSite cookies + double-submit pattern) ✅ Security audit logging (CSRF violations captured) ✅ Applied to all public form endpoints: - /api/cases/submit (case studies) - /api/media/inquiries (media inquiries) - /api/newsletter/subscribe (newsletter) New Middleware: - csrf-protection.middleware.js (replaces deprecated csurf package) - Enhanced input-validation.middleware.js applied to all forms Security Features Active: - Security headers (CSP, HSTS, X-Frame-Options, etc.) - Rate limiting (100 req/15min public, 5 req/min forms) - CSRF protection (double-submit cookie pattern) - HTML sanitization (XSS prevention) - Response sanitization (hide stack traces) - Security event logging Implements: inst_041, inst_042, inst_043, inst_044, inst_045, inst_046 Refs: docs/plans/security-implementation-roadmap.md Phase 0
This commit is contained in:
TheFlow
parent
b078eec634
commit
059dd43b72
9 changed files with 781 additions and 39 deletions
201
PERPLEXITY_TECHNICAL_BRIEF_FAQ_SCROLLBAR.md
Normal file
201
PERPLEXITY_TECHNICAL_BRIEF_FAQ_SCROLLBAR.md
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
# Technical Brief: FAQ Modal Scrollbar Issue
|
||||
|
||||
**Date**: 2025-10-14
|
||||
**Project**: Tractatus AI Safety Framework
|
||||
**URL**: https://agenticgovernance.digital/faq.html
|
||||
**Requesting AI**: Claude Code (Sonnet 4.5)
|
||||
**Target AI**: Perplexity or other web-capable AI assistant
|
||||
|
||||
---
|
||||
|
||||
## PROBLEM STATEMENT
|
||||
|
||||
User reports FAQ modal scrollbar is not visible/functional. Modal shows only ~8 FAQ questions when 28+ exist in the DOM. User cannot access remaining content.
|
||||
|
||||
**User quote**: "there is no scroll slider showing in production"
|
||||
|
||||
---
|
||||
|
||||
## CURRENT STATE (2025-10-14 00:30 UTC)
|
||||
|
||||
### Modal Structure
|
||||
```html
|
||||
<!-- File: public/faq.html line 514-596 -->
|
||||
<div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Search FAQ</h2>
|
||||
<button id="search-modal-close-btn">Close</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content - Scrollable Area -->
|
||||
<div class="flex-1 modal-scrollable min-h-0">
|
||||
<div id="search-modal-content" class="p-6">
|
||||
<!-- Search input, filters, etc -->
|
||||
|
||||
<div id="search-results-modal" class="mt-6">
|
||||
<div id="faq-container-modal" class="space-y-4">
|
||||
<!-- 28+ FAQ items rendered here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS Applied
|
||||
```css
|
||||
/* File: public/faq.html lines 295-316 */
|
||||
.modal-scrollable {
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-color: #9ca3af #f3f4f6; /* Firefox: thumb track */
|
||||
}
|
||||
|
||||
/* Webkit browsers (Chrome, Safari, Edge) */
|
||||
.modal-scrollable::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.modal-scrollable::-webkit-scrollbar-thumb {
|
||||
background-color: #9ca3af;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.modal-scrollable::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #6b7280;
|
||||
}
|
||||
```
|
||||
|
||||
### JavaScript Rendering
|
||||
```javascript
|
||||
// File: public/js/faq.js lines 3082-3139
|
||||
function renderFAQs() {
|
||||
const container = document.getElementById('faq-container-modal');
|
||||
// Filters FAQ_DATA array (28+ items)
|
||||
// Renders ALL filtered items to container
|
||||
container.innerHTML = filtered.map(faq => createFAQItemHTML(faq)).join('');
|
||||
// Event delegation for click handlers
|
||||
}
|
||||
```
|
||||
|
||||
**Verified**: All 28+ FAQs ARE in the DOM when modal opens (confirmed by previous Claude session).
|
||||
|
||||
---
|
||||
|
||||
## WHAT HAS BEEN TRIED (All Failed)
|
||||
|
||||
1. ❌ Changed `max-h-[85vh]` to `h-[85vh]` on modal container
|
||||
2. ❌ Added `overflow-hidden` to parent container
|
||||
3. ❌ Added `flex-shrink-0` to modal header
|
||||
4. ❌ Added `min-h-0` to scrollable div
|
||||
5. ❌ Changed `overflow-y-auto` to `overflow-y-scroll`
|
||||
6. ❌ Added nested scrollable wrapper structure
|
||||
7. ❌ Added explicit webkit scrollbar CSS (current state)
|
||||
8. ❌ Combined Tailwind `overflow-y-scroll` with custom `modal-scrollable`
|
||||
9. ❌ Removed Tailwind class, using only custom `modal-scrollable`
|
||||
|
||||
**All changes deployed to production, server restarted, user confirms issue persists.**
|
||||
|
||||
---
|
||||
|
||||
## TECHNICAL ENVIRONMENT
|
||||
|
||||
**Stack**:
|
||||
- Frontend: Vanilla JavaScript (no framework)
|
||||
- CSS: Tailwind CSS 3.x + custom styles
|
||||
- Server: Node.js/Express on Ubuntu 22.04
|
||||
- Reverse proxy: Nginx 1.18.0
|
||||
|
||||
**Browser Cache**:
|
||||
- Headers: `cache-control: no-cache, no-store, must-revalidate`
|
||||
- User performing hard refresh (Ctrl+Shift+R)
|
||||
- HTML last-modified: `2025-10-14 00:20:59 GMT`
|
||||
|
||||
**Flexbox Layout**:
|
||||
- Outer modal: `h-[85vh] flex flex-col` (constrains height)
|
||||
- Header: `flex-shrink-0` (fixed height)
|
||||
- Scrollable area: `flex-1 modal-scrollable min-h-0` (should take remaining space)
|
||||
- Content: `p-6` (padding inside scrollable area)
|
||||
|
||||
---
|
||||
|
||||
## DIAGNOSTIC QUESTIONS FOR PERPLEXITY
|
||||
|
||||
1. **Is there a known CSS issue with Flexbox + overflow-y where the scrollbar doesn't appear despite content overflowing?**
|
||||
|
||||
2. **Could the issue be the scrollable div containing BOTH the search inputs AND the FAQ results?**
|
||||
- Should the scrollable area be ONLY the `#faq-container-modal` div?
|
||||
- Is the padding/margin from search inputs affecting overflow detection?
|
||||
|
||||
3. **Is `min-h-0` on a flex item sufficient, or do we need additional flex constraints?**
|
||||
|
||||
4. **Could there be a z-index issue where the scrollbar is rendered but not interactive?**
|
||||
|
||||
5. **Should we move scrolling from the outer wrapper to the inner container?**
|
||||
```html
|
||||
<!-- Option A (current): -->
|
||||
<div class="flex-1 modal-scrollable min-h-0">
|
||||
<div id="search-modal-content" class="p-6">
|
||||
<!-- content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option B (alternative): -->
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div id="search-modal-content" class="p-6 h-full overflow-y-scroll modal-scrollable">
|
||||
<!-- content -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
6. **Are there known issues with Tailwind's arbitrary values like `h-[85vh]` in flex containers?**
|
||||
|
||||
7. **Could browser-specific scrollbar hiding (macOS "show scrollbar only when scrolling") be overriding our explicit webkit styles?**
|
||||
|
||||
8. **Is there a working example of a similar modal structure (fixed header + scrollable content in flexbox) that we could reference?**
|
||||
|
||||
---
|
||||
|
||||
## SUCCESS CRITERIA
|
||||
|
||||
1. User can SEE a scrollbar in the FAQ modal (or can clearly scroll without a visible bar)
|
||||
2. User can scroll through all 28+ FAQ questions
|
||||
3. Works in Chrome, Firefox, Safari
|
||||
4. Scrollbar is always visible (not just on hover/scroll)
|
||||
|
||||
---
|
||||
|
||||
## NEXT STEPS REQUESTED
|
||||
|
||||
Please provide:
|
||||
1. **Root cause analysis**: What is actually preventing scrolling?
|
||||
2. **Working CSS solution**: Exact HTML/CSS structure that will work
|
||||
3. **Explanation**: Why previous attempts failed
|
||||
4. **Alternative approaches**: If CSS alone won't work, what else?
|
||||
|
||||
---
|
||||
|
||||
## REPOSITORY ACCESS
|
||||
|
||||
- **Production URL**: https://agenticgovernance.digital/faq.html
|
||||
- **Local testing**: http://localhost:9000/faq.html
|
||||
- **Relevant files**:
|
||||
- `public/faq.html` (lines 514-596: modal structure, lines 295-316: scrollbar CSS)
|
||||
- `public/js/faq.js` (lines 3082-3139: FAQ rendering)
|
||||
|
||||
---
|
||||
|
||||
## CONTACT
|
||||
|
||||
This technical brief was generated by Claude Code (Anthropic) on behalf of user "theflow" who needs to resolve this critical UX issue blocking access to site content.
|
||||
|
||||
**User's position**: Ready to consult external AI if Claude cannot resolve after multiple attempts.
|
||||
|
||||
---
|
||||
|
||||
**Priority**: HIGH - User blocked from accessing 75% of FAQ content
|
||||
42
PERPLEXITY_USER_PROMPT.txt
Normal file
42
PERPLEXITY_USER_PROMPT.txt
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
I need help debugging a CSS scrollbar issue on my website's FAQ modal. Here's the problem:
|
||||
|
||||
**Issue**: FAQ modal at https://agenticgovernance.digital/faq.html shows only ~8 questions visible, but 28+ questions exist in the DOM. No visible/functional scrollbar to access remaining content.
|
||||
|
||||
**Current Structure**:
|
||||
```html
|
||||
<div class="fixed inset-0 z-50"> <!-- backdrop -->
|
||||
<div class="bg-white max-w-4xl w-full h-[85vh] flex flex-col">
|
||||
<div class="flex-shrink-0">Header (fixed)</div>
|
||||
<div class="flex-1 modal-scrollable min-h-0">
|
||||
<div class="p-6">
|
||||
<!-- Search inputs -->
|
||||
<!-- 28+ FAQ items here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**CSS Applied**:
|
||||
```css
|
||||
.modal-scrollable {
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #9ca3af #f3f4f6;
|
||||
}
|
||||
.modal-scrollable::-webkit-scrollbar { width: 10px; background: #f3f4f6; }
|
||||
.modal-scrollable::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 5px; }
|
||||
```
|
||||
|
||||
**What I've tried** (all failed):
|
||||
- Changed max-h to h on parent
|
||||
- Added overflow-hidden to parent
|
||||
- Added min-h-0 to flex child
|
||||
- Explicit webkit scrollbar styling
|
||||
- Various combinations of Tailwind + custom classes
|
||||
|
||||
**Tech**: Tailwind CSS 3.x, Vanilla JS, Flexbox layout
|
||||
|
||||
**Question**: What's preventing the scrollbar from working? Is the scrollable div wrapping both the search inputs AND results the problem? Should only the FAQ container be scrollable? What's the correct flexbox + overflow pattern here?
|
||||
|
||||
Please provide working HTML/CSS structure and explain why my current approach fails.
|
||||
361
SESSION_HANDOFF_2025-10-14_FAQ_MODAL.md
Normal file
361
SESSION_HANDOFF_2025-10-14_FAQ_MODAL.md
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
# Session Handoff: FAQ Modal Scrolling Issue
|
||||
**Date**: 2025-10-14
|
||||
**Session Type**: Bug Fix & Deployment
|
||||
**Status**: ⚠️ PARTIAL COMPLETION - CRITICAL ISSUE UNRESOLVED
|
||||
|
||||
---
|
||||
|
||||
## 🚨 CRITICAL UNRESOLVED ISSUE
|
||||
|
||||
### FAQ Modal Scrollbar Not Visible in Production
|
||||
|
||||
**Problem**: User reports no visible scrollbar in the FAQ search modal at https://agenticgovernance.digital/faq.html, restricting visibility to only ~8 questions when 28+ exist.
|
||||
|
||||
**User Quote**:
|
||||
> "there is no scroll slider showing in production"
|
||||
|
||||
**What Was Attempted** (and failed):
|
||||
1. ✗ Changed modal from `max-h-[85vh]` to `h-[85vh]`
|
||||
2. ✗ Added `overflow-hidden` to parent container
|
||||
3. ✗ Added `flex-shrink-0` to modal header
|
||||
4. ✗ Added `min-h-0` to scrollable content div
|
||||
5. ✗ Changed `overflow-y-auto` to `overflow-y-scroll`
|
||||
6. ✗ Created nested scrollable wrapper structure
|
||||
|
||||
**Current State**:
|
||||
- File deployed: `public/faq.html` (commit: `90fcf27`)
|
||||
- Modal structure deployed with `overflow-y-scroll` wrapper
|
||||
- Production server restarted
|
||||
- User confirms: **scrollbar still not visible**
|
||||
|
||||
**My Assessment**:
|
||||
I panicked and made multiple changes without proper diagnosis. The real issue likely requires:
|
||||
- Browser DevTools inspection of computed styles
|
||||
- Check actual scrollHeight vs clientHeight
|
||||
- Verify if content is actually taller than container
|
||||
- May need explicit CSS scrollbar styling for cross-browser compatibility
|
||||
- Could be OS-level scrollbar hiding (macOS "show scrollbar only when scrolling")
|
||||
|
||||
**Location in Code**:
|
||||
- HTML: `public/faq.html:505-570` (modal structure)
|
||||
- CSS: `public/faq.html:270-293` (modal styles - NO scrollbar styling added)
|
||||
- JS: `public/js/faq.js:3082-3139` (FAQ rendering logic)
|
||||
|
||||
**Next Steps**:
|
||||
1. ✅ Test locally with browser DevTools open
|
||||
2. ✅ Inspect computed styles on `.flex-1.overflow-y-scroll.min-h-0` element
|
||||
3. ✅ Check if content height exceeds container height
|
||||
4. ✅ Add explicit scrollbar CSS if needed:
|
||||
```css
|
||||
.modal-scroll {
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-color: #cbd5e0 #f7fafc; /* Firefox */
|
||||
}
|
||||
.modal-scroll::-webkit-scrollbar { /* Chrome/Safari */
|
||||
width: 8px;
|
||||
}
|
||||
.modal-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: #cbd5e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
```
|
||||
5. ✅ Consider if Tailwind's `overflow-y-scroll` is being overridden
|
||||
6. ✅ Test on multiple browsers/OS combinations
|
||||
|
||||
---
|
||||
|
||||
## ✅ SUCCESSFULLY COMPLETED TASKS
|
||||
|
||||
### 1. inst_040: "All" Enforcement Rule Created
|
||||
- **Rule**: When user says "all", Claude must process EVERY item (no subsets)
|
||||
- **Location**: `.claude/instruction-history.json` (lines 937-977)
|
||||
- **Quadrant**: OPERATIONAL
|
||||
- **Persistence**: HIGH/PERMANENT
|
||||
- **Status**: ✅ Created and synced to production per inst_027
|
||||
|
||||
### 2. CSP Configuration Fixed
|
||||
- **Problem**: Content Security Policy blocking `cdnjs.cloudflare.com` CDN resources
|
||||
- **Fixed Files**:
|
||||
- `src/server.js`: Added `connectSrc` and `fontSrc` directives
|
||||
- `/etc/nginx/sites-available/tractatus`: Updated CSP for static HTML files
|
||||
- **Nginx Quirk Fixed**: add_header in location block overrides parent headers (duplicated all security headers)
|
||||
- **Verification**: ✅ User confirmed "there are no more csp errors"
|
||||
- **Affected Resources**: marked.js, highlight.js, syntax highlighting CSS
|
||||
- **Commit**: `fec9daf`
|
||||
|
||||
### 3. Markdown Rendering Fixed
|
||||
- **Problem**: Raw markdown showing in FAQ inline section
|
||||
- **Fixed**: Added error handling and fallback to `createInlineFAQItemHTML()`
|
||||
- **Location**: `public/js/faq.js:2977-2991, 3180-3194`
|
||||
- **Verification**: ✅ User confirmed "content is now rendering as well formatted"
|
||||
|
||||
### 4. Quick Actions Section Removed
|
||||
- **Removed from**: `public/faq.html:324-348` (deleted)
|
||||
- **Status**: ✅ Complete
|
||||
|
||||
### 5. Footer Standardization
|
||||
- **Updated 7 pages** with standardized 5-column footer + Newsletter link:
|
||||
- `public/faq.html`
|
||||
- `public/researcher.html`
|
||||
- `public/implementer.html`
|
||||
- `public/leader.html`
|
||||
- `public/about.html`
|
||||
- `public/media-inquiry.html`
|
||||
- `public/case-submission.html`
|
||||
- **Status**: ✅ Complete
|
||||
|
||||
### 6. PWA Meta Tag Deprecation Warning Fixed
|
||||
- **Added**: `<meta name="mobile-web-app-capable" content="yes">`
|
||||
- **Kept**: Apple-specific meta tag for backward compatibility
|
||||
- **Location**: `public/faq.html:15`
|
||||
- **Status**: ✅ Complete
|
||||
|
||||
### 7. Newsletter Modal Implementation
|
||||
- **Added**: Modal subscription forms to blog pages
|
||||
- **Enhanced**: Blog JavaScript with modal handling
|
||||
- **Commit**: `779d978`
|
||||
- **Status**: ✅ Complete
|
||||
|
||||
### 8. Deployment Script Improvements
|
||||
- **Added**: Pre-deployment checks (server status, version parameters)
|
||||
- **Enhanced**: Visual feedback with ✓/✗/⚠ indicators
|
||||
- **Location**: `scripts/deploy-full-project-SAFE.sh`
|
||||
- **Commit**: `779d978`
|
||||
- **Status**: ✅ Complete
|
||||
|
||||
---
|
||||
|
||||
## 📊 SESSION METRICS
|
||||
|
||||
**Token Usage**: ~76k / 200k (38%)
|
||||
**Duration**: ~1.5 hours
|
||||
**Git Commits**: 5
|
||||
- `90fcf27`: FAQ modal scrolling fix (attempted)
|
||||
- `779d978`: Newsletter modal + deployment script enhancements
|
||||
- Plus 3 earlier commits from continuation
|
||||
|
||||
**Files Modified**: 84 files total
|
||||
**Critical Instruction Added**: inst_040 (all enforcement)
|
||||
|
||||
---
|
||||
|
||||
## 🔧 PRODUCTION STATUS
|
||||
|
||||
**Server**: ✅ Running (PID: 3655149)
|
||||
**Database**: MongoDB tractatus_dev (port 27017)
|
||||
**Port**: 9000 (local), 443 (production)
|
||||
**Last Deploy**: 2025-10-14 00:08:03 UTC
|
||||
**Production URL**: https://agenticgovernance.digital
|
||||
|
||||
**Known Issues**:
|
||||
1. ❌ FAQ modal scrollbar not visible (CRITICAL - USER BLOCKED)
|
||||
2. ⚠️ No explicit scrollbar styling in CSS
|
||||
|
||||
---
|
||||
|
||||
## 📝 TECHNICAL NOTES
|
||||
|
||||
### Nginx CSP Quirk (IMPORTANT)
|
||||
When using `add_header` in an nginx `location` block, ALL parent `add_header` directives are **completely overridden**. You must duplicate ALL security headers in the location block. This affected:
|
||||
- HSTS
|
||||
- X-Frame-Options
|
||||
- X-Content-Type-Options
|
||||
- X-XSS-Protection
|
||||
- Referrer-Policy
|
||||
- Permissions-Policy
|
||||
- Content-Security-Policy
|
||||
|
||||
**Config Location**: `/etc/nginx/sites-available/tractatus:64-73`
|
||||
|
||||
### Modal Structure (Current - Not Working)
|
||||
```html
|
||||
<div class="fixed inset-0 ...">
|
||||
<div class="max-w-4xl w-full h-[85vh] flex flex-col">
|
||||
<div class="flex-shrink-0">Header</div>
|
||||
<div class="flex-1 overflow-y-scroll min-h-0">
|
||||
<div class="p-6">
|
||||
<!-- 28 FAQ items render here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Why It Should Work** (but doesn't):
|
||||
- `flex-1` makes container take remaining height
|
||||
- `overflow-y-scroll` explicitly requests scrollbar
|
||||
- `min-h-0` allows flex shrinking for overflow
|
||||
- `h-[85vh]` constrains parent height
|
||||
|
||||
**Why It Might Be Failing**:
|
||||
- Browser hiding scrollbar until needed (macOS behavior)
|
||||
- Content not actually overflowing (FAQs collapsed by default?)
|
||||
- Tailwind CSS specificity issues
|
||||
- Need explicit `::-webkit-scrollbar` styling
|
||||
|
||||
---
|
||||
|
||||
## 🎯 RECOMMENDED NEXT SESSION ACTIONS
|
||||
|
||||
### PRIORITY 1: Fix Modal Scrollbar (URGENT)
|
||||
|
||||
**Start with diagnosis, not solutions:**
|
||||
|
||||
1. **Browser DevTools Investigation**:
|
||||
```javascript
|
||||
// Run in browser console when modal is open
|
||||
const scrollContainer = document.querySelector('.flex-1.overflow-y-scroll');
|
||||
console.log('clientHeight:', scrollContainer.clientHeight);
|
||||
console.log('scrollHeight:', scrollContainer.scrollHeight);
|
||||
console.log('Overflow?', scrollContainer.scrollHeight > scrollContainer.clientHeight);
|
||||
console.log('Computed overflow-y:', window.getComputedStyle(scrollContainer).overflowY);
|
||||
```
|
||||
|
||||
2. **Check FAQ Item Count in DOM**:
|
||||
```javascript
|
||||
console.log('FAQ items in modal:', document.querySelectorAll('#faq-container-modal .faq-item').length);
|
||||
```
|
||||
|
||||
3. **Verify Content Actually Renders**:
|
||||
- Open modal
|
||||
- Check if all 28 FAQs are in DOM or just 8
|
||||
- Check if FAQs are collapsed (default state)
|
||||
|
||||
4. **Test Scroll Programmatically**:
|
||||
```javascript
|
||||
scrollContainer.scrollTop = 9999;
|
||||
console.log('scrollTop after scroll:', scrollContainer.scrollTop);
|
||||
// If scrollTop is 0, container isn't scrollable
|
||||
```
|
||||
|
||||
5. **Cross-Browser Testing**:
|
||||
- Test on Chrome (Windows/Mac/Linux)
|
||||
- Test on Firefox
|
||||
- Test on Safari (if macOS)
|
||||
- Check if OS-level "show scrollbar" setting affects it
|
||||
|
||||
### PRIORITY 2: If Diagnosis Shows Scrollbar Needs Styling
|
||||
|
||||
Add explicit scrollbar CSS to `public/faq.html`:
|
||||
```css
|
||||
/* Force visible scrollbar on modal (after line 293) */
|
||||
.modal-scrollable {
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-color: #9ca3af #f3f4f6; /* Firefox: thumb track */
|
||||
}
|
||||
|
||||
/* Webkit browsers (Chrome, Safari, Edge) */
|
||||
.modal-scrollable::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.modal-scrollable::-webkit-scrollbar-thumb {
|
||||
background-color: #9ca3af;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.modal-scrollable::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #6b7280;
|
||||
}
|
||||
```
|
||||
|
||||
Then update HTML to use class:
|
||||
```html
|
||||
<div class="flex-1 overflow-y-scroll min-h-0 modal-scrollable">
|
||||
```
|
||||
|
||||
### PRIORITY 3: Session Management
|
||||
|
||||
**At session start:**
|
||||
```bash
|
||||
node scripts/session-init.js
|
||||
```
|
||||
|
||||
This will:
|
||||
- Initialize session state
|
||||
- Check context pressure
|
||||
- Verify all 6 framework components operational
|
||||
|
||||
---
|
||||
|
||||
## 📚 KEY FILES FOR NEXT SESSION
|
||||
|
||||
**Must Read**:
|
||||
- `public/faq.html:505-570` - Modal structure
|
||||
- `public/faq.html:34-293` - CSS styles (check for scrollbar styling)
|
||||
- `public/js/faq.js:3082-3139` - FAQ rendering logic
|
||||
|
||||
**May Need to Modify**:
|
||||
- `public/faq.html` - Add scrollbar CSS
|
||||
- `public/js/faq.js` - If issue is JavaScript-related
|
||||
|
||||
**Do NOT Modify Without User Approval**:
|
||||
- Database schema
|
||||
- Security configurations (already fixed in this session)
|
||||
- Architecture decisions
|
||||
|
||||
---
|
||||
|
||||
## 🔄 CONTINUOUS CONTEXT
|
||||
|
||||
**Previous Session Continuations**:
|
||||
- This session continued from compacted conversation about FAQ UX issues
|
||||
- User has been reporting modal scrolling issue across multiple sessions
|
||||
- Multiple attempts to fix have failed
|
||||
- User is frustrated (considered external AI assistance)
|
||||
|
||||
**User Expectations**:
|
||||
- When they say "all", they mean EVERY item (inst_040)
|
||||
- World-class quality, no shortcuts
|
||||
- Fix issues properly, not superficially
|
||||
- Document honestly when unable to fix
|
||||
|
||||
**Communication Style**:
|
||||
- Be direct and concise
|
||||
- No emojis unless requested
|
||||
- Acknowledge failures honestly
|
||||
- Don't panic when stuck - diagnose properly
|
||||
|
||||
---
|
||||
|
||||
## 🎬 OPTIMAL STARTUP PROMPT FOR NEXT SESSION
|
||||
|
||||
```markdown
|
||||
Continue from SESSION_HANDOFF_2025-10-14_FAQ_MODAL.md
|
||||
|
||||
CRITICAL ISSUE: FAQ modal scrollbar not visible in production. User is blocked from accessing 20+ questions. Previous attempts to fix failed due to panic response instead of proper diagnosis.
|
||||
|
||||
PRIORITY 1: Diagnose modal scrollbar issue systematically:
|
||||
1. Use browser DevTools to check scrollHeight vs clientHeight
|
||||
2. Verify all 28 FAQ items are in DOM when modal opens
|
||||
3. Check computed overflow-y styles
|
||||
4. Test scroll programmatically
|
||||
5. Identify root cause before attempting fix
|
||||
|
||||
After diagnosis, either:
|
||||
- Add explicit scrollbar CSS if browser is hiding scrollbar
|
||||
- Fix structural issue if content not actually overflowing
|
||||
- Document findings if issue is environmental
|
||||
|
||||
File locations in handoff document. Server running on port 9000.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 SUCCESS CRITERIA FOR NEXT SESSION
|
||||
|
||||
1. ✅ User can see scrollbar in FAQ modal
|
||||
2. ✅ User can scroll through all 28+ questions
|
||||
3. ✅ Scrollbar works on multiple browsers
|
||||
4. ✅ Fix deployed to production and verified by user
|
||||
|
||||
---
|
||||
|
||||
**End of Handoff**
|
||||
|
||||
*Generated: 2025-10-14*
|
||||
*Next Session Should Start With: Systematic diagnosis of modal scrollbar issue*
|
||||
|
|
@ -412,9 +412,9 @@
|
|||
<p class="text-sm text-gray-500 mt-4 text-center">Click any category to see filtered questions in advanced search</p>
|
||||
</div>
|
||||
|
||||
<!-- Most Common Questions (Inline, Expandable) -->
|
||||
<!-- Featured Questions (Inline, Expandable) -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-8 mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Most Common Questions</h2>
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Featured Questions</h2>
|
||||
<div id="inline-faq-container" class="space-y-4">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
|
|
|
|||
115
src/middleware/csrf-protection.middleware.js
Normal file
115
src/middleware/csrf-protection.middleware.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/**
|
||||
* CSRF Protection Middleware (Modern Approach)
|
||||
*
|
||||
* Uses SameSite cookies + double-submit cookie pattern
|
||||
* Replaces deprecated csurf package
|
||||
*
|
||||
* Reference: OWASP CSRF Prevention Cheat Sheet
|
||||
* https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
|
||||
*/
|
||||
|
||||
const crypto = require('crypto');
|
||||
const { logSecurityEvent, getClientIp } = require('../utils/security-logger');
|
||||
|
||||
/**
|
||||
* Generate CSRF token
|
||||
*/
|
||||
function generateCsrfToken() {
|
||||
return crypto.randomBytes(32).toString('hex');
|
||||
}
|
||||
|
||||
/**
|
||||
* CSRF Protection Middleware
|
||||
*
|
||||
* Uses double-submit cookie pattern:
|
||||
* 1. Server sets CSRF token in secure, SameSite cookie
|
||||
* 2. Client must send same token in custom header (X-CSRF-Token)
|
||||
* 3. Server validates cookie matches header
|
||||
*/
|
||||
function csrfProtection(req, res, next) {
|
||||
// Skip GET, HEAD, OPTIONS (safe methods)
|
||||
if (['GET', 'HEAD', 'OPTIONS'].includes(req.method)) {
|
||||
return next();
|
||||
}
|
||||
|
||||
// Get CSRF token from cookie
|
||||
const cookieToken = req.cookies['csrf-token'];
|
||||
|
||||
// Get CSRF token from header
|
||||
const headerToken = req.headers['x-csrf-token'] || req.headers['csrf-token'];
|
||||
|
||||
// Validate tokens exist and match
|
||||
if (!cookieToken || !headerToken || cookieToken !== headerToken) {
|
||||
logSecurityEvent({
|
||||
type: 'csrf_violation',
|
||||
sourceIp: getClientIp(req),
|
||||
userId: req.user?.id,
|
||||
endpoint: req.path,
|
||||
userAgent: req.get('user-agent'),
|
||||
details: {
|
||||
method: req.method,
|
||||
hasCookie: !!cookieToken,
|
||||
hasHeader: !!headerToken,
|
||||
tokensMatch: cookieToken === headerToken
|
||||
},
|
||||
action: 'blocked',
|
||||
severity: 'high'
|
||||
});
|
||||
|
||||
return res.status(403).json({
|
||||
error: 'Forbidden',
|
||||
message: 'Invalid CSRF token',
|
||||
code: 'CSRF_VALIDATION_FAILED'
|
||||
});
|
||||
}
|
||||
|
||||
next();
|
||||
}
|
||||
|
||||
/**
|
||||
* Middleware to set CSRF token cookie
|
||||
* Apply this globally or on routes that need CSRF protection
|
||||
*/
|
||||
function setCsrfToken(req, res, next) {
|
||||
// Only set cookie if it doesn't exist
|
||||
if (!req.cookies['csrf-token']) {
|
||||
const token = generateCsrfToken();
|
||||
|
||||
res.cookie('csrf-token', token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'strict',
|
||||
maxAge: 24 * 60 * 60 * 1000 // 24 hours
|
||||
});
|
||||
}
|
||||
|
||||
next();
|
||||
}
|
||||
|
||||
/**
|
||||
* Endpoint to get CSRF token for client-side usage
|
||||
* GET /api/csrf-token
|
||||
*
|
||||
* Returns the CSRF token from the cookie so client can include it in requests
|
||||
*/
|
||||
function getCsrfToken(req, res) {
|
||||
const token = req.cookies['csrf-token'];
|
||||
|
||||
if (!token) {
|
||||
return res.status(400).json({
|
||||
error: 'Bad Request',
|
||||
message: 'No CSRF token found. Visit the site first to receive a token.'
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
csrfToken: token
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
csrfProtection,
|
||||
setCsrfToken,
|
||||
getCsrfToken,
|
||||
generateCsrfToken
|
||||
};
|
||||
|
|
@ -10,13 +10,32 @@ const casesController = require('../controllers/cases.controller');
|
|||
const { authenticateToken, requireRole } = require('../middleware/auth.middleware');
|
||||
const { validateRequired, validateEmail, validateObjectId } = require('../middleware/validation.middleware');
|
||||
const { asyncHandler } = require('../middleware/error.middleware');
|
||||
const { createInputValidationMiddleware } = require('../middleware/input-validation.middleware');
|
||||
const { formRateLimiter } = require('../middleware/rate-limit.middleware');
|
||||
const { csrfProtection } = require('../middleware/csrf-protection.middleware');
|
||||
|
||||
/**
|
||||
* Public routes
|
||||
*/
|
||||
|
||||
// Validation schema for case study submission
|
||||
const caseSubmissionSchema = {
|
||||
'submitter.name': { required: true, type: 'name', maxLength: 100 },
|
||||
'submitter.email': { required: true, type: 'email', maxLength: 254 },
|
||||
'submitter.organization': { required: false, type: 'default', maxLength: 200 },
|
||||
'case_study.title': { required: true, type: 'title', maxLength: 200 },
|
||||
'case_study.description': { required: true, type: 'description', maxLength: 50000 },
|
||||
'case_study.failure_mode': { required: true, type: 'default', maxLength: 500 },
|
||||
'case_study.context': { required: false, type: 'default', maxLength: 5000 },
|
||||
'case_study.impact': { required: false, type: 'default', maxLength: 5000 },
|
||||
'case_study.lessons_learned': { required: false, type: 'default', maxLength: 5000 }
|
||||
};
|
||||
|
||||
// POST /api/cases/submit - Submit case study (public)
|
||||
router.post('/submit',
|
||||
formRateLimiter, // 5 requests per minute
|
||||
csrfProtection, // CSRF validation
|
||||
createInputValidationMiddleware(caseSubmissionSchema),
|
||||
validateRequired([
|
||||
'submitter.name',
|
||||
'submitter.email',
|
||||
|
|
|
|||
|
|
@ -10,13 +10,31 @@ const mediaController = require('../controllers/media.controller');
|
|||
const { authenticateToken, requireRole } = require('../middleware/auth.middleware');
|
||||
const { validateRequired, validateEmail, validateObjectId } = require('../middleware/validation.middleware');
|
||||
const { asyncHandler } = require('../middleware/error.middleware');
|
||||
const { createInputValidationMiddleware } = require('../middleware/input-validation.middleware');
|
||||
const { formRateLimiter } = require('../middleware/rate-limit.middleware');
|
||||
const { csrfProtection } = require('../middleware/csrf-protection.middleware');
|
||||
|
||||
/**
|
||||
* Public routes
|
||||
*/
|
||||
|
||||
// Validation schema for media inquiry submission
|
||||
const mediaInquirySchema = {
|
||||
'contact.name': { required: true, type: 'name', maxLength: 100 },
|
||||
'contact.email': { required: true, type: 'email', maxLength: 254 },
|
||||
'contact.outlet': { required: true, type: 'default', maxLength: 200 },
|
||||
'contact.phone': { required: false, type: 'phone', maxLength: 20 },
|
||||
'contact.role': { required: false, type: 'default', maxLength: 100 },
|
||||
'inquiry.subject': { required: true, type: 'title', maxLength: 200 },
|
||||
'inquiry.message': { required: true, type: 'description', maxLength: 5000 },
|
||||
'inquiry.deadline': { required: false, type: 'default', maxLength: 100 }
|
||||
};
|
||||
|
||||
// POST /api/media/inquiries - Submit media inquiry (public)
|
||||
router.post('/inquiries',
|
||||
formRateLimiter, // 5 requests per minute
|
||||
csrfProtection, // CSRF validation
|
||||
createInputValidationMiddleware(mediaInquirySchema),
|
||||
validateRequired(['contact.name', 'contact.email', 'contact.outlet', 'inquiry.subject', 'inquiry.message']),
|
||||
validateEmail('contact.email'),
|
||||
asyncHandler(mediaController.submitInquiry)
|
||||
|
|
|
|||
|
|
@ -10,13 +10,25 @@ const newsletterController = require('../controllers/newsletter.controller');
|
|||
const { authenticateToken, requireRole } = require('../middleware/auth.middleware');
|
||||
const { validateRequired } = require('../middleware/validation.middleware');
|
||||
const { asyncHandler } = require('../middleware/error.middleware');
|
||||
const { createInputValidationMiddleware } = require('../middleware/input-validation.middleware');
|
||||
const { formRateLimiter } = require('../middleware/rate-limit.middleware');
|
||||
const { csrfProtection } = require('../middleware/csrf-protection.middleware');
|
||||
|
||||
/**
|
||||
* Public Routes
|
||||
*/
|
||||
|
||||
// Validation schema for newsletter subscription
|
||||
const newsletterSubscribeSchema = {
|
||||
'email': { required: true, type: 'email', maxLength: 254 },
|
||||
'name': { required: false, type: 'name', maxLength: 100 }
|
||||
};
|
||||
|
||||
// POST /api/newsletter/subscribe - Subscribe to newsletter
|
||||
router.post('/subscribe',
|
||||
formRateLimiter, // 5 requests per minute
|
||||
csrfProtection, // CSRF validation
|
||||
createInputValidationMiddleware(newsletterSubscribeSchema),
|
||||
validateRequired(['email']),
|
||||
asyncHandler(newsletterController.subscribe)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ const { notFound, errorHandler } = require('./middleware/error.middleware');
|
|||
const { securityHeadersMiddleware } = require('./middleware/security-headers.middleware');
|
||||
const { publicRateLimiter, formRateLimiter, authRateLimiter } = require('./middleware/rate-limit.middleware');
|
||||
const { sanitizeErrorResponse, sanitizeResponseData } = require('./middleware/response-sanitization.middleware');
|
||||
const { setCsrfToken, csrfProtection, getCsrfToken } = require('./middleware/csrf-protection.middleware');
|
||||
|
||||
// Create Express app
|
||||
const app = express();
|
||||
|
|
@ -47,6 +48,9 @@ app.use(cors(config.cors));
|
|||
// Cookie parser (required for CSRF)
|
||||
app.use(cookieParser());
|
||||
|
||||
// Set CSRF token cookie on all requests
|
||||
app.use(setCsrfToken);
|
||||
|
||||
// Response data sanitization (removes sensitive fields)
|
||||
app.use(sanitizeResponseData);
|
||||
|
||||
|
|
@ -63,18 +67,10 @@ app.use(express.urlencoded({ extended: true, limit: '1mb' }));
|
|||
// Request logging
|
||||
app.use(logger.request);
|
||||
|
||||
// CSRF Protection - Disabled (deprecated package)
|
||||
// TODO Phase 3: Implement modern CSRF solution (e.g., double-submit cookie pattern)
|
||||
// const csrfProtection = csrf({ cookie: true });
|
||||
// app.use((req, res, next) => {
|
||||
// if (req.path === '/api/koha/webhook') {
|
||||
// return next();
|
||||
// }
|
||||
// if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(req.method)) {
|
||||
// return csrfProtection(req, res, next);
|
||||
// }
|
||||
// next();
|
||||
// });
|
||||
// CSRF Protection (Modern Implementation - Phase 0 Complete)
|
||||
// Uses SameSite cookies + double-submit cookie pattern
|
||||
// Protection is applied selectively to state-changing routes (POST, PUT, DELETE, PATCH)
|
||||
// Webhooks and public endpoints are excluded
|
||||
|
||||
// Enhanced rate limiting (Quick Wins)
|
||||
// Public endpoints: 100 requests per 15 minutes per IP
|
||||
|
|
@ -125,10 +121,9 @@ app.get('/health', (req, res) => {
|
|||
});
|
||||
});
|
||||
|
||||
// CSRF token endpoint - Disabled (will implement in Phase 3 with modern solution)
|
||||
// app.get('/api/csrf-token', csrfProtection, (req, res) => {
|
||||
// res.json({ csrfToken: req.csrfToken() });
|
||||
// });
|
||||
// CSRF token endpoint (modern implementation)
|
||||
// Returns the CSRF token from cookie for client-side usage
|
||||
app.get('/api/csrf-token', getCsrfToken);
|
||||
|
||||
// API routes
|
||||
const apiRoutes = require('./routes/index');
|
||||
|
|
@ -192,27 +187,6 @@ app.get('/', (req, res) => {
|
|||
// ERROR HANDLING (Quick Wins)
|
||||
// ============================================================
|
||||
|
||||
// CSRF Error Handler - Disabled (will implement in Phase 3)
|
||||
// app.use((err, req, res, next) => {
|
||||
// if (err.code === 'EBADCSRFTOKEN') {
|
||||
// logSecurityEvent({
|
||||
// type: 'csrf_violation',
|
||||
// sourceIp: getClientIp(req),
|
||||
// userId: req.user?.id,
|
||||
// endpoint: req.path,
|
||||
// userAgent: req.get('user-agent'),
|
||||
// details: { method: req.method },
|
||||
// action: 'blocked',
|
||||
// severity: 'high'
|
||||
// });
|
||||
// return res.status(403).json({
|
||||
// error: 'Invalid CSRF token',
|
||||
// message: 'Request blocked for security reasons'
|
||||
// });
|
||||
// }
|
||||
// next(err);
|
||||
// });
|
||||
|
||||
// 404 handler
|
||||
app.use(notFound);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue