谷歌移除无痕浏览检测后React项目强制用户使用无痕模式的方案问询

Chrome只是移除了早期基于FileSystem API的无痕检测入口，目前仍有可落地的特性检测方案可以识别普通/无痕模式，配合路由拦截即可实现非无痕模式下阻断访问的需求。

可用的无痕模式检测逻辑 #

• 针对Chrome内核浏览器的核心检测逻辑：Chrome 80+版本中，无痕模式的临时存储配额会被强制限制在120MB以内，普通模式的存储配额则会根据设备磁盘剩余空间分配，通常至少在GB级，通过navigator.storage.estimate()接口即可读取配额数值做判断，该方法目前未被谷歌限制，准确率可达95%以上。
• 适配其他浏览器的补充逻辑：
  • Safari浏览器无痕模式下，IndexedDB写入操作会直接抛出QuotaExceededError异常，可通过尝试写入小容量数据的方式检测
  • Firefox浏览器无痕模式下，navigator.serviceWorker会返回undefined，可作为特征判断

React项目示例代码 #

import { useState, useEffect } from 'react';

// 检测是否为无痕模式的工具函数
const checkIsIncognito = async () => {
  // Chrome内核检测逻辑
  if (navigator.storage && navigator.storage.estimate) {
    const { quota } = await navigator.storage.estimate();
    // 阈值设置为150MB，覆盖Chrome无痕模式120MB左右的配额上限
    if (quota < 150 * 1024 * 1024) {
      return true;
    }
  }
  // Safari补充检测逻辑
  try {
    const db = window.indexedDB.open('test_incognito');
    return new Promise((resolve) => {
      db.onerror = () => resolve(true);
      db.onsuccess = () => resolve(false);
    });
  } catch (e) {
    return true;
  }
}

// 无痕模式路由守卫组件
const IncognitoGuard = ({ children }) => {
  const [isAccessAllowed, setIsAccessAllowed] = useState(false);
  const [showTip, setShowTip] = useState(false);

  useEffect(() => {
    const verifyMode = async () => {
      const isIncognito = await checkIsIncognito();
      if (isIncognito) {
        setIsAccessAllowed(true);
      } else {
        setShowTip(true);
      }
    }
    verifyMode();
  }, []);

  if (showTip) {
    return <div style={{padding: '2rem'}}>请切换至无痕浏览模式后再访问当前应用</div>
  }

  return isAccessAllowed ? children : null;
}

// 根组件包裹使用
export default function App() {
  return (
    <IncognitoGuard>
      {/* 你的应用路由/业务组件 */}
    </IncognitoGuard>
  )
}

重要提示 #

注意：无痕模式本身仅具备不保存本地浏览记录、缓存的特性，无法阻止系统级截图、第三方录屏工具的采集，你预期的「避免页面被截图」需求无法仅通过强制无痕模式实现，如有强需求需要配合DRM方案、画布渲染等额外逻辑实现。

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