medienkompetenz-lernplattform/XSS_ENHANCEMENTS.md

XSS Lesson Enhancements - Implementation Summary

Features Implemented

Backend (✅ Complete)

File: /backend/lessons/modules/xss-comprehensive/index.js

1. Variant Discovery Tracking

   • Tracks 9 unique XSS variants per participant
   • Returns progress: { discovered: X, total: 9, remaining: Y }
   • Variants: Script Tag, Event Handlers (quoted/unquoted), JavaScript Protocol, IFrame, Image Error, SVG Onload, Object, Embed

2. Timer System

   • 15-minute countdown per interactive step
   • startStepTimer() - Initializes timer when step starts
   • isTimeExpired() - Checks if time limit exceeded
   • getRemainingTime() - Returns milliseconds remaining
   • canEarnPoints: false after time expires

3. Hint System

   • Progressive hints (4 levels per step)
   • 5 points deducted per hint requested
   • getHint(participantId, stepId, level) returns hint text and penalty
   • Tracks hints used per participant per step

4. Free Hints

   • Provided in getInteractiveData() without penalty
   • General guidance hints displayed at start

Frontend (🚧 Needs Implementation)

Components to Update:

1. XSSDeeplinkDemo.jsx - Reflected XSS demo
2. ForumScriptDemo.jsx - Stored XSS demo
3. LessonView.jsx - Lock previous button after interactive steps

Required Features:

1. Remove Example Buttons

• ❌ Remove examples.map() button rendering
• ❌ Remove loadExample() function
• Students must discover payloads themselves

2. Add Progress Tracker

<div>
  <h4>🎯 Fortschritt</h4>
  <p>{progress.discovered} von {progress.total} Varianten entdeckt</p>
  <ProgressBar value={progress.discovered} max={progress.total} />
</div>

3. Add Timer Display

const [remainingTime, setRemainingTime] = useState(900000); // 15 min

useEffect(() => {
  const timer = setInterval(() => {
    setRemainingTime(prev => Math.max(0, prev - 1000));
  }, 1000);
  return () => clearInterval(timer);
}, []);

<div>
  ⏱️ Verbleibende Zeit: {formatTime(remainingTime)}
  {remainingTime === 0 && <span>⚠️ Keine Punkte mehr verfügbar</span>}
</div>

4. Add Free Hints Display

<div className="free-hints">
  <h4>💡 Hinweise (kostenlos)</h4>
  {freeHints.map((hint, i) => (
    <li key={i}>{hint}</li>
  ))}
</div>

5. Add Hint Request Button

<button onClick={requestHint}>
  💡 Hinweis anfordern (-5 Punkte)
</button>
{currentHint && (
  <div className="paid-hint">
    <p>{currentHint.hint}</p>
    <small>Hinweise verwendet: {currentHint.hintsUsed} | Abzug: {currentHint.totalPointsDeducted} Punkte</small>
  </div>
)}

6. Start Timer on Mount

useEffect(() => {
  participantAPI.executeLessonAction(eventLessonId, 'start-timer', {
    stepId: 'xss-demo'
  });
}, []);

7. Lock Previous Button (LessonView.jsx)

const [completedInteractive, setCompletedInteractive] = useState(false);

// After interactive step
if (currentStep.type === 'interactive' && !completedInteractive) {
  setCompletedInteractive(true);
}

<button
  onClick={() => setCurrentStepIndex(i => i - 1)}
  disabled={completedInteractive}
>
  ← Zurück {completedInteractive && '(Gesperrt)'}
</button>

API Endpoints to Add

The backend module methods need to be exposed via executeLessonAction:

In lesson controller (already supports executeLessonAction):

// Actions to handle:
- 'start-timer' → module.startStepTimer(participantId, stepId)
- 'get-hint' → module.getHint(participantId, stepId)
- 'test-xss' → module.testXSSPayload(participantId, payload, stepId)
- 'add-comment' → module.addComment(participantId, author, content, stepId)

Testing Steps

1. ✅ Backend module created with all tracking
2. ⏳ Rebuild backend container
3. ⏳ Update XSSDeeplinkDemo.jsx
4. ⏳ Update ForumScriptDemo.jsx
5. ⏳ Update LessonView.jsx
6. ⏳ Rebuild frontend container
7. ⏳ Test in browser:
   • Timer counts down
   • Progress updates when discovering variants
   • Hints work with point deduction
   • Free hints visible
   • Previous button locks after interactive step

File Locations

• Backend: /backend/lessons/modules/xss-comprehensive/index.js ✅
• Frontend Demos:
  • /frontend/src/components/lessons/InteractiveContent/XSSDeeplinkDemo.jsx ⏳
  • /frontend/src/components/lessons/InteractiveContent/ForumScriptDemo.jsx ⏳
• Lesson View: /frontend/src/pages/LessonView.jsx ⏳

Next Steps

1. Update controller to expose hint and timer endpoints
2. Implement frontend components with new UI
3. Test complete workflow
4. Verify point deductions work correctly
5. Confirm timer enforcement