Next.js实现DevTools开启自动跳转的跨浏览器方案求助

我想保护站点内嵌视频的URL，防止用户通过DevTools查看播放器信息。像muya.et、sflix.to这类站点已经实现了该功能。我尝试了一段Next.js代码，但只在Firefox中有效，其他浏览器会误触发跳转（哪怕没打开DevTools）。现在需要一个能在主流浏览器中准确检测DevTools并执行跳转的方案。

我目前的代码（仅Firefox有效） #

"use client"
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

const DetectDevTools = () => {
  const router = useRouter();

  useEffect(() => {
    const detectDevTools = () => {
      const devtools = /./;
      devtools.toString = function() {
        router.push('/devtools-detected'); // 替换为你需要的跳转路径
        return 'devtools-detected';
      };
      console.log(devtools); // DevTools打开时会触发toString方法
    };

    // 组件挂载时执行一次检测
    detectDevTools();
  }, [router]);

  return null;
};

export default DetectDevTools;

改进后的兼容方案（支持主流浏览器） #

下面的实现结合多种检测逻辑，大幅降低误触发概率，同时覆盖Chrome、Firefox、Edge、Safari等主流浏览器：

"use client"
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

const DetectDevTools = () => {
  const router = useRouter();
  let detectionInterval;

  const isDevToolsOpen = async () => {
    let devtoolsOpen = false;

    // 1. Chrome/Edge专属检测：console输出对象时的toString劫持+时间差判断
    const devtoolsMarker = /./;
    const timeStart = performance.now();
    devtoolsMarker.toString = () => {
      const timeEnd = performance.now();
      // DevTools打开时，对象序列化耗时会显著增加
      if (timeEnd - timeStart > 100) devtoolsOpen = true;
      return '';
    };
    console.log(devtoolsMarker);
    console.clear(); // 清除检测日志，避免暴露逻辑

    // 2. 窗口尺寸比例检测（适配Firefox/Safari）
    const widthRatio = window.innerWidth / window.outerWidth;
    const heightRatio = window.innerHeight / window.outerHeight;
    // DevTools打开会挤压页面视口，比例会低于正常阈值
    if (widthRatio < 0.9 || heightRatio < 0.9) devtoolsOpen = true;

    // 3. 调试器阻塞检测（补充逻辑，针对主动断点调试）
    const debugStart = performance.now();
    debugger;
    const debugEnd = performance.now();
    // 若debugger执行耗时过长，说明被DevTools拦截
    if (debugEnd - debugStart > 100) devtoolsOpen = true;

    return devtoolsOpen;
  };

  const checkAndRedirect = async () => {
    if (await isDevToolsOpen()) {
      router.push('/devtools-detected');
      clearInterval(detectionInterval); // 触发跳转后停止检测
    }
  };

  useEffect(() => {
    // 挂载后立即检测一次
    checkAndRedirect();
    // 每隔1秒轮询检测，覆盖用户中途打开DevTools的场景
    detectionInterval = setInterval(checkAndRedirect, 1000);

    // 组件卸载时清理定时器
    return () => clearInterval(detectionInterval);
  }, [router]);

  return null;
};

export default DetectDevTools;

关键说明 #

• 多逻辑组合：单一检测方法容易误判，结合三种手段提升准确率
• 日志清除：用console.clear()隐藏检测用的控制台输出，避免暴露检测逻辑
• 阈值可调：时间差（100ms）和窗口比例（0.9）可根据站点实际布局调整
• 实时监控：通过定时器定期检测，确保用户后续打开DevTools也能被捕获

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