Mobile version< /ol>
Code: Select all
import React, { useState, useEffect, } from 'react';
import Fullscreen from 'react-fullscreen-crossbrowser';
import "./styles.css";
// Dangerous key combinations to block
const DANGEROUS_KEYS = new Set([
// 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
'PrintScreen', 'ScrollLock', 'Pause', 'ContextMenu', 'Escape',
]);
const DANGEROUS_COMBOS = [
{ ctrl: true, shift: true, key: 'p' }, // Chrome's print shortcut
{ ctrl: true, shift: true, key: 'i' }, // DevTools
{ ctrl: true, shift: true, key: 'j' }, // DevTools console
{ ctrl: true, shift: true, key: 'c' }, // Force copy
{ alt: true, tab: true }, // Window switching
{ meta: true, tab: true }, // Mac window switching
{ ctrl: true, alt: true, key: 'Delete' } // Windows security screen
];
const SecureExamContainer = () => {
const [isFullscreen, setIsFullscreen] = useState(false);
const [showExitWarning, setShowExitWarning] = useState(false);
const [examStarted, setExamStarted] = useState(false);
// Handle fullscreen changes
// const handleFullscreenChange = useCallback((isEnabled) => {
// setIsFullscreen(isEnabled);
// if (!isEnabled && examStarted) {
// setShowExitWarning(true);
// // Immediately attempt to re-enter fullscreen
// setTimeout(() => setIsFullscreen(true), 100);
// }
// }, [examStarted]);
// Keyboard and shortcut protection
useEffect(() => {
if (!examStarted) return;
const handleKeyDown = (e) => {
console.log("e.key ", e.key);
// Block function keys
if (DANGEROUS_KEYS.has(e.key)) {
e.preventDefault();
e.stopPropogation();
setShowExitWarning(true);
// triggerViolation(`Function key pressed: ${e.key}`);
return;
}
// Check for dangerous combinations
for (const combo of DANGEROUS_COMBOS) {
const ctrlMatch = !combo.ctrl || e.ctrlKey || e.metaKey;
const shiftMatch = !combo.shift || e.shiftKey;
const altMatch = !combo.alt || e.altKey;
const keyMatch = !combo.key || e.key === combo.key;
const tabMatch = combo.tab === undefined || e.key === 'Tab';
if (ctrlMatch && shiftMatch && altMatch && keyMatch && tabMatch) {
e.preventDefault();
setShowExitWarning(true);
// triggerViolation(`Dangerous combination detected: ${e.key}`);
return;
}
}
// Block Ctrl/Alt/Meta combinations
if (e.ctrlKey || e.altKey || e.metaKey) {
const allowedCombos = [
{ ctrl: true, key: 'c' }, // Allow copy
{ ctrl: true, key: 'v' }, // Allow paste
{ ctrl: true, key: 'x' } // Allow cut
];
const isAllowed = allowedCombos.some(combo =>
(combo.ctrl ? e.ctrlKey || e.metaKey : true) &&
e.key === combo.key
);
if (!isAllowed) {
e.preventDefault();
setShowExitWarning(true);
// triggerViolation(`Modifier key combination detected: ${e.key}`);
}
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [examStarted]);
// Block keyboard shortcuts
useEffect(() => {
const handleKeyDown = (e) => {
if (isFullscreen && (e.key === 'Escape' || e.key === 'F11')) {
e.preventDefault();
setShowExitWarning(true);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isFullscreen]);
// Block right-click and text selection
useEffect(() => {
if (!isFullscreen) return;
const blockContextMenu = (e) => e.preventDefault();
const blockSelection = (e) => e.preventDefault();
document.addEventListener('contextmenu', blockContextMenu);
document.addEventListener('selectstart', blockSelection);
return () => {
document.removeEventListener('contextmenu', blockContextMenu);
document.removeEventListener('selectstart', blockSelection);
};
}, [isFullscreen]);
// Fullscreen enforcement interval
useEffect(() => {
if (!examStarted) return;
const interval = setInterval(() => {
if (!isFullscreen) {
setIsFullscreen(true);
}
}, 1000);
return () => clearInterval(interval);
}, [examStarted, isFullscreen]);
const startExam = () => {
setExamStarted(true);
setIsFullscreen(true);
};
const confirmExit = () => {
setExamStarted(false);
// setIsFullscreen(false);
setShowExitWarning(false);
// Additional cleanup or submission logic here
};
const cancelExit = () => {
setShowExitWarning(false);
setIsFullscreen(true);
};
console.log("showExitWarning ", showExitWarning)
console.log("isFullscreen ", isFullscreen)
return (
{!examStarted && (
Exam Instructions
You must complete this exam in fullscreen mode.
Start Exam
)}
{
if (!isEnabled && examStarted) {
setShowExitWarning(true);
setIsFullscreen(true); // Immediately re-enable fullscreen
}
}}
>
Exam in Progress
{/* Your exam questions/components here */}
Submit Exam
{showExitWarning && (
Warning!
You are not allowed to exit fullscreen during the exam.
Submit & Exit
Continue Exam
)}
);
};
export default SecureExamContainer;
< /code>
Dies ist der zweite < /li>
< /ol>
import React, { useCallback, useEffect } from 'react'
// Dangerous key combinations to block
const DANGEROUS_KEYS = new Set([
'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
'PrintScreen', 'ScrollLock', 'Pause', 'ContextMenu', 'Escape',
]);
const DANGEROUS_COMBOS = [
{ ctrl: true, shift: true, key: 'p' }, // Chrome's print shortcut
{ ctrl: true, shift: true, key: 'i' }, // DevTools
{ ctrl: true, shift: true, key: 'j' }, // DevTools console
{ ctrl: true, shift: true, key: 'c' }, // Force copy
{ alt: true, tab: true }, // Window switching
{ meta: true, tab: true }, // Mac window switching
{ ctrl: true, alt: true, key: 'Delete' } // Windows security screen
];
const StrictFullScreenMdn = () => {
const handleOpenFullScreen = useCallback(() => {
document.documentElement.requestFullscreen();
}, []);
useEffect(() => {
const handleKeyDown = (e) => {
handleOpenFullScreen();
console.log("e.key ", e.key);
// Block function keys
if (DANGEROUS_KEYS.has(e.key)) {
e.preventDefault();
e.stopPropogation();
// setShowExitWarning(true);
// triggerViolation(`Function key pressed: ${e.key}`);
return;
}
// Check for dangerous combinations
for (const combo of DANGEROUS_COMBOS) {
const ctrlMatch = !combo.ctrl || e.ctrlKey || e.metaKey;
const shiftMatch = !combo.shift || e.shiftKey;
const altMatch = !combo.alt || e.altKey;
const keyMatch = !combo.key || e.key === combo.key;
const tabMatch = combo.tab === undefined || e.key === 'Tab';
if (ctrlMatch && shiftMatch && altMatch && keyMatch && tabMatch) {
e.preventDefault();
// setShowExitWarning(true);
// triggerViolation(`Dangerous combination detected: ${e.key}`);
return;
}
}
// Block Ctrl/Alt/Meta combinations
if (e.ctrlKey || e.altKey || e.metaKey) {
const allowedCombos = [
{ ctrl: true, key: 'c' }, // Allow copy
{ ctrl: true, key: 'v' }, // Allow paste
{ ctrl: true, key: 'x' } // Allow cut
];
const isAllowed = allowedCombos.some(combo =>
(combo.ctrl ? e.ctrlKey || e.metaKey : true) &&
e.key === combo.key
);
if (!isAllowed) {
e.preventDefault();
// setShowExitWarning(true);
// triggerViolation(`Modifier key combination detected: ${e.key}`);
}
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
const handleCloseFullScreen = useCallback(() => {
document.exitFullscreen();
}, []);
return (
StrictFullScreenMdn
Open Mode
close Mode
)
}
export default StrictFullScreenMdn