diff --git a/.github/workflows/xss-security-tests.yml b/.github/workflows/xss-security-tests.yml
new file mode 100644
index 0000000..1515059
--- /dev/null
+++ b/.github/workflows/xss-security-tests.yml
@@ -0,0 +1,109 @@
+name: XSS Security Tests
+
+on:
+ push:
+ branches: [ main, develop ]
+ paths:
+ - 'frontend/**'
+ - '.github/workflows/xss-security-tests.yml'
+ pull_request:
+ branches: [ main, develop ]
+ paths:
+ - 'frontend/**'
+ schedule:
+ # Run daily at 2 AM UTC
+ - cron: '0 2 * * *'
+ workflow_dispatch:
+
+jobs:
+ xss-security-tests:
+ name: Run XSS Security Tests
+ runs-on: ubuntu-latest
+ timeout-minutes: 15
+
+ strategy:
+ fail-fast: false
+ matrix:
+ browser: [chromium, firefox, webkit]
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '18'
+ cache: 'npm'
+ cache-dependency-path: frontend/package-lock.json
+
+ - name: Install dependencies
+ working-directory: frontend
+ run: npm ci
+
+ - name: Install Playwright Browsers
+ working-directory: frontend
+ run: npx playwright install --with-deps ${{ matrix.browser }}
+
+ - name: Run XSS Security Tests
+ working-directory: frontend
+ run: npx playwright test --project=${{ matrix.browser }} xss-security
+ env:
+ CI: true
+
+ - name: Upload test results
+ if: always()
+ uses: actions/upload-artifact@v4
+ with:
+ name: playwright-results-${{ matrix.browser }}
+ path: frontend/test-results/
+ retention-days: 30
+
+ - name: Upload Playwright report
+ if: always()
+ uses: actions/upload-artifact@v4
+ with:
+ name: playwright-report-${{ matrix.browser }}
+ path: frontend/playwright-report/
+ retention-days: 30
+
+ - name: Comment PR with results
+ if: github.event_name == 'pull_request' && failure()
+ uses: actions/github-script@v7
+ with:
+ script: |
+ github.rest.issues.createComment({
+ issue_number: context.issue.number,
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ body: '⚠️ XSS Security tests failed on ${{ matrix.browser }}. Please review the test results.'
+ })
+
+ security-summary:
+ name: Security Test Summary
+ runs-on: ubuntu-latest
+ needs: xss-security-tests
+ if: always()
+
+ steps:
+ - name: Check test results
+ run: |
+ if [ "${{ needs.xss-security-tests.result }}" == "failure" ]; then
+ echo "❌ XSS Security tests failed"
+ exit 1
+ else
+ echo "✅ All XSS Security tests passed"
+ fi
+
+ - name: Create security badge
+ if: github.ref == 'refs/heads/main'
+ run: |
+ echo "Security tests: PASSED" > security-status.txt
+
+ - name: Upload security status
+ if: github.ref == 'refs/heads/main'
+ uses: actions/upload-artifact@v4
+ with:
+ name: security-status
+ path: security-status.txt
+ retention-days: 1
diff --git a/frontend/SECURITY_CHECKLIST.md b/frontend/SECURITY_CHECKLIST.md
new file mode 100644
index 0000000..50e7b80
--- /dev/null
+++ b/frontend/SECURITY_CHECKLIST.md
@@ -0,0 +1,328 @@
+# Frontend Security Checklist
+
+Use this checklist when developing or reviewing code to ensure XSS protection is maintained.
+
+## ✅ Before Committing Code
+
+### Data Rendering
+- [ ] All user-supplied data is rendered using React's default escaping (JSX)
+- [ ] No use of `dangerouslySetInnerHTML` with unsanitized data
+- [ ] No direct manipulation of `innerHTML`, `outerHTML`, or `insertAdjacentHTML`
+- [ ] No use of `document.write()` or `document.writeln()`
+
+### Component Development
+- [ ] New components that display user data have XSS tests
+- [ ] Props containing user data are rendered as text, not HTML
+- [ ] Event handlers don't execute user-supplied code
+- [ ] No `eval()` or `Function()` constructor with user input
+
+### API Integration
+- [ ] API responses are treated as untrusted data
+- [ ] Data from API is not passed to dangerous functions
+- [ ] Error messages from API are safely displayed
+- [ ] API data is validated before rendering
+
+### Form Handling
+- [ ] Form inputs accept but don't execute scripts
+- [ ] Input validation is performed (but doesn't rely on it for XSS protection)
+- [ ] Form data is safely displayed after submission
+- [ ] File uploads are properly validated and sanitized
+
+### URL Handling
+- [ ] Query parameters are safely extracted and displayed
+- [ ] URL fragments are not executed as code
+- [ ] `window.location` is not set to user input without validation
+- [ ] Links with `javascript:` protocol are blocked or sanitized
+
+## ✅ Before Deploying
+
+### Testing
+- [ ] All XSS tests pass: `npm run test:xss`
+- [ ] Tests run on all browsers (Chromium, Firefox, WebKit)
+- [ ] No console errors or warnings in browser
+- [ ] Manual testing with XSS payloads completed
+
+### Security Headers
+- [ ] Content-Security-Policy header is configured
+- [ ] X-Content-Type-Options: nosniff is set
+- [ ] X-Frame-Options is configured
+- [ ] Referrer-Policy is set appropriately
+
+### Dependencies
+- [ ] All npm packages are up to date
+- [ ] No known vulnerabilities: `npm audit`
+- [ ] Dependencies are from trusted sources
+- [ ] Lock file is committed
+
+### Code Review
+- [ ] Security-focused code review completed
+- [ ] No hardcoded secrets or API keys
+- [ ] Logging doesn't expose sensitive data
+- [ ] Error messages don't reveal system details
+
+## ✅ When Adding New Features
+
+### New Component Checklist
+```javascript
+// ✅ GOOD - React's default escaping
+function VaccineCard({ vaccine }) {
+ return
{vaccine.name}
;
+}
+
+// ❌ BAD - dangerouslySetInnerHTML
+function VaccineCard({ vaccine }) {
+ return ;
+}
+
+// ❌ BAD - innerHTML
+function VaccineCard({ vaccine }) {
+ const ref = useRef();
+ useEffect(() => {
+ ref.current.innerHTML = vaccine.name;
+ }, [vaccine.name]);
+ return ;
+}
+```
+
+### New API Endpoint Checklist
+- [ ] Response data is typed/validated
+- [ ] Error responses are safely handled
+- [ ] No sensitive data in error messages
+- [ ] Rate limiting is implemented
+- [ ] Authentication is required where appropriate
+
+### New Form Checklist
+- [ ] Input validation on client and server
+- [ ] CSRF protection is implemented
+- [ ] Form data is sanitized on server
+- [ ] Success/error messages are safely displayed
+- [ ] File uploads are validated and scanned
+
+## ✅ Common XSS Vulnerabilities to Avoid
+
+### 1. dangerouslySetInnerHTML
+```javascript
+// ❌ NEVER DO THIS
+
+
+// ✅ DO THIS INSTEAD
+
{userInput}
+```
+
+### 2. innerHTML
+```javascript
+// ❌ NEVER DO THIS
+element.innerHTML = userInput;
+
+// ✅ DO THIS INSTEAD
+element.textContent = userInput;
+```
+
+### 3. eval() and Function()
+```javascript
+// ❌ NEVER DO THIS
+eval(userInput);
+new Function(userInput)();
+
+// ✅ DO THIS INSTEAD
+// Use JSON.parse for data, or avoid dynamic code execution
+```
+
+### 4. javascript: URLs
+```javascript
+// ❌ NEVER DO THIS
+Click
+
+// ✅ DO THIS INSTEAD
+Click
+```
+
+### 5. Event Handlers from User Input
+```javascript
+// ❌ NEVER DO THIS
+
Click
+
+// ✅ DO THIS INSTEAD
+
Click
+```
+
+## ✅ Testing Checklist
+
+### Manual Testing
+- [ ] Test with `` in all inputs
+- [ ] Test with `` in all inputs
+- [ ] Test with HTML entities in all inputs
+- [ ] Test with very long inputs (1000+ characters)
+- [ ] Test with Unicode and special characters
+
+### Automated Testing
+- [ ] Run XSS test suite: `npm run test:xss`
+- [ ] Run in UI mode to debug: `npm run test:ui`
+- [ ] Check test coverage for new components
+- [ ] Review test report: `npm run test:report`
+
+### Browser Testing
+- [ ] Test in Chrome/Chromium
+- [ ] Test in Firefox
+- [ ] Test in Safari/WebKit
+- [ ] Test on mobile devices
+- [ ] Test with browser extensions disabled
+
+## ✅ Security Tools
+
+### Recommended Tools
+- [ ] **Playwright**: Automated XSS testing (already configured)
+- [ ] **npm audit**: Check for vulnerable dependencies
+- [ ] **ESLint**: Static code analysis with security rules
+- [ ] **OWASP ZAP**: Dynamic application security testing
+- [ ] **Snyk**: Continuous security monitoring
+
+### Running Security Scans
+```bash
+# Check for vulnerable dependencies
+npm audit
+
+# Fix vulnerabilities automatically
+npm audit fix
+
+# Run XSS tests
+npm run test:xss
+
+# Run linter with security rules
+npm run lint
+```
+
+## ✅ Incident Response
+
+### If XSS Vulnerability is Found
+
+1. **Immediate Actions**
+ - [ ] Document the vulnerability
+ - [ ] Assess the impact and severity
+ - [ ] Notify the security team
+ - [ ] Create a hotfix branch
+
+2. **Fix Development**
+ - [ ] Write a failing test that reproduces the issue
+ - [ ] Implement the fix
+ - [ ] Verify the test now passes
+ - [ ] Add additional tests for similar scenarios
+
+3. **Deployment**
+ - [ ] Deploy fix to production ASAP
+ - [ ] Monitor for any issues
+ - [ ] Verify fix in production
+ - [ ] Update security documentation
+
+4. **Post-Incident**
+ - [ ] Conduct root cause analysis
+ - [ ] Update security checklist
+ - [ ] Add new test cases
+ - [ ] Train team on lessons learned
+
+## ✅ Resources
+
+### Documentation
+- [OWASP XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- [React Security Best Practices](https://react.dev/learn/writing-markup-with-jsx)
+- [MDN: Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- [Playwright Testing Docs](https://playwright.dev/docs/intro)
+
+### Internal Documentation
+- `frontend/tests/README.md` - Detailed test documentation
+- `frontend/tests/QUICKSTART.md` - Quick start guide
+- `frontend/tests/ACCEPTANCE_CRITERIA.md` - Acceptance criteria verification
+
+### Training
+- Complete OWASP Top 10 training
+- Review XSS attack examples
+- Practice with intentionally vulnerable apps (e.g., DVWA)
+- Participate in security code reviews
+
+## ✅ Regular Maintenance
+
+### Weekly
+- [ ] Review CI/CD test results
+- [ ] Check for failed security tests
+- [ ] Monitor security alerts from GitHub
+
+### Monthly
+- [ ] Run `npm audit` and fix vulnerabilities
+- [ ] Review and update XSS test payloads
+- [ ] Check for new security best practices
+- [ ] Update dependencies
+
+### Quarterly
+- [ ] Security audit of new features
+- [ ] Review and update security documentation
+- [ ] Team security training session
+- [ ] Penetration testing (if applicable)
+
+### Annually
+- [ ] Full security review and assessment
+- [ ] Update security policies
+- [ ] Review and update all security tests
+- [ ] External security audit (recommended)
+
+## ✅ Team Responsibilities
+
+### Developers
+- Write secure code by default
+- Add XSS tests for new features
+- Review security checklist before committing
+- Participate in security code reviews
+
+### Code Reviewers
+- Verify security checklist is followed
+- Check for XSS vulnerabilities
+- Ensure tests are comprehensive
+- Approve only secure code
+
+### Security Team
+- Maintain security documentation
+- Conduct security audits
+- Respond to security incidents
+- Provide security training
+
+### DevOps
+- Configure security headers
+- Monitor security alerts
+- Maintain CI/CD security checks
+- Manage secrets and credentials
+
+---
+
+## Quick Reference Card
+
+### ✅ Safe Practices
+```javascript
+// Rendering user data
+