Client-Side Proctoring
Relevant source files
The following files were used as context for generating this wiki page:
The Client-Side Proctoring system is a security layer within the Debug Arena platform designed to ensure event integrity during competitive coding sessions. It enforces a strict environment by monitoring user behavior and restricting the workspace to a mandatory fullscreen mode to prevent unauthorized resource access or collaboration.
This system combines real-time JavaScript monitoring with a persistent backend tracking mechanism. It detects violations such as tab switching, window blurring, and exiting fullscreen, automatically disqualifying participants who exceed a predefined threshold of three violations.
Sources: README.md:21-25, static/js/proctor.js:2-3
Initialization and Enforcement
The proctoring environment is initialized from the Dashboard. Users are presented with a "Start Secure Arena" modal that explains the integrity rules before they can access any coding levels.
Fullscreen Requirement
Entry into the secure environment requires the user to trigger fullscreen mode. The system uses the requestFullscreen() API (and its webkit variant) to lock the browser into the platform interface. Navigation between levels is handled by setting a temporary is_navigating flag in sessionStorage to prevent false positive violation logs during page transitions.
Sources: templates/dashboard.html:4-18, static/js/proctor.js:13-21
The following flowchart illustrates the initialization process:
The diagram shows the logic for initializing the secure environment through a mandatory modal and fullscreen request.
Sources: templates/dashboard.html:95-115
Violation Detection Logic
The proctoring system monitors specific browser events to detect potential cheating. When a violation occurs, the client sends a request to the server-side /log_violation endpoint to increment the team's violation count in the database.
Monitored Events
| Event Type | Logic Trigger | Technical Implementation |
|---|---|---|
| Fullscreen Exit | User exits fullscreen mode. | fullscreenchange listener |
| Tab Switching | Browser tab loses focus or window is minimized. | visibilitychange listener (hidden state) |
| Window Blur | User clicks outside the browser window. | Focus loss detection |
Sources: static/js/proctor.js:63-75, README.md:23-24
Violation Thresholds
The platform enforces a hard limit of 3 violations. Once this limit is reached, the server identifies the team as disqualified, and the client-side script redirects the user to a disqualification landing page.
Sources: static/js/proctor.js:3, 40-41, routes/arena_routes.py:108-111
Server-Side Persistence and Gatekeeping
While detection occurs on the client, the authoritative state is managed on the backend. This prevents users from bypassing the proctoring logic by refreshing the page or clearing client-side storage.
Data Model
The Team model includes a violations integer field that persists the count across sessions.
Sources: models/team.py:18
The Gatekeeper Middleware
The arena routes implement a "Gatekeeper" pattern. Before rendering the dashboard or any level page, the system queries the team's current violation count. If the count is 3 or greater, the user is redirected to the /disqualified route, effectively locking them out of the competition.
Sources: routes/arena_routes.py:17-21, 51-54
The sequence diagram details the communication between the client-side proctor and the backend when a protocol violation is detected.
Sources: static/js/proctor.js:24-44, routes/arena_routes.py:100-117
Disqualification and Recovery
When a team is disqualified, their status is set to "LOCKED". The platform displays their final score and the reason for disqualification.
Recovery Mechanism
There is no automated client-side recovery. Reinstating a team requires administrative intervention via the admin_reset.py utility. This script resets the violations field to 0 for a specific team in the database.
Sources: templates/disqualified.html:23-35, admin_reset.py:13-16
# From static/js/proctor.js
async function log_violation(reason = "policy_violation") {
const response = await fetch('/log_violation', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ reason: reason })
});
const data = await response.json();
if (data.disqualified || data.violations >= 3) {
window.location.href = "/disqualified";
}
}
Sources: static/js/proctor.js:24-44
Summary
Client-Side Proctoring serves as the primary enforcement mechanism for the Debug Arena's competitive rules. By combining mandatory fullscreen initialization, multi-event monitoring (tab switching and fullscreen exits), and server-side persistence, the system ensures that participants remain within a controlled environment throughout the challenge. The integration of a "three-strike" rule with manual administrative overrides balances strict security with the ability to handle technical issues.