如何在Chrome kiosk模式下阻止Next.js/React应用跳转外部域名？

一、Chrome组策略配置（受控Kiosk环境首选） #

如果你的Kiosk环境是受控的，用Chrome组策略是最彻底的解决方式——能拦截所有外部URL跳转，包括自由内容里的链接、地址栏输入等：

• 操作步骤：
  1. 按操作系统打开对应配置工具：
     • Windows：运行gpedit.msc打开组策略编辑器，定位到计算机配置 > 管理模板 > Google > Google Chrome
     • macOS/Linux：创建Chrome策略配置文件（参考Chrome官方的企业策略文档）
  2. 启用「URL黑名单」并添加*（拦截所有URL），同时启用「URL白名单」，添加你的应用域名（例如https://your-app-domain.com/*）
  3. 重启Chrome Kiosk模式，此时所有不在白名单内的URL都会被拦截，Chrome会显示无法访问页面

二、Next.js前端全局拦截（处理自由内容中的链接） #

如果没法用组策略，或者需要在应用层面控制，可通过全局事件监听拦截外部链接：

1. 监听路由跳转：在_app.js（App Router则用layout.js）中监听路由变化，拦截外部跳转：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const blockExternalRoutes = (url) => {
      const isExternal = !url.startsWith('/') && !url.startsWith(window.location.origin);
      if (isExternal) {
        router.events.emit('routeChangeError');
        window.event?.preventDefault();
        alert('无法访问外部链接'); // 可替换为自定义提示组件
      }
    };

    router.events.on('routeChangeStart', blockExternalRoutes);
    return () => router.events.off('routeChangeStart', blockExternalRoutes);
  }, [router]);

  return <Component {...pageProps} />;
}

2. 拦截原生<a>标签点击：针对富文本等自由内容里的原生链接，添加全局点击监听：

useEffect(() => {
  const blockExternalLinks = (e) => {
    const link = e.target.closest('a');
    if (!link) return;
    
    const href = link.getAttribute('href');
    if (href && !href.startsWith('/') && !href.startsWith(window.location.origin)) {
      e.preventDefault();
      alert('无法访问外部链接');
    }
  };

  document.addEventListener('click', blockExternalLinks);
  return () => document.removeEventListener('click', blockExternalLinks);
}, []);

三、Next.js中间件（拦截服务器端跳转） #

如果存在服务器端重定向到外部URL的场景，用中间件拦截：
创建middleware.js文件：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const targetOrigin = new URL(request.nextUrl).origin;
  // 拦截服务器端发起的外部跳转请求
  if (request.nextUrl.origin !== targetOrigin) {
    return NextResponse.redirect(new URL('/blocked', request.url));
    // 也可直接返回403：return new NextResponse('Forbidden', { status: 403 });
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/:path*'],
};

注意：中间件只能处理服务器端的请求跳转，无法拦截前端页面里直接点击<a>标签的外部跳转，需要和前端全局监听配合使用。

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