如何在测试应用中阻止用户切换浏览器标签页或退出浏览器？

一、前端基础拦截手段 #

1. 拦截页面关闭/刷新/跳转 #

通过beforeunload事件在用户触发退出操作时弹出确认提示，虽然多数浏览器会强制使用系统默认提示文本，但能有效提醒用户并增加退出门槛：

window.addEventListener('beforeunload', function(e) {
  const tip = '测试未完成，退出将提交答卷或丢失数据';
  e.returnValue = tip;
  return tip;
});

2. 监控标签页/窗口切换 #

利用visibilitychange事件检测页面是否被隐藏（切换标签页、最小化窗口都会触发），可在此处触发警告或记录作弊行为：

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    alert('请勿切换标签页，该行为将被记录为作弊嫌疑');
    // 同步向后端上报行为日志
    fetch('/api/log-cheat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'tab_switch', userId: 'xxx', testId: 'yyy' })
    });
  }
});

二、全屏锁定增强限制 #

强制页面进入全屏模式，减少用户切换窗口的操作空间，同时监听全屏退出事件：

// 进入全屏的兼容方法
function enterFullscreen() {
  const elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

// 监听全屏退出事件
document.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement) {
    alert('测试需在全屏模式下进行，请立即返回全屏');
    setTimeout(enterFullscreen, 1000);
  }
});

// 测试开始时触发全屏（需用户交互触发，可在"开始测试"按钮点击事件中调用）
document.getElementById('start-test-btn').addEventListener('click', enterFullscreen);

注意：浏览器禁止自动触发全屏，必须绑定用户交互（如按钮点击）才能生效。

三、后端辅助校验（核心防作弊补充） #

前端手段无法完全阻止技术绕过，必须结合后端校验：

• 定时心跳检测：前端每隔3-5秒向后端发送心跳请求，后端记录请求间隔，若间隔超过阈值（如10秒）则标记作弊嫌疑：

setInterval(() => {
  fetch('/api/heartbeat', {
    method: 'POST',
    body: JSON.stringify({ userId: 'xxx', testId: 'yyy' })
  });
}, 3000);

• 焦点丢失上报：监听页面blur事件（窗口失去焦点时触发），实时上报行为到后端：

window.addEventListener('blur', function() {
  fetch('/api/log-cheat', {
    method: 'POST',
    body: JSON.stringify({ action: 'window_blur', userId: 'xxx' })
  });
});

四、局限性说明 #

• 浏览器安全限制：现代浏览器不会允许完全阻止用户退出，用户仍可强制关闭浏览器、禁用JavaScript绕过前端拦截；
• 技术绕过风险：懂技术的用户可通过开发者工具、浏览器插件等手段规避监控，需配合摄像头监控、屏幕共享、题目随机化等其他防作弊手段。

内容的提问来源于stack exchange，提问作者Softtagz