iframe中指向其他域名的链接是否可以被忽略或禁用？

方案1：配置iframe的sandbox属性（推荐，无额外开发成本） #

这是最简单的实现方式，通过sandbox属性限制iframe的运行权限，直接禁止iframe内的链接触发顶层页面导航，浏览器会静默拦截跳转行为，不会抛出可见报错。

• 核心配置：仅保留必要的运行权限，不要添加allow-top-navigation、allow-top-navigation-by-user-activation等允许跳转顶层页面的权限，React实现示例如下：

import React from 'react';

const ThirdPartyIframe = () => {
  return (
    <iframe
      src="你的第三方页面地址"
      // 仅开放脚本执行、同域资源访问权限，其他权限默认全部禁用
      sandbox="allow-same-origin allow-scripts"
      style={{ width: '100%', height: '100vh', border: 'none' }}
      title="第三方嵌入内容"
    />
  );
};

export default ThirdPartyIframe;

• 扩展说明：如果需要支持表单提交可追加allow-forms，需要支持链接新开标签页可追加allow-popups，按需调整权限即可。

方案2：服务端代理嵌入内容（适合需要精细化控制的场景） #

如果你需要区分拦截跨域链接、保留同域链接正常跳转，可通过服务端将第三方网页代理到你的业务域名下，此时iframe属于同域资源，你可以直接注入自定义脚本拦截链接点击：

• 实现步骤：
  1. 服务端搭建代理服务，转发第三方页面的所有资源请求，替换资源路径为代理路径
  2. 向代理返回的HTML内容中注入拦截脚本，禁用所有指向外部域名的a标签点击事件
• 拦截脚本示例：

document.addEventListener('click', (e) => {
  const targetLink = e.target.closest('a');
  if (targetLink && new URL(targetLink.href).origin !== window.location.origin) {
    e.preventDefault();
    e.stopPropagation();
  }
}, true);

该方案的缺点是需要额外处理Cookie、资源路径、跨域请求等问题，开发成本较高。 #

报错说明 #

你遇到的连接被拒绝报错是浏览器同源策略拦截了iframe跨域跳转顶层页面的行为，通过上述方案禁用该类跳转行为后即可消除报错。

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