162 lines
4.6 KiB
Markdown
162 lines
4.6 KiB
Markdown
# 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**
|
|
```jsx
|
|
<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**
|
|
```jsx
|
|
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**
|
|
```jsx
|
|
<div className="free-hints">
|
|
<h4>💡 Hinweise (kostenlos)</h4>
|
|
{freeHints.map((hint, i) => (
|
|
<li key={i}>{hint}</li>
|
|
))}
|
|
</div>
|
|
```
|
|
|
|
**5. Add Hint Request Button**
|
|
```jsx
|
|
<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**
|
|
```jsx
|
|
useEffect(() => {
|
|
participantAPI.executeLessonAction(eventLessonId, 'start-timer', {
|
|
stepId: 'xss-demo'
|
|
});
|
|
}, []);
|
|
```
|
|
|
|
**7. Lock Previous Button (LessonView.jsx)**
|
|
```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):
|
|
```javascript
|
|
// 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
|